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...
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.