WebAIM - Web Accessibility In Mind

E-mail List Archives

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


From: Patrick H. Lauke
Date: May 23, 2005 3:36PM

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

Thomas Jedenfelt wrote:

> Checkpoint 10.2 does not suggest to circumvent explicit associations between labels and form controls.
> 10.2 suggests a fall back by way of containing the INPUT and the description text within the LABEL element, while still declaring (explicit association) the attributes 'for' (LABEL) and 'id' (e.g. INPUT)

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

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>


<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.

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.

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

Patrick H. Lauke