aem-core-cif-components [Accessibility] [Reset Password] The accessible names for the form fields do not match the visible text labels.

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

Open LevelAccessA11y opened this issue 4 years ago • 3 comments

Steps to Reproduce

Enable NVDA screen reader.
Open page in Google Chrome.
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