Forms must be carefully constructed to ensure accessibility.
- The form element must include an aria-label describing the purpose of the form.
- In the event of error or during a multiple step entry process, information previously entered must be auto populated or available for the user to select.
- Each form field must be labeled using the label tag <label> or by using an aria-label attribute.
- Required fields should be annotated within the field label. This may be done using an asterisk for sited users but the word “required” should be used for screen reader users. Screen reader text may be hidden off screen using CSS. WordPress has a built in class for this purpose: (<span class=”screen-reader-text”>required</span>).
- An error notice should be displayed next to fields with invalid entries when the user navigates away from the field.
- If the form submission results in an error the values previously entered must be repopulated, an error displayed to clearly identify the issue and focus should be taken to the first field resulting in error.
As you can see, creating a fully accessible form can be difficult and time consuming. Which is why we have built the Accessible JQuery Form Validation and Simple Accessible Form plugins. Both of these plugins will add the necessary features to make your forms accessible. They will add form field labels, required field markings, add form field validation and display screen reader friendly error message when a user navigates away from a field, moves focus to the first field in error in the event of a form submission failure.