Forms

Estimated reading time: ( words)

Summary: Adaptive technologies help the user move through forms element by element. You should include a programmatically connected label for every form element so that the adaptive technology user can tell what label goes with what element.

Label tag

In most cases, a text label is wrapped in a label tag. There are two ways to associate the label tag with the form element. Either method can be used, but the second method is more verbose and also more clear.

The first method is to wrap the label tag around both the text label and the form element.

<label>My Input Label <input type=”text” /> </label>

The second method is to associate the label tag and the input field by using the same value in the “for” attribute in the label and the “id” attribute on the field element.

<label for=”my_input”>My Input Label</label>
<input id=”my_input” type=”text” />

Use fieldset and legend tags for radio button and checkbox groups

Coding radio buttons or checkboxes for accessibility can be a challenge. When assistive technology users browse through a form, they move from form element to form element, skipping any text that isn’t an associated label. 

For example, the following:

<div>Do you like the color green?</div>
<label> <input type=”radio” name=”green” value=”yes”> Yes</label>
<label> <input type=”radio” name=”green” value=”no”> No</label>
<div>Do you like the color red?</div>
<label> <input type=”radio” name=”red” value=”yes”> Yes</label>
<label> <input type=”radio” name=”red” value=”no”> No</label>

would be read by a screen reader something like this:


Input Yes
Input No
Input Yes
Input No

A screen reader user would have no idea what selecting “Yes” or “No” meant. Therefore, you need to associate the heading that describes the radio or checkbox group with the form elements. The most effective way to do this is to use fieldset and legend tags. 

For example, the following: 

<fieldset>
<legend>Do you like the color green?</legend>
<label> <input type=”radio” name=”green” value=”yes”> Yes</label>
<label> <input type=”radio” name=”green” value=”no”> No</label>
</fieldset>
<fieldset>
<legend>Do you like the color red?</legend>
<label> <input type=”radio” name=”red” value=”yes”> Yes</label>
<label> <input type=”radio” name=”red” value=”no”> No</label>
</fieldset>

would be read by a screen reader something like this:

Input Do you like the color green? Yes
Input Do you like the color green? No
Input Do you like the color red? Yes
Input Do you like the color red? No

The appearance of fieldsets and legends can vary from browser to browser and may not match the styling of the rest of the form, but you can modifyt the appearance of both the fieldsets and legends using CSS.

No visible label

In many designs there isn’t a visible label. Placeholder text may be displayed in a search field, as in this example from the MyU interface:

Having just visual placeholder text is not a enough; you also must designate a label that can be read by adaptive technologies. There are two options to accomplish this.

The first is to have a label on the page, but make it only available to screen readers via CSS, like this:

<label for=”search” class=”sr-only”>Search MyU</label>
<input type="text" name="search" id=”search” placeholder="Search MyU">

The second option is to use the aria-label attribute:

<input type="text" name="search" id=”search” placeholder="Search MyU" aria-label=”Search”>

It is up to you the developer what your preference is, unless you are otherwise constrained by the technology or library you’re using to construct your project.

Did you find what you were looking for?

Get help

Submit your accessibility question for a personal response, and we'll use your question to improve the content of this website.