Form Control Accessible Name Check

Description

The “Form Control Accessible Name Check” evaluates whether all form controls on the page have an accessible name.

Example outcome

I found that all form controls have an accessible name.

Impact

• Visual Impairments: Screen readers will announce the input only as “edit field” or similar, giving no context.
• Motor Impairments: Users relying on voice input can’t refer to the field by name to interact with it.
• Cognitive Disabilities: A lack of guidance increases cognitive effort and task failure.

Fixes

To address <input> elements missing an accessible name:

1. Locate the problematic <input> element.
2. Add a <label> element correctly referencing the <input> element with the for attribute.
3. If prefered, add an aria-label attribute and provide an informative accessible name.
4. Upon preference, use the aria-labelledby attribute, pointing to the id of the element that provides the <input> element’s accessible name.
5. Finally, you can also provide an accessible name by including the title attribute in the <input> element.

Resources

• WCAG 2.2: Understanding Success Criteria 1.1.1
• WCAG 2.2: Understanding Success Criteria 1.3.1
• WCAG 2.2: Understanding Success Criteria 3.3.2
• WCAG 2.2: Understanding Success Criteria 4.1.2
• WCAG 2.2 Techniques: Technique H44: Using label elements to associate text labels with form controls
• WebAIM: Semantic Structure: Regions, Headings, and Lists
• WebAIM: Creating Accessible Forms