HTML and CSS Reference
In-Depth Information
Avoid using display:none for hiding skip links as screen readers might
ignore the links altogether.
Instead of hiding the skip link, consider using CSS to stylize the link to match your
design. Or, better yet, have your skip link become visible with keyboard focus (see http:
// ) .
See Also
Recipe 7.3 , and the article on using “skip navigation” links at
ques/skipnav/ .
7.5 Associating Form Fields with Their Labels
You need to identify the text label associated with each form field.
Use the label element to programmatically associate text with its form field. The value
of the label's for attribute must match the value of the form field's id attribute. This
id value must be unique on each page:
<label for="fName"> First Name </label>
<input type="text" id="fname" >
Do not include label elements for form fields of the type hidden .
Multiple labels
Add the ARIA labeledby or describedby attributes if the form field needs multiple labels
or descriptions for it to make sense. Both of these attributes can accept references to
multiple values. Add a space between each value:
<legend>Account Logout</legend>
<span id="labelAutoLogout" >Automatically log out after</span>
<input id="autoLogout" type="text" value="30"
aria-labelledby="labelAutoLogout labelAutoLogoutTime"
aria-describedby="autoLogoutDesc" >
<span id="labelAutoLogoutTime" >minutes of inactivity</span>
<p id="autoLogoutDesc" >Allows you to customize the timeout period for
each of your accounts.</p>
Search WWH ::

Custom Search