E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 4 (In chronological order)

From: Christopher Nagle
Date: Wed, Sep 17 2008 7:20AM
Subject: Alignment of Labels in forms
No previous message | Next message →

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/

From: Eric Eklund
Date: Wed, Sep 17 2008 7:50AM
Subject: Re: Alignment of Labels in forms
← Previous message | Next message →

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

From: Tim Beadle
Date: Wed, Sep 17 2008 8:00AM
Subject: Re: Alignment of Labels in forms
← Previous message | Next message →

On Wed, Sep 17, 2008 at 2:09 PM, Christopher Nagle
< = EMAIL ADDRESS REMOVED = > wrote:
> 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.

Luke Wroblewski of Yahoo did has written a lot on this subject. He
references some eye-tracking research into form field alignments and
time-to-completion of the form in this blog entry:
http://www.lukew.com/ff/entry.asp?504

In short: top aligned (i.e. label and field on separate lines)
performs best, right-aligned performs next best (but uses space more
effectively) and left-aligned performs the worst.

Regards,

Tim

From: Jared Smith
Date: Wed, Sep 17 2008 8:30AM
Subject: Re: Alignment of Labels in forms
← Previous message | No next message

On Wed, Sep 17, 2008 at 7:55 AM, Tim Beadle < = EMAIL ADDRESS REMOVED = > wrote:
>
> In short: top aligned (i.e. label and field on separate lines)
> performs best, right-aligned performs next best (but uses space more
> effectively) and left-aligned performs the worst.

Very interesting. Top aligning is also the easiest approach by far. I
always top align and add a small left margin to the form elements to
slightly indent and offset them from the label
(http://webaim.org/contact/). It seems to work very well.

Jared Smith
WebAIM