Make sure that the information presented in an alert is important enough to justify taking away the user’s attention from what they are doing (ie. errors, warnings, validations, etc.).
- Use the
role='alert'attribute when defining the alert. It should only be used when the user needs immediate attention due to its intrusive nature.
- The WAI-ARIA
role='alert'is equivalent to
aria-live='assertive'. Screen readers are notified immediately of the error so the user can take action to address the issue.
- When an alert is present in the screen on load time (i.e. the alert isn't a response to a user's action),
it should use the
aria-live='polite'attribute to avoid disrupting the order in which the elements are presented on the screen. This does not apply to danger alerts though, since critical alerts should always come first.
- The close button contains the
aria-label='close'attibute and the icon uses
aria-hidden='true'so it is ignored by assistive technologies. The danger alert does not include a button since it's not dismissable.
- Ensure that the close button is included in the tabbing order and the alert can be navigated to and dismissed with the keyboard. The
- Make sure colour and icons aren't the only way information is conveyed.
EOS Accessibility checklist
We have developed an extensive checklist based on the Web Content Accessibility Guidelines (WCAG). Please have a look at the EOS Accessibility checklist.