Example for Checkpoint10.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.

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: