adobe / adobe/aem-core-cif-components

[Accessibility] [Reset Password] The form field constraints/errors are not associated with their fields programmatically.

Open
#693 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. Activate the "Reset Password" button without inputting any information in form fields.
4. Navigate through form fields using TAB or TAB + SHIFT.
5. Notice that no error is announced when focusing fields.

**Current Behavior**
The field `input` elements make no reference to the constraints and error messages associated with them. Screen reader users are not informed that the inputs have errors when they navigate through the form.

**Expected behavior/code**
Authors should use an `aria-describedby` attribute on the `input` elements with an ID reference to the associated constraints/errors. Follow the best practices for [accessible form error identification](https://www.levelaccess.com/level-access-news/how-to-provide-accessible-error-identification/).

**Environment**
Chrome 92, Windows 10, NVDA 2020.4
AEM Core Components v. 2.17

**Affected Users**
Screen reader users

**WCAG SC**
1.3.1 Info and Relationships

Contributor guide

Open the contributing guide

Research direction

Start at the Reset Password form and inspect the input elements, their constraints, and associated error messages. Verify the form with NVDA in Chrome after submitting it empty; done means each invalid field announces its constraint or error when focused.

Written by the indexing model from the issue text.

Assessment

Tech stack
html
Domain
accessibility, frontend
Issue type
Bug
Difficulty
2/5
Estimated time
1-3 hours
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.