ARIA Form Example

 

Notes: This form is a test for ARIA properties. We want the error text to be read as soon as the form is submitted with empty text and we want the instructions bellow to be read with the label of the search form. The form itself does nothing.

This search is for the mysite.com (not the web)

Notes:

Although the code is short and simple, it is fully accessible. This example uses:
  1. aria-describedby to make all instructions and relevant information read with the form field.
  2. aria-required is also used on the form field
  3. The error message uses the alert role that makes sure the focus is properly managed
  4. When an error is found the following states are toggled: aria-invalid in the form element and aria-hidden on the error message.
  5. CSS selectors are used to bind aria-hidden and CSS display:none.

Author: Lisa Seeman