2

I'm developing a page that is structured in this way:

On the bottom I have three buttons. When I click a button, I show an image on the left and a short description on the right.

Now, I need the voice synthesis (like NVDA and JAWS) to note the appearance of the text.

Is there a standard for this behavior?

unor
  • 92,415
  • 26
  • 211
  • 360
Alfonso Piscitelli
  • 61
  • 5

2 Answers2

3

Yes, you can use WAI-ARIA for this, there is an attribute called aria-live that you would put on the container that the text appears within, with a value of "polite" to indicate that the screen reader user should be informed, but it shouldn't interrupt mid-sentence.

For example:

<div aria-live="polite">Text appears here</div>

You shouldn't need to do anything else but update the text for it to be announced by the screen reader, you don't need to change the attribute with JavaScript or anything like that. The attribute tells the screen reader that it should announce whenever a change is detected.

If you find that it's announcing more than you want, or not enough, you have a little but more granular control with the aria-relevant attribute, which can contain a space-delimited list of one or more of the following values:

  • "additions" Insertion of nodes into the live region should be considered relevant.
  • "removals" Deletion of nodes should be considered relevant.
  • "text" Changes to the textual content of existing nodes should be considered relevant.
  • "all" Equivalent to additions removals text.

aria-relevant="additions text" is the default value on a live region.

Above quoted info taken from https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-relevant_attribute

Fiona - myaccessible.website
  • 14,481
  • 16
  • 82
  • 117
0

The aria-live attribute seems to be a good option.

Possible duplicate of question answered here:

Getting screen reader to read new content added with JavaScript

Josh
  • 3,872
  • 1
  • 12
  • 13