HTML form controls that are not identified using
alt, or element content
This technique relates to:
- Success Criterion 1.1.1: Non-text Content (Sufficient)
- Success Criterion 1.3.1: Info and Relationships (Sufficient as a way to meet an unwritten technique)
- Success Criterion 4.1.2: Name, Role, Value (Sufficient as a way to meet G108: Using markup features to expose the name and role, allow user-settable properties to be directly set, and provide notification of changes)
The objective of this technique is to use the
title attribute to provide an accessible name for form controls when the visual design
does not include text on the screen that can be associated with the control as a label.
User agents, including assistive technology, can speak the
Example 2: Input fields for a phone number
A Web page contains controls for entering a phone number in the United States, with three fields for area code, exchange, and last four digits.
<fieldset><legend>Phone number</legend> <input id="areaCode" name="areaCode" title="Area Code" type="text" size="3" value="" > <input id="exchange" name="exchange" title="First three digits of phone number" type="text" size="3" value="" > <input id="lastDigits" name="lastDigits" title="Last four digits of phone number" type="text" size="4" value="" > </fieldset>
Example 3: A Search Function
A Web page contains a text field where the user can enter search terms and a button
labeled "Search" for performing the search. The
title attribute is used to identify the form control and the button is positioned right
after the text field so that it is clear to the user that the text field is where
the search term should be entered.
<input type="text" title="Type search term here"/> <input type="submit" value="Search"/>
Example 4: A data table of form controls
A data table of form controls needs to associate each control with the column and row headers for that cell. Without a title (or off-screen label) it is difficult for non-visual users to pause and interrogate for corresponding row or column header values using their assistive technology while tabbing through the form.
For example, a survey form has four column headers in first row: Question, Agree, Undecided, Disagree. Each following row contains a question and a radio button in each cell corresponding to answer choice in the three columns. The title attribute for every radio button contains the information necessary to identify the control.
Resources are for information purposes only, no endorsement implied.
For all form controls that are not associated with a
Check that the control has a
Check that the purpose of the form control is clear to users who can see the control.
- Check that the
titleattribute identifies the purpose of the control and that it matches the apparent visual purpose.
- Checks above are true.