Skip to content

Improve toast accessibility #1629

@skjnldsv

Description

@skjnldsv

Some suggestions:

1. State the type of message

Announcing the type first (like "Error: [message]"), this is generally a good practice:

  • It immediately communicates the severity to screen reader users
  • It helps users mentally prepare for the information
  • It provides context similar to how visual users get from the colors/icons
<div aria-live="assertive" aria-atomic="true">
  <span class="visually-hidden">Error:</span>
  <p>Your form submission failed. Please try again.</p>
</div>

2. Use role="alert"

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role
For stronger levels like error or warning, I think this fits the use case

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    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