How to do accessible inline errors for form selects?

Question

We need to update our forms to be accessibility compliant. I am looking for information on how to write an inline error for a form select. I have the form field labeled and have an inline error, but the readers do not announce the error.

Here is what we are using

<div class="select-wrapper">
   <label for="securityQuestion" class="control-label bolded">Security Question</label>
   <select id="securityQuestion" name="securityQuestion" class="form-control" aria-describedby="securityQuestion_error">
     <option value="0">Select a Question</option>
     <option value="10">What is your mother's maiden name?</option>
     <option value="9">What's your town of birth?</option>
     <option value="11">What is your father's middle name?</option>
     <option value="12">What street did you live on when you were 10 years old?</option>
   </select>
   <div class="clear form-error-msg" id="securityQuestion_error"><span class="shop-icon icon" aria-label="Attention">r</span><span id="error-msg-text">Please select a security hint question.</span></div>
 </div>

So if the user doesn't select an option and submits we dynamically inject an error just after the form field as shown above. This works fine for inputs and text boxes, but for the select, the reader skips it.

I been reading different blogs and specs and have read many times, don't use selects, but use radios or text boxes instead.

So any ideas?

Answer 1

Your issue might be linked to the following bug: JAWS does not announce aria-describedby on select box in IE

This is also described on WebAim mailing list.

This is a bug, you have multiple alternatives to avoid this bug :

• including the error text in the label
• ARIA21: Using Aria-Invalid to Indicate An Error Field
• SCR18: Providing client-side validation and alert
• Re-displaying a form with a summary of errors
• Providing error notification as the user enters information
• Including error notification information in the page title

For instance, you can use aria-labelledby to target both the label and the error text.

<div class="select-wrapper">
   <div id="securityQuestion_label">Security Question</div>
   <select id="securityQuestion" name="securityQuestion"
       aria-labelledby="securityQuestion_label securityQuestion_error">
     <option value="0">Select a Question</option>
     <option value="10">What is your mother's maiden name?</option>
     <option value="9">What's your town of birth?</option>
     <option value="11">What is your father's middle name?</option>
     <option value="12">What street did you live on when you were 10 years old?</option>
   </select>
   <div class="clear form-error-msg" id="securityQuestion_error">Error message</span></div>
 </div>

Answer 2

Well, get got our answer. Selects are not consistently supported across screen readers/os/browser combinations. The code works correctly with Safari and voiceover. However, chrome and voice-over do not play nice 100%. Further testing, sadly using chrome vox with chrome doesn't even read text input inline errors.

After some research, we found this from WebAim :

• Firefox works best with NVDA
• Chrome & Internet Explorer with JAWS on Windows
• Safari with VoiceOver
• Edge with Narrator