How to make flash messages accessible

The problem

Just like validation errors, flash messages need a bit more work to be accessible to assistive tech users. To expose dynamic updates to screen readers — including search results, alerts, or any notifications — you need to use aria-live or live region roles. If you're going with roles, make sure to read the documentation carefully and use them correctly.

ARIA live regions and flash messages

Say you want to display flash messages in your view. To make assistive tech announce them, you have to present the text in an HTML element with the attribute aria-live="polite" or role="status". For errors that are important and need urgent attention, use aria-live="assertive" or role="alert". If you want all the contents of the live region to be read out by screen readers, add aria-atomic="true" to your element.

Note: Live region announcements don't need to be displayed to sighted users if they're not relevant. You can use CSS to hide the live region element from sighted users, or the flash messages from screen reader users. If using Tailwind CSS apply the sr-only class, and for Bootstrap you can use visually-hidden to achieve the same thing. If you're writing your own styles, you can use this WebAim .sr-only CSS example. To hide content from screen readers and only display it to sighted users, apply aria-hidden="true".

Resources