| Title | Form Control Accessible Name Check |
|---|---|
| id | input_02b |
| type | fals |
| elem | inputLabel |
| test | inputLabel |
| score | 10 |
| level | A |
| trust | 0.7 |
| ref | H44 |
| scs | 1.1.1,1.3.1,3.3.2,4.1.2 |
| dis | 54532 |
| result | passed |
The "Form Control Accessible Name Check" evaluates whether all form controls on the page have an accessible name.
I found that all form controls have an accessible name.
- 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.
To address <input> elements missing an accessible name:
- Locate the problematic
<input>element. - Add a
<label>element correctly referencing the<input>element with theforattribute. - If prefered, add an
aria-labelattribute and provide an informative accessible name. - Upon preference, use the
aria-labelledbyattribute, pointing to theidof the element that provides the<input>element's accessible name. - Finally, you can also provide an accessible name by including the
titleattribute in the<input>element.
- 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