WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Alignment of Labels in forms

for

From: Eric Eklund
Date: Sep 17, 2008 7:50AM

In my opinion, the best alignment would be dependent on the amount of
whitespace between the labels and their respective input fields. No matter
which option you choose, I would include the use of label elements to ensure
that the label text is tied to the correct form element. Here is some
over-simplified code that matches your example:

<label for="name">Name:</label><input type="text" id="name" name="name">
<label for="email">E-mail:</label><input type="text" id="email"
name="email">
<label for="lastyrcert">Last year of Certification:</label><input
type="text" id="lastyrcert" name="lastyrcert">

If you have multiple fields that resemble one another (i.e. shipping and
billing information that contains more than one address), it is good to
surround the groups in a fieldset tag and include a legend. This will aid
the users that utilize a screen reader in accessing your form. For more
information on what the W3C recommends, please visit
http://www.w3.org/TR/html401/interact/forms.html.

Eric Eklund
Adaptive Technology Associate
Computer Accommodations Program
University of Minnesota
McNamara Alumni Center
200 Oak St. SE Suite 180
Minneapolis MN 55455-2002
P: (612) 624-3303
F: (612) 626-9654
http://cap.umn.edu