Making forms accessible is a combination of making them navigable, and labelling them well, so that the current context is always clear.
Step 1: Adding a Label to Each Form Element
The first step towards more accessible forms is creating a descriptive label for each form element. Generally, this has been widely practiced using markup that visually associated a label with a form control, but often this has not been coded correctly to make non-visual user agents context-aware.
The solution is the label element, which uses the for attribute to reference the id attribute a form control.
The following displays how this works:
<label for="form_element_1">Label</label>
<input type="text" value="Text" id="form_element_1" name="form_element_1" />
The above code is rendered as follows in your browser (note that the above code has been enclosed in a p element in order to validate as XHTML):
There are several benefits to this method of associating a label with a form field.
- Non-visual user agents can read out the label when the form field is in focus, giving clues about the purpose of the form field.
- Most modern browsers render
label elements as clickable, so that if you click on the label the form field that it refers to gains focus. This can be a benefit for most users, but especially users with limited fine motor skills, as the clickable target area for smaller form controls such as radio buttons becomes larger. - Using a combination of CSS and DOM scripting, web developers are able to provide interactive visual clues to the user about the relationship between labels and form fields. For example, when the user hovers his/her mouse over the label element or tabs to the label element, the form element could change its border colour.
The following sections display how the label element is implemented for each of the form controls. First the form elements are rendered, and subsequently the code that was used to achieve this result is displayed.
Form input elements of the text type:
<p>
<label for="input2">Label for Text input 2</label>
<input type="text" value="" name="input2" id="input2" />
</p>
<p>
<label for="radio1">Label for Radio button 1</label>
<input type="radio" value="Yes" name="radio1" id="radio1" />
</p>
<p>
<label for="radio2">Label for Radio button 2</label>
<input type="radio" value="No" name="radio1" id="radio2" />
</p>
<p>
<label for="checkbox1">Label for Check box 1</label>
<input type="checkbox" value="Yes" name="checkbox1" id="checkbox1" />
</p>
<p>
<label for="checkbox2">Label for Check box 2</label>
<input type="checkbox" value="No" name="checkbox2" id="checkbox2" />
</p>
<p>
<label for="file1">Label for File upload element</label>
<input type="file" value="" name="file1" id="file1" />
</p>
<p>
<label for="select1">Label for Drop-down menu 1</label>
<select name="select1" id="select1">
<optgroup label="Option Group 1">
<option value="choice1">Option no. 1</option>
<option value="choice2">Option no. 2</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="choice3">Option no. 3</option>
<option value="choice4">Option no. 4</option>
</optgroup>
</select>
</p>
Form textarea elements:
<p>
<label for="textarea1">Label for Textarea 1</label>
<textarea name="textarea1" id="textarea1" rows="6" cols="50"></textarea>
</p>
Back to the top
Step 2: Grouping Related Form Elements
The fieldset and legend Elements
Forms typically relate to specific tasks, such as entering content, filling in a questionnaire or something else.
The relationship between related form elements can be structured using the fieldset element. These groups can be described using a legend that explains the purpose of the form elements that the fieldset contains.
A fieldset is typically rendered as a block box that encloses all the form elements and their labels. The legend element is typically rendered as a title that spans the top border of the fieldset.
A fieldset with a legend is coded as follows:
<fieldset>
<legend>Related Form Elements</legend>
<p>… Form Controls …</p>
</fieldset>
The above code is rendered as follows in this browser:
The optgroup Element
The select form control provides a special means of making long lists of choices easier to navigate and select from. The select element provides the user with a range of options to choose from, and is typically rendered as a pull-down menu, or, if the multiple attribute has been set, a box allowing you to select multiple items.
For select controls with many options, it is possible and recommended that the optgroup element is used to group related options.
Related options are nested within an opening and a closing optgroup tag, and the label attribute is used to give the option group a name.
As an example, the select form control from section above is reiterated. However, in this instance it is coded as a select control that allows the selection of multiple options.
<p>
<label for="select2">Label for Drop-down menu 1</label>
<select name="select2" id="select2" multiple="multiple">
<optgroup label="Option Group 1">
<option value="choice1">Option no. 1</option>
<option value="choice2">Option no. 2</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="choice3">Option no. 3</option>
<option value="choice4">Option no. 4</option>
</optgroup>
</select>
</p>
Note that different for and id attributes have been used, to explicitly associate this label with this select.
Back to the top
Step 3: Providing means to navigate to form controls
A strategy for making a page that contains form elements easy to navigate could be to use either the tabindex attribute, the accesskey attribute, or a combination of the two.
Both of these attributes can be applied to the following elements:
a area button input label legend textarea
Access Keys
There is some contention as to the usefulness of access keys in website navigation. Concerns revolve around these main issues:
- There is no standardised way of directing a user's attention to the fact that access keys exist for a page. There are means to work around this issue using a combination of scripting and CSS, but these will be inconsistently implemented on different websites. The end result is that there is no default behaviour for access keys in but few browsers.
- No agreed upon standard exists for which access key does what. This means that each website might have its own set of access keys, which means that the user has to relearn access key behaviour for each website he or she comes across.
- The manner in which access keys have been implemented in most browsers means that conflicts between access keys and reserved keyboard shortcuts are likely to occur. This problem is exacerbated for users of assistive technology because these often rely on keyboard entry for many of their functions.
Within certain sectors, there have been attempts to resolve the second issue, so all websites within that sector adhere to best practices, as advised by a central authority. One such example of a centralised recommendation is the UK Government Access Key Standard. However, this standard is not widely adapted or publicised, and not all of these access keys will apply to all sites.
Should you wish to implement access keys for your site, they can be coded as follows:
<p>
<label for="search_box" accesskey="4">Search</label>
<input type="text" value="Enter your search term here" id="search_box" name="q" />
<input type="submit" value="Search" />
</p>
… which is rendered as follows:
How are access keys invoked?
Access keys are invoked by pressing one or more modifier keys and the access key specified using the accesskey attribute. The modifier key and the outcome of invoking an access key varies from browser to browser.
The following test set was implemented and tested with browsers.
- Access key 1 on a link.
-
-
-
-
-
-
-
-
Access Keys for Browsers: Windows
|
| Outcome |
| Browser | Modifier Key(s) | 1: Links | 2: Form label for text | 3: Form input type="text" | 4: Form label for submit | 5: Form input type="submit" | 6: Form label for textarea | 7: Form textarea | 8: fieldset legend |
|---|
| Internet Explorer 7 |
Alt + the access key |
Link gains focus—Enter/Return follows link |
Related form input gains focus. Existing text is selected. |
Input gains focus. Existing text selected. |
Form is submitted. |
Form is submitted. |
Related text area gains focus. Caret after existing text. |
Related text area gains focus. Caret after existing text. |
First form element in fieldset gains focus. |
| Firefox 2.0.0.3 |
Alt + Shift + the access key |
Follows link |
Related form input gains focus. Caret after existing text. |
Input gains focus. Existing text selected. |
Form is submitted. |
Form is submitted. |
Related text area gains focus. Caret after existing text. |
Related text area gains focus. Caret after existing text. |
First form element in fieldset gains focus. |
| Opera 9.20 |
Shift, then Esc simultaneously, then the access key |
Follows link |
|
Input gains focus. Existing text selected. |
|
|
|
Related text area gains focus. Caret before existing text. |
|
Tab Index
A tab index determines the order in which the user reaches one of the legal elements if he/she uses the ↹ (Tab) key to navigate through the page.
In most browsers, if no tab index has been explicitly stated, pressing the ↹ (Tab) key cycles through links and form elements on the page in the order in which they appear in the source code.
The tabindex attribute overrides this default tabbing order by navigating to the item with the lowest tabindex value first, then higher values, and finally the source order for remaining links and form elements.
The tabindex attribute must have a positive numerical value of between 0 and 32.767. It is not required that tab index values are sequential; they can be 10, then 20, then 34; or 100, then 101, then 700.
A tab index sequence can be coded as follows:
<fieldset>
<legend>Search Our Site<legend>
<label for="search_box_2" accesskey="!">Search</label>
<input type="text" value="Enter your search term here" tabindex="100" id="search_box_2" name="q" />
<input type="submit" value="Search" tabindex="200" />
<p><a href="#top" tabindex="300">Back to the top</a></p>
</fieldset>
The sequence is rendered as a normal form and link. However, if you use the tab key on this page, you should reach the search input field, then the submit button, then the anchor, and finally the first link or form element in the source order at the top of this page.