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. How can I enforce reader to say something like "Button Clicked".
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. How can I enforce reader to say something like "Button Clicked".
Share Improve this question asked Apr 17, 2018 at 15:23 Ali ZaheerAli Zaheer 1951 gold badge3 silver badges7 bronze badges2 Answers
Reset to default 4The 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.
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"). Just toggle aria-checked between true and false (from javascript) and the screen reader will take care of announcing the change. 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. 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.
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. See https://www.w3/TR/wai-aria-practices/#checkbox and https://www.w3/TR/wai-aria-practices/#button, respectively.
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. 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.
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.