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
http://webaim.org/techni
7.5 Associating Form Fields with Their Labels
Problem
You need to identify the text label associated with each form field.
Solution
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:
<form>
<fieldset>
<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>
</fieldset>
</form>
