Forms: Listing Input Validation Errors and Prepending Error Icon

Features:

• 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

Notes:

• 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.