WCAG. 4.1.3 and Problematic Error Messages on Blur

Explanation of the Dilemma

These examples show two different ways to make users aware of form value errors.

  1. The first method, using aria-live on blur, makes the error message available to sighted users and screen reader users at the same time. The problem, though, is that screen reader users hear the error message upon arriving on the next fousable element, so it sounds like the error message pertains to the newly focused element, even though the error really pertains to the previous element. Even though this method seems like a "correct" way to comply with WCAG 4.1.3, it is a BAD user experience.
  2. The second method involves associating the error(s) with the submit button AND with the field(s). The advantage of this method is screen reader users are not confused. Screen reader users still hear all the relevant error messages, but if they are just tabbing between fields, they will not hear the error messages until arriving at the submit button, so screen reader users don't hear the messages at the same exact moment that sighted users see them. Screen reader users are still made aware of the errors, though, and when they tab back up to the fields, they will hear the errors correctly associated with the appropriate fields. Overall this is a GOOD user experience.

The question is: can both of these methods pass WCAG 4.1.3? There is no explicit requirement in 4.1.3 that the status be made available at exactly the same moment to both sighted and non-sighted users, but someone could argue that it is implied that the status should be available to everyone at the same time. The problem is that if we do make the announcement available at the same time, it's actually WORSE for screen reader users, because they may think the error pertains to the wrong field.

Note: The only purpose of these forms is to demonstrate a message that appears on blur. Submitting the form will not do anything meaningful.

 

Method 1: aria-live on blur (status made available at the same time to sighted and blind users)

 

Method 2: Visual error messages on blur (not aria-live), plus error message added to submit button via aria-describedby AND added to form fields via aria-describedby

Note: The only purpose of this form is to demonstrate a message that appears on blur. You can't submit this form.