Use markup to associate all form controls with their labels.
For elements such as text fields, select menus, checkboxes and radio buttons require an explicit label so that assistive technologies can communicate the purpose of the form element to the user. If the visual label has not been explicitly associated using the element, a screen reader user may only hear "edit" for a text field instead of "First Name edit".
<form action="mailto:somebody@ibm.com"> <label for="name1">Name</label> <input name="name" id="name1" size="30" /> <label for="address">Address</label> <input name="address" id="address" size="45" /> <input type="submit" value="Submit" /> </form>
<form> <label for="shiptype">Select your shipping method</label> <select id="shiptype" name="ship_method" size="1"> <option selected value="">Ground - 7 business days</option> <option value="air">Air - 3 business days</option> <option value="nextday">Next day air - 1 business day</option> </select> </form>
<label for="usercomments">User comments:</label>
<textarea id="usercomments" name="textfield2" rows=3 cols=40></textarea>
A subset of the code for the example is listed below. It shows how invisible images with appropriate alternative text were used to label the radio buttons with no visible labels.
<form action="" method="get"> <input id="ach" type="checkbox" name="daname" value="Ach Payment" /> <label for="ach"><abbr title="Automatic Clearinghouse">ACH</abbr> Payment</label> <input id="cc" type="checkbox" name="daname" value="Credit Card" /> <label for="cc">Credit Card</label> <input id="pp" type="checkbox" name="daname" value="PayPal" /> <label for="pp">PayPal</label> <input id="other" type="checkbox" name="daname" value="Other" /> <label for="other">Other</label> </form>
Testing forms for accessibility - IBM Accessibility Center.
Explicitly defining relationships between controls and labels - WAI recommended technique.
Go to the WAVE home page - The WAVE is an automated tester which reads the underlying HTML of a web page and returns a report that shows the reading order.
View WAI checkpoint 12.4 - Associate labels explicitly with their controls.
View WAI checkpoint 10.2 - Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.