aem-core-cif-components [Accessibility] [Mini Cart] The coupon code input field relies solely on a placeholder value to label it.

[Accessibility] [Mini Cart] The coupon code input field relies solely on a placeholder value to label it.

Open LevelAccessA11y opened this issue 4 years ago • 3 comments

Steps to Reproduce

Open page in Google Chrome.
Activate the "Enter your code" field and input any value.

Current Behavior Because the field has no visual or programmatic label, it relies on the placeholder value to convey a name. Users with cognitive impairments can struggle with inputs labelled only with placeholder text, because the label disappears once the user begins entering content in the field.

Expected behavior/code Ensure that fields have a persistently visible label. Use a label element and associate it with the field via a for attribute with an ID reference as the value.

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

Affected Users Users with cognitive impairments

WCAG SC 3.3.2 Labels or Instructions