search

adobe / aem-core-cif-components

A set of configurations and components to get you started with AEM Commerce development
Apache License 2.0
103 stars 80 forks source link

[Accessibility] [Mini Cart] Kebab menu buttons and close ("X") buttons are not labeled. #688

Open LevelAccessA11y opened 3 years ago

LevelAccessA11y commented 3 years ago

Steps to Reproduce

  1. Enable NVDA screen reader.
  2. Open page in Google Chrome.
  3. Use TAB or TAB + SHIFT to navigate to the kebab menu and close buttons.
  4. Notice the lack of meaningful name announced by NVDA.

Current Behavior The kebab menu buttons and close buttons rely on svgs to visually convey their purpose. They lack informative alternative text or inline button labels. The purpose of the buttons is not conveyed to screen reader users.

Expected behavior/code Ensure that all operable controls have accessible names. In the case of the button elements, inline text will suffice. This text can be visually hidden with CSS, although authors should not use display:none.

Note that the svgs should also be hidden from assistive technology with aria-hidden="true" and `focusable="false".

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

Affected Users Screen reader users, users of speech input

WCAG SC 4.1.2 Name, Role, Value

richardhand commented 3 years ago

@adobe export issue to Jira project SITES

github-jira-sync-bot commented 3 years ago

:white_check_mark: Jira issue SITES-2528 is successfully created for this GitHub issue.

mhaack commented 3 years ago

Tracked via CIF-2357