adobe / adobe/aem-core-cif-components

[Accessibility] [Reset Password] The accessible names for the form fields do not match the visible text labels.

Open
#694 3 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.