adobe / adobe/aem-core-cif-components
[Accessibility] [Reset Password] The accessible names for the form fields do not match the visible text labels.
- Dominant language
- Java
- Stars
- 109
- Forks
- 78
- Avg merge
- 4d 18h
- Merged PRs (30d)
- 4
Description
**Steps to Reproduce**
1. Enable NVDA screen reader.
2. Open page in Google Chrome.
3. Use TAB or TAB + SHIFT to navigate through form fields.
**Current Behavior**
Inputs have accessible names that do not match the visible label text. Users of speech input may be unable to directly target the inputs, and visual users are being given more descriptive labels than the labels screen reader users have access to.
**Expected behavior/code**
The accessible name of a control should include the visible label text (and preferably match it). When a visible label is present, authors should wrap it in a `label` element and use a `for` attribute with a reference to the ID of the `input` it represents. In the case of the `button`, the text within the button element should form the accessible name. All `aria-label` attributes can be removed if following the above practice.
**Environment**
Chrome 92, Windows 10, NVDA 2020.4
AEM Core Components v. 2.17
**Affected Users**
Users of speech input, screen reader users
**WCAG SC**
2.5.3 Label in Name
Contributor guide
Research direction
Start by locating the Reset Password form and inspect its visible labels, inputs, and button accessibility attributes. Confirm the form fields and button expose names containing or matching their visible text, then verify the result with NVDA in Chrome.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- html
- Domain
- accessibility, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100