If web forms are not properly coded they may present barriers to screen reader users. Screen readers need to understand various form attributes, including:
- what the labels are for the different fields (and which labels go with which fields)
- which fields are required
- which fields are grouped together
- which fields have format or validation errors
Webmasters should follow best practices to ensure their forms are accessible. The following set of guidelines is a recommendation for the Michigan Tech community. However, regular form testing with screen reader technology is still encouraged and there is more than one valid technical implementation for creating accessible web forms.
If you are coding web forms or evaluating products that create forms for you, it is necessary and assumed that you have already completed a basic mastery of form elements.
Layout
It is improper to use data tables to control the visual layout of your web form. Improper use of table code creates barriers that may render your form unreadable. Instead of using table code, use a combination of HTML and CSS—typically by using <div>s for structure.
Labels and Groupings
An accessible form starts with properly using HTML markup. Each form input must have a label properly associated with it. Groups of inputs, such as a set of radio or checkboxes must be enclosed in a fieldset with a legend. Some common examples follow.
Input with Label Example
Associate a label with an input field through the for and id attributes. Each input should have one label associated with it. Screen readers use this label + input association to describe what fields are being presented to be filled out.
<form>
<div> // layout div
<label for="name">Name</label> // label associated with specific input field
<input id="name" type="text" />
</div>
<div>
<label for="email">Email</label>
<input id="email" type="email" />
</div>
</form>
Checkboxes within a Fieldset Example
Use a fieldset to group related elements together and provide a label for the group. A fieldset is commonly applied to sets of checkboxes and radio buttons, but can also be used to group any other sets of form fields.
<form>
<div> // layout div
<fieldset> // Fieldset wraps group
<legend>Colors</legend> // Legend provides a label for group
<label for="blue">Blue</label>
<input id="blue" type="checkbox" />
<label for="green">Green</label>
<input id="green" type="checkbox" />
<label for="purple">Purple</label>
<input id="purple" type="checkbox" />
</fieldset>
</div>
</form>
Communicating Form Characteristics
Additional markup is required to communicate form characteristics that are only visually distinguishable.
Required Fields
Let screen readers know which input fields are required by using the aria-required attribute. By default, aria-required attributes are assumed to be false. Set aria-required to true for any fields that are required. This can be done manually via your CMS or javascript.
aria-required Example
<form>
<p>* Required fields</p>
<div> // layout div
<label for="name">Name*</label>
<input id="name" type="text" aria-required="true" />
</div>
<div>
<label for="email">Email*</label>
<input id="email" type="email" aria-required="true" />
</div>
<div>
<label for="phone">Phone Number</label>
<input id="phone" type="text" />
</div>
</form>
If your form changes dynamically and some fields become required (or become no longer required), it is necessary to use javascript to update the aria-required attribute.
Form Validation
If your form uses validation (either on keyup or on submit) it is necessary to communicate your field validation states to the screen reader by using the aria-invalid attribute. By default, it is assumed that the aria-invalid attribute is false. Set aria-invalid to true for any fields that are currently invalid. This must be done via javascript.
If a field is marked invalid, but later becomes valid as the user inputs information,
the aria-invalid attribute must be reset to be false. This can also be on keyup or on submit.
aria-invalid Example
<form>
<p>* Required fields</p>
<div> // layout div
<label for="name">Name*</label>
<input id="name" type="text" aria-invalid="true" />
<p>This field is required</p>
</div>
<div>
<label for="email">Email*</label>
<input id="email" type="email" aria-invalid="true" />
<p>Please enter a valid email address</p>
</div>
<div>
<label for="phone">Phone Number</label>
<input id="phone" type="text" />
</div>
</form>