Skip to content

Toast Messages Should Be Read by the Screen Reader on Display #715

@aphelionz

Description

@aphelionz

Steps to reproduce (assumes ChromeVox or similar)

  1. Open https://elastic.github.io/eui/#/guidelines/toasts in a new tab.
  2. Tab through the navigation to the main content pane.
  3. Tab to the "Show Component Code" button and press enter
  4. Tab to the first "Add toast to global toast list" button
  5. 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

Metadata

Metadata

Assignees

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions