I recently created a small project where it would have a page containing text, an image and a button. When you click the button the content changes to different text, image and button. In reality, it was just hiding and showing different sections of the HTML. But the problem with it was that once you click the button the screen reader says nothing at all.
aria-live to the rescue!
I hadn't used aria-live, but I knew it was used to read out something on the page that had been added. Its default state is off, then there's polite and assertive. polite means it'll finish whatever it's reading, then read out the next section. assertive will stop whatever it's doing and read it straightaway.
In my project, once you click the button it takes some time to fade the current section out and fade in the new one in. And the button doesn't take that long to read out, so in this project, polite and assertive effectively do the same thing. Although I used polite since that makes the most sense.
And then I found the trouble. It read the text, skipped the image and read the text on the button. Not necessarily in that order, even though that's the order they are on the page.
The thing with aria-live is that this isn't usually used to read out the whole contents of a page. It read it out in the order it received it, which depends on the browser and the computer and what else you might be doing.
It also is a problem that it doesn't tell you a button is a button.
So it turned out that aria-live was not the solution I thought it was.
JS to the rescue
But what you can do is add focus to the new section. That's easy to do in JS with section.focus(). Then it just starts reading from where the focus is. You can put the focus on anything, it doesn't need to be something focusable with the keyboard.
The downside to this approach is if you've used the keyboard to click the button, the new section will have the browser's default outline. Since it's no use on this occasion, it's fine to just remove the outline from the section (but not from everything!).
Top comments (0)