当事件发生时,我们如何强制屏幕 reader 读取一些文本?
How can we enforce the screen reader to read some text when an event occurs?
此文本不可见,将仅用于屏幕 reader。
例子:
单击一个按钮,我会显示一个绿色的复选标记 png。我如何强制 reader 说 "Button Clicked".
强制大多数屏幕 reader 从一个点开始阅读的一种简单方法是为其提供焦点。如果您使元素可聚焦(通过给它一个 tabindex
),然后明确地给它聚焦(myElement.focus()
),屏幕 reader 应该从那里开始读取。
请注意,它也会继续从那里读取,因此请确保您的 HTML 流量适合它从该点继续读取。
你的问题标题的答案是使用 aria-live
区域(这就是你如何获得屏幕 reader 来阅读文本),但你的问题描述听起来像是一个不同的问题。
点击按钮得到绿色复选标记后,是否可以再次单击按钮,复选标记消失?如果是这样,那么它本质上是一个复选框。如果您不在后台使用本机复选框 (<input type="checkbox">
),那么您将需要 aria-checked
属性(和 role="checkbox"
)。只需在 true
和 false
之间切换 aria-checked
(来自 javascript),屏幕 reader 将负责宣布更改。您需要 role="checkbox"
以便屏幕 reader 也宣布您有一个复选框,以便用户知道如何与之交互。您不必强制阅读任何文本。
如果您的按钮更像是一个可以按下或弹出的切换按钮(例如格式栏上的 'bold' 或 'italics' 按钮),那么您会想要使用aria-pressed
(和 role="button"
)并在 true
和 false
之间切换其值。
请记住,如果您有自定义复选框或按钮,则需要允许 object 除了鼠标外还可以通过键盘进行选择。应该可以使用 Space 键选择一个复选框。按钮应允许 Space 或 Enter 键。分别参见 https://www.w3.org/TR/wai-aria-practices/#checkbox and https://www.w3.org/TR/wai-aria-practices/#button。
关于辅助功能的最后一点说明,如果您的绿色复选标记 (PNG) 仅用于传达按钮的状态,那么您就可以了。但是,如果绿色还代表附加信息,则您需要另一个指示器来显示该附加信息。例如,如果绿色勾号表示一件事而红色勾号表示另一件事,那么色盲用户将无法分辨两者之间的区别。您需要额外的图标或文本格式(粗体、斜体、下划线)或一些视觉提示来传达含义。
此文本不可见,将仅用于屏幕 reader。 例子: 单击一个按钮,我会显示一个绿色的复选标记 png。我如何强制 reader 说 "Button Clicked".
强制大多数屏幕 reader 从一个点开始阅读的一种简单方法是为其提供焦点。如果您使元素可聚焦(通过给它一个 tabindex
),然后明确地给它聚焦(myElement.focus()
),屏幕 reader 应该从那里开始读取。
请注意,它也会继续从那里读取,因此请确保您的 HTML 流量适合它从该点继续读取。
你的问题标题的答案是使用 aria-live
区域(这就是你如何获得屏幕 reader 来阅读文本),但你的问题描述听起来像是一个不同的问题。
点击按钮得到绿色复选标记后,是否可以再次单击按钮,复选标记消失?如果是这样,那么它本质上是一个复选框。如果您不在后台使用本机复选框 (<input type="checkbox">
),那么您将需要 aria-checked
属性(和 role="checkbox"
)。只需在 true
和 false
之间切换 aria-checked
(来自 javascript),屏幕 reader 将负责宣布更改。您需要 role="checkbox"
以便屏幕 reader 也宣布您有一个复选框,以便用户知道如何与之交互。您不必强制阅读任何文本。
如果您的按钮更像是一个可以按下或弹出的切换按钮(例如格式栏上的 'bold' 或 'italics' 按钮),那么您会想要使用aria-pressed
(和 role="button"
)并在 true
和 false
之间切换其值。
请记住,如果您有自定义复选框或按钮,则需要允许 object 除了鼠标外还可以通过键盘进行选择。应该可以使用 Space 键选择一个复选框。按钮应允许 Space 或 Enter 键。分别参见 https://www.w3.org/TR/wai-aria-practices/#checkbox and https://www.w3.org/TR/wai-aria-practices/#button。
关于辅助功能的最后一点说明,如果您的绿色复选标记 (PNG) 仅用于传达按钮的状态,那么您就可以了。但是,如果绿色还代表附加信息,则您需要另一个指示器来显示该附加信息。例如,如果绿色勾号表示一件事而红色勾号表示另一件事,那么色盲用户将无法分辨两者之间的区别。您需要额外的图标或文本格式(粗体、斜体、下划线)或一些视觉提示来传达含义。