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 can add an aria-live="polite" attribute to the wrapping element.

Resources