OREGON STATE UNIVERSITY
Open search box
There are three items that can really affect the accessibility of forms: color, layout and form labels.
1.3.1 Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
2.4.6 Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
3.3.2 Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
To learn more about the proper use of color on forms, visit Web Accessibility Color.
The layout of a form plays a huge role in how accessible that form is. It is always best to use CSS techniques to layout a table, but in many cases tables are still used. One reason for this is because many of us work in Content Management Systems like Drupal and do not have the knowledge or access to code any other way. This is okay as long as you lay out your form using a table structure in a logical manner.
To conceptualize this, think of how a screen reader works, it linearizes the content of your page. Similarly, if the form is laid out in a way that makes sense from a linear standpoint, it will be easier for someone using a screen reader to understand.
This form example image looks fairly simple, it is, but it is also laid out using a table. A dotted box shows you where the table cells are located. How do you think this table would linearize?
Listen to this inaccessible form in JAWS or view the Transcript
In this example, the TAB key was being used to navigate the form fields, you can hear the screen reader say "TAB." Also, when the screen reader JAWS enters a form, you can hear a distinctive sound that gives the screen reader user a cue that they are in a form.
Screen readers also try to help make a page more accessible when possible, so even though the form isn't coded for accessibility, the screen reader still tries to associate a form field with a label, in this case it is done incorrectly, as the screen reader ends up associating the second label "star ID number" with the first form box meant for "Full Name."
This table shows the layout of the form with the form elements removed. When linearized, the table will read cell 1, followed by cell 2, and so on.
This makes things extremely difficult with the previous form as one would hear "Full Name" "*ID Number" "edit-text" "edit-text" and so on. This makes it very hard to know what text you should be entering in the field.
To overcome this difficulty, make sure your form layout makes sense from a linear standpoint. Make sure a form label like "Full Name" is followed by the text edit box for someone to enter that information, if you are using a table, don't put it below that label.
This table shows the layout of the form that has been created in a much more linear way. If you read this table from cell 1, cell 2, cell 3 and so on, it would make much more sense as items are in a much more natural order.
Another way that you could accomplish the same result would be to put both the label "Full Name" in the same table cell as the form element, as in the example below.
These same issues exist for all forms, not just those using table layouts, so you should always layout your forms to make sense from a linear standpoint.
One important topic that has not been addressed here is form elements other than text boxes; such as radio buttons, checkboxes, etc. While the techniques listed on this page will help for all form elements, to learn more about these other specific form elements visit the articles in the Resources & Tools section below.
Listen to this accessible form in JAWS or view the Transcript
In this example, the TAB key was being used to navigate the form fields, you can hear the screen reader say "TAB." Also, when the screen reader JAWS enters a form, you can hear a distinctive sound that gives the screen reader user a cue that they are in a form. Even for a sighted individual notice that this form is much easier to listen to and follow along with since the form labels are read when the text box is entered.
Something that you must do for all form elements is make sure they all have proper <label> elements. The <label> element attaches what you are using the form element for, such as "Full Name," with the text box. When you properly associate the two, then a screen reader user will not only announce that there is a text box, it will also announce what the text box is for.
So, instead of hearing a confusing "edit" that has no meaning by itself, a screen reader would announce something to the effect of "Full Name edit," a much more meaningful thing.
To learn how to use the label element, check out the example below.
With our form example using table layout in a proper linear way, the HTML would be similar to the following:
<fieldset>
<legend>Personal Info</legend>
<table>
<tr>
<td><label for="name">Full Name</label></td>
<td><input id="name" type="text" name="name"></td>
</tr>
<tr>
<td><label for="id">ID Number (required)</label></td>
<td><input id="id" type="text" name="id"></td>
</tr>
<tr>
<td><label for="email">Email (required)</label></td>
<td><input id="email" type="text" name="email"></td>
</tr>
<tr>
<td><label for="phone">Phone</label></td>
<td><input id="phone" type="text" name="phone"></td>
</tr>
<tr>
<td></td>
<td><label for="submit"><input id="submit" type="submit" name="submit" value="Submit"></label></td>
</tr>
</table>
</fieldset>
There are two elements needed to associate the two items together <label> and <id>. In the code example, the label element is given a name <label for="name"> and to connect the two items, the id within the input element is given the same name. When the two are associated like this, the screen reader will announce whatever text is within the label element. Note that the "Submit" button has been labeled, while this isn't necessary since screen readers announce button function located within "value," it might be easiest for you to remember to label all form elements.
Also notice the fieldset element, a <fieldset> contains everything within it, further connecting items into logical blocks. Fieldset can also be styled and gives you a place to put your form title using the <legend> element. All fieldset elements should always have legend elements.
Of course, if you use the highly preferred CSS technique for form layout, the code will look different. Here is the same form, using CSS instead of a table for layout:
div.form {
border: solid 1px #a7c4c9;
background: #EEECE8;
padding: 0.8em;
color: #615042;
margin-bottom: 0.8em;
width: 375px;
}
div.form fieldset {
border: 0.1em solid #c6c0b7;
padding: 1em;
margin-bottom: 0;
}
div.form legend {
border: 0.1em solid #c6c0b7;
font-weight: bold;
padding: 0.8em;
}
div.form p {
padding-bottom: 5px;
color: #615042;
font-weight: bold;
}
div.form label .input-text {
border: 1px solid #3b6e22;
color: #615042;
width: 180px;
}
div.form label .submit {
margin-left: 156px;
}
div.form label {
display: block;
margin-bottom: 10px;
color: #615042;
}
div.form label span {
display: block;
float: left;
padding-right: 6px;
width: 150px;
text-align: right;
}
<div class="form">
<fieldset>
<legend>Personal Info</legend>
<label><span>Full Name</span>
<input id="name" type="text" name="name" class="input-text">
</label>
<label><span>ID Number (required)</span>
<input id="id" type="text" name="id" class="input-text">
</label>
<label><span>Email (required)</span>
<input id="email" type="text" name="email" class="input-text">
</label>
<label><span>Phone</span>
<input id="phone" type="text" name="phone" class="input-text">
</label>
<label><input id="submit" type="submit" name="submit" value="Submit" class="submit" />
</label>
</fieldset>
</div>
You can create forms in Drupal using the module Webform. These forms have built in accessibility features. Learn more about creating Webforms.