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

Question

7

在我的网站上，用户可以点击“在线聊天”按钮，然后聊天窗口会出现。我正在寻找一些文本内容（用于辅助功能用户使用屏幕阅读器）。

当聊天窗口出现时，焦点会移到输入文本框处 - 用户可以在那里输入文本以与顾问聊天。我有一个 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>

有什么办法可以强制朗读这个内容吗？

谢谢。

- thegunner

您想让屏幕阅读器在页面加载时读取文本还是在用户将焦点放在输入框上时读取？ - aardrian

只有在页面/聊天窗口加载时才能生效。已经有JavaScript代码，当页面主体加载时焦点在文本框上。如果我把文本放在<title>元素中，可能会起作用，但这不是预期的结果。 - thegunner

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- aardrian · Accepted Answer

支持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中包含它的原因。

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