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.