Labelling forms for Accessibility - Errors, Features and Alerts

Patrick Lauke illustrates why it is so important to label forms correctly and other elements on web pages. “When users with screen readers tab their way through a page containing forms, their browser’s focus naturally lands on the individual form controls. To understand what type of information or interaction the current form control is expecting, these users may have to backtrack before/after said control in order to find any possible textual labels relating to it. However, HTML offers - through the LABEL element - a convenient and unequivocal way of associating the control and the label directly. Assistive technology such as screen readers can take advantage of this element and correctly announce the correct label for the current form control.

Additionally, labels can also benefit sighted users navigating pages with a mouse, as they can be clicked in order to activate and/or place the focus on their associated controls. In the specific case of checkboxes and radio buttons, this results in a much larger "clickable area", which can be particularly helpful for users with limited dexterity.” (Ariadne article, 2005)

Method

It is possible to use the Webaim Wave online checker to find missing labels or as suggested by Patrick Lauke the Web Developer addon for Firefox. However, automatic checkers cannot tell you whether they are appropriate or relevant, this has to be done by listening to the output of screen reading software.

Web Accessibility: Form elements require labels by Mike Westorg

Advice

References

This technique may be used to test the following sections of best practice.

Document Section Heading
WCAG 2.1 3.3.1 Error Identification More Info
WCAG 2.1 3.3.2 Labels or Instructions More Info