Understanding Accessibility

Guideline 12. Provide context and orientation information.

Checkpoint 12.4 - Associate labels explicitly with their controls

Labels can be associated both explicitly and implicitly with form elements. Implicit associations are where the label surrounds the form element

Html

<LABEL for="name"> Name:
<INPUT type="text" id="name" tabindex="1">
</LABEL>

Xhtml

<LABEL for="name"> Name:
<INPUT type="text" id="name" tabindex="1" />
</LABEL>

Explicit associations are made using the 'for' attribute only. The label does not wrap the element.

Html

<LABEL for="fname">Name</LABEL>
<INPUT type="text" name="name" id="fname">

Xhtml

<LABEL for="fname">Name</LABEL>
<INPUT type="text" name="name" id="fname" />

How do I do it?

Use the 'for' attribute to associate labels explicitly.

How do I check that it meets the WCAG criteria?

WebXact will check this automatically

guideline 1 - 2 - 3 - 4 - 5 - 6 - 7 - 8 - 9 - 10 - 11 - 12 - 13 - 14