Question

在我的网站上，用户可以点击＆＃34;在线聊天＆＃34;按钮和聊天窗口出现。我正在寻找一些文本来读取（对于具有屏幕阅读器的辅助功能用户）

当聊天窗口出现时，焦点将转到输入文本框 - 用户可以在其中输入文本以与顾问聊天。我有一个位于屏幕之外的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。

中的原因

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