Forms: Listing Input Validation Errors and Prepending Error Icon
- Aria-live=assertive on the list (UL tag) placed before the form with field-specific error messages
- Error icon with alt=error id# within the label of field that has failed validation
- Aria-describedby used to link form control with field specific error text
- Tabindex=-1 on the UL tag so it can receive keyboard focus when it is populated with error messages
About the error icon
- Screen reader users can use image navigation in order to quickly identify fields that have failed validation: this is the key function of the error icon for sighted users too.
- An error# is suffixed to the alt and the error icon is placed within the label tag .
- JAWS and NVDA read the alt for the error icon along with the label text. VoiceOver does likewise in iOS but not in OSX.
About the error messages
- The empty UL tag with aria-live=assertive which is present on the page at startup is dynamically populated with error messages detected upon form submission. These are read by all three: JAWS, NVDA and VoiceOver
- The field-specific error messages are read by JAWS and NVDA as one tabs to the fields. VoiceOver reads these automatically only in iOS ... the error message is announced after a slight pause after the label is read. In OSX on a MacBook Pro, the VO+Shift+h key combination causes the error text referenced by aria-describedby to be read by VoiceOver.
Created by Sailesh Panchang, Deque Systems | Nov 26, 2013