Form Labels - Information For This Demo
Quick tip: There are many ways of labelling form fields. The traditional method is to use the LABEL tag, but ARIA now allows you to add labels in other ways. After confirming the labels are properly coded, it is a good idea to test with a screen reader as a final check to confirm the form labels are announced properly.
How to test this issue
- Test technique: WAVE.
- WAVE will the show an error for form fields that do not have labels.
- WAVE will also shows icons for labels and fieldset/legends that are provided.
- Use your judgment to confirm that appropriate labels are provided for each form field. This includes a legend for groups of related fields
- Alternate test technique 1: Form Label bookmarklet.
- The Form Label bookmarklet shows where form tags and label tags are provided, including fieldset and legend tags.
- Confirm the FOR attributes from the label tags exactly match the ID from the associated form field tags.
- Confirm that FIELDSET and LABEL tags are used to provide group labels for groups of related fields, such as radio button groups. (Note: This might be done using ARIA attributes also. That solution is beyond the scope of this course.)
- Alternate test technique 2: JAWS.
- Listen with JAWS to verify the labels, including group labels for radio button groups, are announced properly.
- Press Insert+F5 to tell JAWS to display a list of all form fields on the page.
- Note: JAWS is not always reliable for testing form fields. Be sure to use one of the other tools to test form field labels.
Failing WCAG Guidelines and Test Tips
For form field labels, the following WCAG guidelines fail:
- 1.3.1: Info and Relationships
- 2.4.6: Headings and Labels