Notifying a screen reader when text changes?

We're creating some interactive animations which show some text; animate an illustration; show some more text; then when the user clicks a 'next' button, goes to a new scene which does something similar.

Is there a way to arrange things so that a screen reader would read out the first bit of text; then when the second bit of text appears, read that out; then after user clicks next, reads out the third bit of text; and so on?

When you say 'screen reader' I assume you're referring to an assistance device or software, not an audio version of your project. As far as I know, screen readers look for chunks of readable text, and you tab between the elements to read those elements aloud (or convert to braille, etc). This is a user-initiated action (tabbing from element 1 to element 2). You can't detect if a screen reader is being used or detect its progress through an element.

What you can detect is 'focus' so if you are trying to approximate the progress you could measure in seconds how long an element has been focused ( https://developer.mozilla.org/en-US/docs/Web/API/HTMLOrForeignElement/focus ) and then make an assumption about reading speed. But you wouldn't want to advance to the next element (focus) without the user permission so I don't think this helps and I wouldn't recommend it...

Hi Daniel. Thanks for the rapid response!

I was hoping for something that might work with this feature https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions, or something similar. Is there a straightforward way to achieve something like this?

If you set this in the identity inspector for an element whose text changes, you can tell a screen reader to notify when a change is made:

Normally, only aria-live="polite" is used. Any region which receives updates that are important for the user to receive, but not so rapid as to be annoying, should receive this attribute. The screen reader will speak changes whenever the user is idle.

In Hype, you would set it this way:

change-text.hype.zip (14.7 KB)

Is that what you had in mind? (There's a lot of additional aspects to screen readers I'm still learning here!)

1 Like

Thanks Daniel. That gives me a pointer. I'll see where we can go with it! (I'm also new to this, but have colleagues who know more.)