|
|
|
|
It is good practice to position labels so the visual relationship with corresponding form controls is clear. When you look at a page, the relationship between form fields may be clear but users who cannot see may not be able to determine which label applies to which form control and therefore will not know what data to enter. Proper positioning of the label helps to avoid this. Some assistive technologies, like screen readers, can only read left to right and unless form labels are positioned carefully, they will fail to read the form in a meaningful way. For each form control, place its label in a <label> tag. The value of the for attribute equals the value of the id attribute. For example:
<label for="firstname">First name: Put labels for radio buttons and checkboxes after the radio button or checkbox. For example:
Put labels for text fields appear before the text field. For example:
Labels for groups of any form control should appear before the group. For example:
|
More information An overview of the accessibility guidelines Don't make pop-ups or other windows appear Make sure that the label is properly positioned for all form controls Provide a linear text alternative for all tables Include place-holding characters in edit boxes and text areas Include non-link, printable characters (surrounded by spaces) between adjacent links |
