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

-----Original Message-----
From: <EMAIL REMOVED>
[mailto: <EMAIL REMOVED> ] On Behalf Of Christopher Nagle
Sent: Wednesday, September 17, 2008 8:10 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Alignment of Labels in forms

Hello,

Is it terms of accessibility and usability, is it better to align labels
close to the inputs they correspond to i.e. right aligned or is it better to
have them be lined up evenly against the side of the containing element i.e.
left aligned? I have been right aligning my labels so they are closer to
the input elements they correspond to so people who have problems with
spacial orientation or people who use screen magnifiers with a significant
amount of magnification can more easily see which labels go with which
fields. Though someone recently asked me to left align the labels in a
form. Here's an example of what I mean.

Left aligned:
Name: ______________
E-mail: ______________ Last year of Certification:
______

Right algined:
Name: _______________
E-mail: _______________
Last year of certification: _____

Or should I just exclude the last line when aligning the fields:
Name: ____________
E-mail: ____________
Las year of certification: _____

Thanks in advance!
Christopher Nagle

--
Christopher Nagle
Web Specialist
ICI / UMass, Boston
http://www.nercve.org/
http://www.communityinclusion.org/