javascript - How to announce new content after 'Show more' button is clicked? - Stack Overflow

admin管理员组

文章数量:1022727

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

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

• javascript
• html
• accessibility
• wai-aria
• web-frontend

Share Improve this question Follow edited Mar 25, 2022 at 6:12 Prakhar asked Oct 27, 2021 at 10:53 PrakharPrakhar 6311 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 remend 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 mon 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 pletely. 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.

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

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

• javascript
• html
• accessibility
• wai-aria
• web-frontend

Share Improve this question Follow edited Mar 25, 2022 at 6:12 Prakhar asked Oct 27, 2021 at 10:53 PrakharPrakhar 6311 silver badge88 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

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 remend 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 mon 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 pletely. 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.

本文标签： javascriptHow to announce new content after 39Show more39 button is clickedStack Overflow