WebAIM - Web Accessibility In Mind

E-mail List Archives

Thread: Checkbox and radio button labels

for

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

From: Rick Hill
Date: Thu, Aug 09 2012 10:21AM
Subject: Checkbox and radio button labels
No previous message | Next message →

I have always placed the text labels for radio buttons and checkboxes to the right of the input. The WebAIm article on forms uses this layout as well. However, I need to ask, is there an accessibilty reason for doing this? IS there a Web standard for doing this/ Or is this just a convention. I have a developer who wants to put the labels on the left …
–––––––––––––––––––––––––––––––––––––––
Rick Hill, Web CMS Administrator
University Communications, UC Davis
(530) 752-9612
http://cms.ucdavis.edu
–––––––––––––––––––––––––––––––––––––––
Web CMS assistance at = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
–––––––––––––––––––––––––––––––––––––––

From: Jukka K. Korpela
Date: Thu, Aug 09 2012 12:33PM
Subject: Re: Checkbox and radio button labels
← Previous message | Next message →

2012-08-09 19:21, Rick Hill wrote:

> I have always placed the text labels for radio buttons and checkboxes
> to the right of the input. The WebAIm article on forms uses this layout as well.
> However, I need to ask, is there an accessibilty reason for doing this?
> IS there a Web standard for doing this/ Or is this just a convention.
> I have a developer who wants to put the labels on the left …

I would say that putting the label after the input (which means on the
right in left-to-right layout of course) is a bad design which has
become good design by its being so common, vastly more frequent than the
opposite direction. It's what users expect, hence it's good usability
and good accessibility.

I can't find any explicit statement on the order, but specifications,
recommendations, guidelines, and tutorials use an order where the label
appears after a radio button or checkbox, see e.g.
http://webaim.org/techniques/forms/controls

This order reflects the design of fill-out forms on paper, and on
digital media, it would have been better to place the label always
before the control. But it's too late now. And the order does not pose
serious problems, especially when you use appropriate <label> markup to
associate labels with controls.

Yucca

From: Bim Egan
Date: Fri, Aug 10 2012 6:15AM
Subject: Re: Checkbox and radio button labels
← Previous message | No next message

Hi,

The convention of labels to the right may have come from the ISO software
standard, but as Yucca says, explicit association of labels can solve any
accessibility problems for most users.

Do be careful about spacing though. Screen magnification users may only be
able to see a word or two of the label, and unless the visual association
with a left-hand label is obvious, they may give incorrect answers.

HTH,

Bim

----- Original Message -----
From: "Rick Hill" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS REMOVED = >
Sent: Thursday, August 09, 2012 5:21 PM
Subject: [WebAIM] Checkbox and radio button labels


I have always placed the text labels for radio buttons and checkboxes to the
right of the input. The WebAIm article on forms uses this layout as well.
However, I need to ask, is there an accessibilty reason for doing this? IS
there a Web standard for doing this/ Or is this just a convention. I have a
developer who wants to put the labels on the left …
–––––––––––––––––––––––––––––––––––––––
Rick Hill, Web CMS Administrator
University Communications, UC Davis
(530) 752-9612
http://cms.ucdavis.edu
–––––––––––––––––––––––––––––––––––––––
Web CMS assistance at = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
–––––––––––––––––––––––––––––––––––––––