咏叹调标签 - 强制屏幕阅读器阅读一些文字

Question

在我的网站上,用户可以点击"在线聊天"按钮,然后会出现一个聊天窗口.我正在寻找一些文本来读取(对于具有屏幕阅读器的辅助功能用户)

当聊天窗口出现时,焦点将转到输入文本框 - 用户可以在其中输入文本以与顾问聊天.我有一个位于屏幕之外的div - 我希望将文本读出来.我试过aria-live =断言,但没有运气 - 没有读出来.

<div id="sreader" aria-live="Assertive"> if you use a screen reader you can call this number 0800 123 456</div>

任何想法 - 如何被迫读出来？

谢谢

Answer 1

支持aria-live是参差不齐.

看一个代码示例会很方便,但是如果你总是把注意力放在字段上,那么也许你想要使用aria-label一些好的消息,因为这可以得到更好的支持,并且当字段获得焦点时会说出来.

例如:

<label for="foo">Field Label</label>
<input type="text" id="foo" aria-label="Field Label. Note: If you are using a screen reader…">

请注意,这仍然向用户宣告该字段并完全覆盖该文本中的文本<label>.这就是为什么我把它包括在内aria-label.

请记住,这可能不是最佳方法,因此您应该与用户一起测试.但是,它涉及更少的元素,并将消息直接放在您似乎需要它的位置,而无需依赖脚本.