Android Talkback 朗读视觉上位于输入上方的文本

Question

我正在尝试为屏幕阅读器优化一些组件，但是 Android Talkback 被证明是一个挑战....

下面是一个非常简化的代码示例：

<div class="wrapper">
 <form>
  <span role="presentation" aria-hidden="true">
   This should not be read by Talkback
  </span>

  <input aria-label="This should be read by Talkback" />
 </form>
</div>

跨度内的文本会动态更新，并且绝对定位在输入之上 - 只是看起来像一个动画占位符，实际上不会被屏幕阅读器阅读。这就是 aria-label 的用途。但是，TalkBack 似乎仍然可以识别跨度 - 所以它首先读取 aria-label 的内容，然后继续读取跨度中的文本......角色“presentation”或角色“none”并没有阻止这一点，也没有将文本从输入中移得更远。（例如，在表格之外）。有什么办法可以防止这种情况吗？

Answer 1

role 属性仅更改对讲和其他屏幕 reader 宣布的元素的类型。将其设置为 presentation 或 none 只是删除元素的语义类型。默认情况下，<span> 没有本机角色，因此它本质上是 presentation/none 隐含的，不会有任何影响。

aria-hidden 是关键。它将在屏幕上隐藏该元素 reader。（CSS display:none 和 visibility:hidden 也会从屏幕上隐藏一个元素 reader 但它也会使有视力的用户也看不到该元素。）

您的代码示例应该可以很好地与 Talkback 配合使用。但是，您提到您动态更改 <span> 的内容。这不是问题，但是当您更新文本时，aria-hidden 是否有可能被删除？

我在 Android 上使用 aria-hidden 没有任何问题。

Answer 2

我的示例中的解决方案已经足以解决问题。 aria-hidden 防止 span 成为焦点，如果 span 位于之前（而不是之后），TalkBack 将不会将文本解释为输入的一部分。

Android Talkback 朗读视觉上位于输入上方的文本

Android Talkback reads text visually positioned above input aloud

html

accessibility

talkback