Skip to content

Toast > Use role="status"

Problem

Toast is using role="alert" and aria-live="assertive". An alert interrupts a screen reader and can clear the voice cache, leaving a user confused and unsure where they are.

Solution

Only use role="status" which has an implicit value of aria-live="polite" so the toast content is announced after other content in the cue. Take a look at this example of a toast that uses the correct role.

Edited by Jeremy Elder