WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Re: Forms: Explicit associations and Empty controls?


From: Thomas Jedenfelt
Date: May 24, 2005 1:27AM

Hi Patrick,

> Sorry, should have been a bit more specific...

Thanks for being polite.

> It basically says: even if you use labels with a FOR attribute
> explicitly referencing the ID of a form element, make sure that the
> label is still in the right position where assistive technology
> would expect it, i.e.:
> - for checkboxes, checkbox first followed immediately by the label
> - for all other controls requiring a label, label first then
> control immediately after

Thanks for the additional information on where to place the text that relates to the control.

> this implicit association is traditionally present either in
> markup, by wrapping both the label text and input inside a label
> element
> <label><input type="checkbox" ...> label for the checkbox</label>
> or even just by the mere position of text before/after the input
> <input type="checkbox" ...> label for the checkbox
> putting it all together, even if you use label elements with
> explicit FOR attribute, put them in the expected place...so, from
> the above
> <label for="c1"><input type="checkbox" id="c1" ...> label for c1</label>
> or
> <input type="checkbox" id="c1" ...> <label for="c1">label for c1</label>
> i.e. even if you use FOR, don't put, say, the label at the top of
> your document, and the input it relates to way down in the middle
> of your markup.

It's good to read a WCAG checkpoint described in another (extended) way. Thanks.

> Now, what I meant with my reference to CSS is: I can't think of a
> situation in which you wouldn't have the label and input far apart
> from each other (and in a different order from the expected one),
> especially now that, if there was a real need for some visual
> distance, you could use CSS positioning to move things around on
> screen while keeping them in the right place in the markup.

Okay, I thought you meant that there was a CSS technique (1) that would improve/aid forms (other than just controling the layout).

(1) CSS Specification,
and CSS Techniques for Web Content Accessibility Guidelines 1.0

> Hope this makes a bit more sense (although, just re-reading this
> message, I'm more confused myself ;) )

Yes, it does.

Thanks for being patient.

All the best,
Thomas Jedenfelt

Surf the Web in a faster, safer and easier way:
Download Opera 8 at http://www.opera.com

Powered by Outblaze