You are here: : Homepage > Best practices > Sheet No162
Best Practice N°162- Level2- Section accessibility
Description
Every form field has a unique label.
Objectives
Improves the understanding of data expected from forms.
Makes inputing information easier by making it possible to choose the label instead of the check box or radio button.
Possible technical solutions:
A label element defines information that is expected for each field
Every label is associated with a field by means of an identical identifier for:
- The field’s
idattribute; - The
for=labelattribute.
Typically this association takes on the form: <label for="identifier">...</label> <input type="text" id="identifier" name="...">
It is important to make sure that the label and the form field follow the natural content order, even when the content is accessed in a browser which doesn’t support tables. Therefore it is advisable to avoid, for example :
<table> <tr> <td>label 1</td> <td>label 2</td> </tr> <tr> <td>field 1</td> <td>field 2</td> </tr> </table>
which will display in a linear browser (text browser) as:
label 1 label 2 champ 1 champ 2
Control methods:
Test with an accessibility validator : Ocawa or Acces pour tous or click on a label to check that it is associated with the right field.
Put these Best Practices to use.
