I have been trying to add VO support in an area that loads some additional content after user clicks Show more button (refer the screenshots attached).
Required behavior:
I need the VO to announce the info about additionally loaded elements, something like “What is a cookie? and 11 more items”.
Tried:
Method-1: used aria-live=”polite” aria-relevant=”additions”
- behavior: announces “What is a cookie?, Browse IT, button. “
Method-2: used role=”alert”
- behavior: announces “What is a cookie?, Browse IT & 23 more items, alert, What is a cookie?, Browse IT, button.”
How can I get it to announce the info about additionally added items?
Before Show-more clicked
After Show-more is clicked
Advertisement
Answer
Sounds like it’s mostly working. The key is using aria-live. Note that when you use role="alert", you get an implicit aria-live="assertive". I rarely use “assertive” or “alert” because that can cause other messages to be cleared. Stick with “polite”.
You didn’t say what you didn’t like about method 1 or method 2. They’re both announcing things. Do you want every tile that’s added to be announced? I hope not. That’s way too much information for the screen reader.
Originally you are showing 12 tiles. When you click “show more”, another 12 tiles are added. What exactly do you want announced? As mentioned, you don’t want the title of every tile announced. There’s no need for that. I’d recommend just a simple “12 additional tiles added” or something like that.
If you have a blank aria-live container, you can put any text in there you want and that’s exactly what will be announced.
Before “show more” is clicked on:
<div aria-live="polite" aria-atomic="true" class="sr-only"> <!-- initially blank --> </div>
After “show more” is clicked on:
<div aria-live="polite" aria-atomic="true" class="sr-only"> 12 additional tiles added </div>
Note that I’m using a class on the container called “sr-only“. That’s just a common name to call a CSS rule for visually hiding text that is still available for the screen reader to announce. There’s nothing special about the name and that class isn’t automatically created for you. You can see an example of “sr-only” at What is sr-only in Bootstrap 3?. You don’t need Bootstrap either. Just create your own CSS class with the values from that StackOverflow article.
The second thing to note is that the container is using aria-atomic. That causes whatever text you inject into the container to be read completely. Without aria-atomic, only the text that changed would be read. For example, if you had just announced “12 additional tiles added” and the user clicks on “show more” again but now only 6 tiles were added, your message container would have “6 additional tiles added”.
After “show more” is clicked on again:
<div aria-live="polite" aria-atomic="true" class="sr-only"> 6 additional tiles added </div>
However, only the number “6” would be announced because the difference between “12 additional tiles added” and “6 additional tiles added” is just the “6”. With aria-atomice="true", the full text, “6 additional tiles added”, would be announced.