Alerts are dynamic content that is injected into the page when it changes and a person using a screenreader needs to know that some state of the application has changed.
- Use alerts sparingly.
- If an alert is present on page load, it won’t be read automatically
- If an element is present on page load, it is not technically an alert
- The alert will be read by the screen reader when it becomes visible / appears in the DOM
Error alert from an input field
Browser + screenreader quirks
- Screenreaders do not implement alerts uniformly and must be tested
- Just because an alert pattern works in one screenreader doesn’t mean it will work in all three
- The element referenced by the
aria-describedbyattribute cannot use the
role="alert"attribute (see example above for workaround).
- NVDA will read the alert twice if it appears while the input is in focus: once from the
role="alert"being injected and from the
- NVDA needs a fraction of a second to catch up with changes in the DOM, use a
setTimeoutto delay displaying the alert
- Inner text describes alert when it appears on screen
role="alert"for elements injected into the page
- Focus does not move to the element when the alert appears