hand sketched logo of electrons orbiting a nucleus

TIL: aria-live

I learned about the aria-live attribute today. It's a way to make sure that screen readers announce changes to the content of a page. For example, if you have a chat application, you might want to make sure that new messages are announced to the user. You can use aria-live to do that.

<div aria-live="polite">New message from John: Hello, how are you?</div>

The aria-live attribute can have one of three values:

  • off: The default. The screen reader will not announce changes to the content.
  • polite: The screen reader will announce changes to the content when the user is idle. For example, if the user is typing in a chat application, the screen reader will wait until the user stops typing to announce the new message.
  • assertive: The screen reader will announce changes to the content immediately. For example, if the user receives a new message in a chat application, the screen reader will announce the new message right away.