Example for Checkpoint
10.2 - Until user agents support explicit associations between labels and form controls, for all form controls with implicitly associated labels, ensure that the label is properly positioned.

Example
Slide 78 of 120
Previous slide. Next slide.

Priority 2

Authors should get in the habit of explicitly associating form controls and informative labels (see the example for Checkpoint 12.4). In the meantime, Examples 1 and 2 on this page show the layout of controls that would be relatively accessible to users of screen-readers. It should not be difficult to identify which label is associated with which control.

For all form controls with labels, ensure that:

Example 1: the label is immediately following its control on the same line (allowing more than one control/label per line).

[ Red | Blue | Green ]

Or...
Example 2: the label is on the line before the control (with only one label and one control per line).
Orange

Purple

Magenta

Example 3: shows a label and control layout that could be confusing for the screen-reader user:

[ Orange | Purple | Magenta ]

Up one level To Checkpoints for Guideline 10.
Next slide: Example for Checkpoint 10.3

Introduction: Overview Guidelines: Overview Checkpoints: Overview Examples: Overview

Previous page. Next page.

Chuck Letourneau & Geoff Freed

W3C Web Accessibility Initiative

Copyright © 2000 W3C