Accessibility best practices


Table of content

Project management

  • In each project, there should be an accessibility manager, i.e. a person who is responsible for checking the accessibility level of the project
  • Regular accessibility audits have to be conducted
  • The project is supposed to comply with accessibility standards and to give details on the name and version of the corresponding standards
  • Accessibility tests have to be integrated in the continuous integration process

Forms

For a form to be accessible, the following is required:

Label alignment

Align the field labels so that they are as close as possible to their related fields (i.e. right-align the labels when they are at the left of the field):

label-alignment.png

Label / element association

For a label to be associated with a form element, the attribute "for" must be equal to the "id" attribute of the element. 

Example: <label for="OSAi.Participants_Form_0_first_name">First Name</label> must link to <input id="OSAi.Participants_Form_0_first_name […]>

Error display

Error elements have to be listed above the form element, as illustrated below, and the errors must be associated with each field specifically:

error-in-fields.png

Listing all errors

A text area is needed to list all the items to be corrected, and give it a role to tell the user ('role=alert') and use the attribute 'aria-describedby' to associate each field to the corresponding error text. Example: if the field "First Name" has an error, it must be described by an attribute 'aria-describedby="parsely-id-5"