HTML and CSS Reference
In-Depth Information
Add Labels to Form Input
Make sure each nonhidden
input
,
textarea
,
select
, or other form element has an associated label.
Red-necked Grebe
<input name="rng" type="checkbox"/>
<label>Red-necked Grebe
<input name="rng" type="checkbox"/>
</label>
Motivation
Visually impaired users with screen readers cannot always use the two-dimensional layout of a page to
determine which labels go with which fields. It is important to explicitly tag each nonhidden field with a label so
that it is properly identified by screen readers.
There are more visually impaired users than you might think. This includes not only physically blind users, but
also people using cell phone browsers while driving, and others who may not be able to immediately look at the
screen but can listen to it. This class of user is set to grow significantly over the next few years.
Adding explicit
label
elements, possibly with
id
and
class
attributes, will also make it easier to style the labels
with CSS or provide additional hints with JavaScript or smarter browsers. For example, a browser might
highlight the associated label when the user tabs or clicks into an input field.
Potential Trade-offs
None. This should not affect your existing layout for most users and will improve it for some.
Because you're introducing new elements and changing the parents of some elements, a few programs that
access the DOM or use XPath may need to be updated. However, such programs are uncommon.
Mechanics
For every form
input
,
select
, or
textarea
element, there must be at least one
label
element. (I tend to think
there should be exactly one, but multiple labels are allowed.) The
label
element can either enclose the input
element or have a
for
attribute that contains the ID of the element it refers to.
Consider a typical login form:
<form action="login.php" method="post">
<p>Username:
<input type="text" name="log" id="log" size="18" />
</p>
<p>Password:
<input type="password" name="pwd" id="pwd" size="18" />
</p>
<p>
Search WWH ::
Custom Search