Skip to content

All errors should have role="alert" for better accessibility #2519

@normanlolx

Description

@normanlolx

New feature motivation

The alert role is used to communicate an important and usually time-sensitive message to the user. When this role is added to an element, the browser will send out an accessible alert event to assistive technology products which can then notify the user.

Source: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/alert_role

This technique uses the ARIA role attribute with the value of “alert” in order to provide a suggestion to the user for correction on form input errors. Aria roles of "alert" have an implicit aria-live value of "assertive" which informs assistive technologies to monitor an applicable node and convey changes. The specific suggestion conveyed would be contained in the “content” of the associated alert.

NOTE: The ARIA describedby attribute may be provided as a helpful addition to provide a reference to the error if the user desires the error message to be conveyed again, but is not strictly necessary for successful application of this technique, and is incidental to the application of this technique.

Source: https://www.w3.org/WAI/GL/wiki/Using_ARIA_role_of_alert_for_Error_Feedback_in_Forms

New feature description

Everytime an error is put, the element should come with the role="alert" by default.

New feature implementation

Add role="alert" to the element that's been placed in the DOM for the error message.

The role does not need to get removed, if display: none; takes over on the error element once an error is resolved.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions