WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Checkbox and radio button labels

for

From: Jukka K. Korpela
Date: Aug 9, 2012 12:33PM

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