# aria-live

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