1.3 Positive: Error messages announced effectively (Positive)

1.3.1 WCAG 3.3.1 (A), 4.1.3 (AA), 3.3.3 (AA) - Desktop, Mobile, iPad

Throughout the site, when a user attempts to proceed without filling the displayed fields correctly, the page dynamically changes to highlight the errors. An error summary container is displayed at the top of the page, with links to the corresponding error fields. Each field with an error is also highlighted, along with an informative inline error message.

This is useful in bringing users’ attention to the errors and provides guidance on resolving them. The page also makes use of ARIA live regions and tabindex to provide all users with a good experience: screen readers announce the errors as soon as they are displayed on the screen. Focus is also programmatically shifted to the error summary container, so that keyboard users do not have to tab back to the error fields—they can simply follow the links from within the summary container.

Error message highlighted on the Tell Us About Your Client's Dependants page

FIGURE 1.3: Error message highlighted on the Tell Us About Your Client’s Dependants page

Error message on Client Assets page

FIGURE 1.4: Error message on Client Assets page