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屬性僅更改 Talkback 和其他屏幕閱讀器宣布的元素類型。 將其設置為presentation或none只會刪除元素的語義類型。 <span>默認情況下沒有本地角色，因此它本質上是隱式的 presentation/none 並且不會有任何影響。

aria-hidden是關鍵。 它將從屏幕閱讀器中隱藏該元素。 （CSS display:none和visibility:hidden也會從屏幕閱讀器中隱藏一個元素，但它也會讓視力正常的用戶看不到該元素。）

您的代碼示例應該可以與 Talkback 一起正常工作。 但是，您提到您動態更改了<span>的內容。 這不是問題，但是當您更新文本時，是否有可能刪除aria-hidden ？

我在 Android 上使用了aria-hidden沒有任何問題。

Answer 2

我示例中的解決方案已經足以解決問題。 aria-hidden 防止 span 成為焦點，如果 span 位於之前（而不是之后），TalkBack 將不會將文本解釋為輸入的一部分。