当事件发生时，我们如何强制屏幕阅读器阅读一些文本？

Question

此文字不可见，仅用于屏幕阅读器。 例： 点击一个按钮，我会显示绿色复选标记png。我怎样才能强制读者说出＆＃34;按钮点击＆＃34;。

Answer 1

你的问题标题的答案是使用aria-live区域（这就是你如何让屏幕阅读器阅读文字），但你的问题描述听起来像是一个不同的问题。

点击按钮并获得绿色复选标记后，您是否可以再次单击该按钮并且复选标记消失？如果是这样，那么它本质上是一个复选框。如果您未在幕后使用原生复选框（<input type="checkbox">），则需要aria-checked属性（和role="checkbox"）。只需在aria-checked和true（来自javascript）之间切换false，屏幕阅读器就会负责宣布更改。您需要role="checkbox"，以便屏幕阅读器还宣布您有一个复选框，以便用户知道如何与之交互。您不必强制阅读任何文本。

如果您的按钮更像是可以按下或弹出的切换按钮（如格式栏上的“粗体”或“斜体”按钮），那么您需要使用aria-pressed（和role="button"）并在true和false之间切换其值。

请记住，如果您有自定义复选框或按钮，则除了鼠标外，还需要允许使用键盘选择对象。应使用Space键选择复选框。按钮应该允许Space或Enter键。分别参见https://www.w3.org/TR/wai-aria-practices/#checkbox和https://www.w3.org/TR/wai-aria-practices/#button。

关于可访问性的最后一个注意事项，如果您的绿色选中标记（PNG）仅用于传达按钮的状态，那么您就可以了。但如果绿色也代表其他信息，那么您需要另外的指示来获取其他信息。例如，如果绿色检查意味着一件事而红色支票意味着其他东西，那么缺色用户将无法区分这两者。您需要一个额外的图标或文本格式（粗体，斜体，下划线）或一些视觉提示来传达含义。

Answer 2

迫使大多数屏幕阅读器从一个点开始阅读的简单方法是让它集中注意力。如果你使元素可以聚焦（通过给它一个tabindex），然后明确地给它焦点（myElement.focus()），屏幕阅读器应该从那里开始阅读。

请注意，它也将继续从那里读取，因此请确保HTML流程适合于从该点继续阅读。