input_02.md

Title	Missing Form Control Accessible Name Check
id	input_02
type	prop
elem	label
test	inputLabelNo
score	3
level	A
trust	0.8
ref	H44
scs	1.1.1,1.3.1,3.3.2,4.1.2
dis	54532
result	warning

Missing Form Control Accessible Name Check

Description

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

Example outcome

I found 1 form control without 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