Components
ErrorSummary
ErrorSummary is a summary of errors. It provides the user with an overview of errors or issues that need to be addressed on a page or step in order to proceed.
We are working to improve the accessibility documentation for this component. If you have questions or see something that should be prioritised, please contact us on Github or Slack.
When the ErrorSummary becomes visible, this must be communicated to screen reader users.
Move focus
We recommend moving focus to the ErrorSummary when the component becomes visible. Screen readers will then read out the heading, and users can choose to move focus to each individual error message in the list. From there, users can easily navigate to the field containing the error.
By moving focus, we communicate the change on the page through a context change. This means that requirement 4.1.3 Status Messages does not apply (uutilsynet.no). This is explained in more detail in English in the section about the purpose of success criterion 4.1.3 at W3C WAI (w3.org).
Do not use a live region for ErrorSummary
An alternative solution is not to move focus, but instead define a live region (for example using aria-role="alert") where the ErrorSummary can appear. We recommend not doing this because:
- The entire
ErrorSummary, including all error messages, will be read aloud. This can quickly become overwhelming. - Even though the error messages are read aloud, the user cannot easily interact with them. This also means there is no simple way to jump to the field containing the error.