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)
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
- Webaim: How to create accessible forms.
- deque: The Anatomy of Accessible Forms: Best Practices.
- W3C Web Accessibility Tutorials: Forms Concepts.
- 456 Berea St: Use the label element to make your HTML forms accessible – highlighting how inaccurate use affects accessibility.
This technique may be used to test the following sections of best practice.
|WCAG 2.1||3.3.1||Error Identification||More Info|
|WCAG 2.1||3.3.2||Labels or Instructions||More Info|