强迫下巴读一块文本

我正在努力改善网站的可访问性，我想强迫下巴阅读一块文本以帮助用户。

例如，我有一个弹出帮助模式的帮助图标链接。该模态包含一些有用的文本。我想确保将此文本读取给用户。我想拥有一个类似于div的解决方案，我可以在其中做类似的事情：

<div class="ForceReadText">
  <p>Block of text to be read, that currently isn't being read.</p>
</div>

我对下颌并不熟悉，我的Google-Fu技能使我失败了。我认为最好问一个可能知道如何实现这一目标的人。有什么想法吗？

强迫事物很困难，并给出了粗鲁的外观。我过去为可访问的模态所做的是使它们打开链接的图标，并指向模式或其标题的 id属性。如果有人想要帮助，请单击链接并将其带到信息（并将使用箭头键来读取文本）；如果没有，他们可以继续前进。

<a href="#modal-heading"><img src="icon.png" alt="More information"></a>

对于您所描述的内容，听起来您可能想要一个Aria Live区域。MDN具有可能使用的概述。

为了快速概述，实时区域非常适合对页面的实时更新，例如错误或警报。实时区域具有中断屏幕阅读器所讲的内容以说话的能力。实时区域不会更改页面上的焦点位置。

诀窍将理解一个页面确实应该只有一个实时区域。

另一个技巧将使您的所有消息进入一个实时区域，尽管如果您的弹出窗口表现得像工具尖端，那肯定是可以的（只需重新使用）。

如果表现像模态，请继续阅读...

现在，只要您拥有良好的焦点管理实践（对于模型所必需的焦点管理实践），就可以说，先前的答案（来自@Stringy）可能是一种更智能的方法。如果您不这样做，那么现场区域可能会更合适（也许更少）。

无论哪种方式，请查看这些模式，看看是否解决了您的目标：

相关内容