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?

score 4 · Accepted Answer · answered Jan 17 '18 at 16:02

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>

Thank you Adam. I wished there was a good resource that showed browser support of aria tags similar to W3CSchool does for js and css support. — jeff werner, Jan 17 '18 at 20:33

score 1 · Answer 2 · answered Jan 17 '18 at 20:31

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

How to do accessible inline errors for form selects?

2 Answers2