Skip to main content

Updated validation error messages for improved accessibility

What components does this change affect?

This change affects all implementations of the validation error messages component.

HTML structure changes:

  • Added role="alert" to container <div>

Before

<div class="validation-summary-valid" data-valmsg-summary="true">

After

<div class="validation-summary-valid" data-valmsg-summary="true" role="alert">

Why this change was made

This change improves the accessibility of the validation error messages component by ensuring validation summaries are announced to users of assistive technologies when they appear or are updated.

Benefits include:

  • Better accessibility – validation error messages are exposed as status messages for assistive technologies
  • Supports WCAG 2.2 guidance – improves communication of dynamically displayed error messages following accessibility best practice
  • Better user experience – helps users understand when validation errors have occurred and require attention

Recommended checks for consuming teams

After updating your Design System packages, we recommend reviewing validation error messages behaviour in your application.

Areas worth checking:

  • validation error messages continue to display correctly
  • validation error messages remain visible and readable
  • screen readers announce validation error messages when validation errors occur
  • existing form validation journeys behave as expected

Applications not using the NuGet package tag helpers should review any manually maintained validation error messages markup and align it with the updated structure shown above and on the validation error messages page in the form components section.

Data submission

No changes are expected to form submission, model binding, or data persistence as part of this update.

For peace of mind, you may wish to perform a quick check in consuming applications to confirm form values continue to submit and save as expected.

Summary

This change improves the accessibility of validation error messages by ensuring validation errors are announced to assistive technologies.

Internal reference

Design System internal reference: 97145

Was this page helpful?