wai-aria - aria 标签 - 强制屏幕阅读器读取一些文本

Question

在我的网站上，用户可以单击“实时聊天”按钮，然后会出现一个聊天窗口。我正在寻找一些文本来读出(对于使用屏幕阅读器的辅助用户)

当聊天窗口出现时，焦点将转到输入文本框 - 用户可以在其中输入文本与顾问聊天。我有一个 div 位于远离屏幕的地方 - 我想读出文本。我尝试过 aria-live=assertive，但没有成功 - 没有被读出。

<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中.

请记住，这可能不是最好的方法，因此您应该与用户一起测试。但是，它涉及的元素较少，并且可以将消息直接放在您需要的地方，而无需依赖脚本。

• 可能值得一读:Screen reader support for ARIA live regions
• 来自 JAWS 的示例:ARIA (Accessible Rich Internet Applications) Live Regions