Steps to reproduce (assumes ChromeVox or similar)
- Open https://elastic.github.io/eui/#/guidelines/toasts in a new tab.
- Tab through the navigation to the main content pane.
- Tab to the "Show Component Code" button and press
enter
- Tab to the first "Add toast to global toast list" button
- Press
enter
Actual Result
The toast is displayed visibly to the user, but not read by the screen reader
Expected Result
The toast content is read by the screen reader on display
Suggested Fixes
You can use a combination of role="alert" and aria-live to read the toast messages as soon as they are displayed.
Category: #714: Elastic UI Toasts Accessibility
Relevant WCAG Criteria: 3.3.2 Input Assistance: Labels and Instructions
Steps to reproduce (assumes ChromeVox or similar)
enterenterActual Result
Expected Result
Suggested Fixes
You can use a combination of
role="alert"andaria-liveto read the toast messages as soon as they are displayed.Category: #714: Elastic UI Toasts Accessibility
Relevant WCAG Criteria: 3.3.2 Input Assistance: Labels and Instructions