[英]How can we enforce the screen reader to read some text when an event occurs?
This text is not visible and will be used only for the screen reader. 该文本不可见,仅用于屏幕阅读器。 Example: On click of a button, I show a green checkmark png. 示例:单击按钮时,我将显示一个绿色的选中标记png。 How can I enforce reader to say something like "Button Clicked". 如何强制读者说“单击按钮”之类的内容。
The answer for your question title is using an aria-live
region (that's how you get a screen reader to read text), but the description of your problem sounds like a different question. 您的问题标题的答案是使用aria-live
区域( aria-live
屏幕阅读器读取文本的方式),但是对问题的描述听起来像是另一个问题。
After you click on the button and get the green checkmark, can you click the button again and the checkmark goes away? 单击按钮并获得绿色的选中标记后,是否可以再次单击该按钮而选中标记消失? If so, then it's essentially a checkbox. 如果是这样,那么它实际上是一个复选框。 If you're not using a native checkbox behind the scenes ( <input type="checkbox">
), then you'll need the aria-checked
attribute (and role="checkbox"
). 如果您没有在幕后使用本机复选框( <input type="checkbox">
),则需要使用aria-checked
属性(和role="checkbox"
)。 Just toggle aria-checked
between true
and false
(from javascript) and the screen reader will take care of announcing the change. 只需将aria-checked
(在javascript中)在true
和false
之间切换,屏幕阅读器就会负责宣布更改。 You need the role="checkbox"
so that the screen reader also announces that you have a checkbox so the user knows how to interact with it. 您需要role="checkbox"
以便屏幕阅读器还宣布您有一个复选框,以便用户知道如何与之交互。 You don't have to force any text to be read. 您不必强制阅读任何文本。
If your button is more like a toggle button that can be pressed in or popped out (like a 'bold' or 'italics' button on a formatting bar), then you'd want to use aria-pressed
(and role="button"
) and toggle its value between true
and false
. 如果您的按钮更像是可以按下或弹出的切换按钮(例如格式栏上的“粗体”或“斜体”按钮),则您需要使用aria-pressed
role="button"
(和role="button"
),并触发其价值之间的true
和false
。
Keep in mind that if you have a custom checkbox or button, you need to allow the object to be selected with a keyboard in addition to a mouse. 请记住,如果您有一个自定义复选框或按钮,则需要允许使用除鼠标之外的键盘来选择对象。 A checkbox should be selectable with the Space key. 可以使用空格键选择一个复选框。 A button should allow the Space or Enter key. 按钮应允许使用空格键或Enter键。 See https://www.w3.org/TR/wai-aria-practices/#checkbox and https://www.w3.org/TR/wai-aria-practices/#button , respectively. 分别参见https://www.w3.org/TR/wai-aria-practices/#checkbox和https://www.w3.org/TR/wai-aria-practices/#button 。
And one final note regarding accessibility, if your green checkmark (PNG) is only used to convey the state of the button, then you're ok. 关于可访问性的最后一点说明是,如果您的绿色对勾(PNG)仅用于传达按钮的状态,那么您就可以了。 But if the green color also represents additional information, you'd need another indicator for that additional information. 但是,如果绿色也代表其他信息,则您需要另一个指示器来获取其他信息。 For example, if a green check meant one thing and a red check meant something else, then color deficient users would not be able to tell the difference between the two. 例如,如果绿色对勾表示一件事,红色对勾表示另一件事,那么色彩不足的用户将无法分辨两者之间的区别。 You'd need an additional icon or text formatting (bold, italics, underline) or some visual cue to convey the meaning. 您需要附加的图标或文本格式(粗体,斜体,下划线)或某种视觉提示来传达含义。
An easy way to force most screen readers to start reading from a point is to give it focus. 强制大多数屏幕阅读器从某个角度开始阅读的一种简单方法是使其聚焦。 If you make the element focus-able (by giving it a tabindex
), then explicitly give it focus ( myElement.focus()
), the screen reader should start reading from there. 如果使元素可聚焦(通过给它一个tabindex
),然后显式赋予它焦点( myElement.focus()
),则屏幕阅读器应该从那里开始阅读。
Note that it will keep reading from there as well, so make sure the flow of your HTML is appropriate for it to continue to read from that point. 请注意,它也将继续从此处读取,因此请确保HTML的流程适合从该位置继续读取。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.