search

adobe / aem-core-wcm-components

Standardized components to build websites with AEM.
https://docs.adobe.com/content/help/en/experience-manager-core-components/using/introduction.html
Apache License 2.0
740 stars 747 forks source link

[Accessibility][Carousel][Dialog] Custom checkbox state is not announced properly by screen reader #1920

Closed github-jira-sync-bot closed 2 years ago

github-jira-sync-bot commented 2 years ago

Environment Testing Application - Adobe Experience Manager Authentication State - Logged in Url - https://author-p35316-e137331.adobeaemcloud.com/editor.html/content/wknd/us/en/magazine.html Operating System - Windows 10 Browser - Chrome Version 93.0 Assistive Technology - NVDA Version 2021.1 Context - Desktop

Steps to Reproduce

  1. Launch the 'Adobe Experience Manager' application.
  2. Sign in with the Email and Password (registered email).
  3. 'AEM Start' page will appear.
  4. Activate the 'Sites' link.
  5. 'AEM Sites' page will appear.
  6. Select the 'WKND Site' option.
  7. Select the 'United States' option and activate the 'Edit button.
  8. 'Magazine' page will appear.
  9. Scroll to the bottom of the page and click on the 'Carousel' component.
  10. select the 'Configure' option in the toolbar.
  11. 'Carousel' modal will appear.
  12. Select the 'Properties' tab.
  13. Observed element - 'Automatically transition slides' checkbox.
Expected Results

'Automatically transition slides' checkbox state is properly announced by the screen reader.

Actual Results

'Automatically transition slides' checkbox state is not properly announced by the screen reader. Checkbox state is being announced as 'Checked' though it is in the 'Not Checked' state.

Affected user population

Without Vision, With Limited Vision, With Limited Manipulation, With Limited Reach and Strength, With Limited Language, Cognitive, and Learning Abilities

Applicable WCAG SC

4.1.2 Name, Role, Value (Level A)

Source Code
Remediation recommendation

Fix this issue by using ONE of the following techniques:

  1. Use the HTML element with a programmatic label.
  2. Use the ARIA method: a. Use the role="checkbox" attribute on the checkbox container. b. Use the aria-checked="true"/"false" attribute to convey the checked/unchecked state. c. Provide a programmatic label by using the aria-labelledby attribute or aria-label attribute or wrapping the visible label inside the checkbox element.

Pizza Toppings

Pepperoni
Ham
Black olives
Mushrooms
github-jira-sync-bot commented 2 years ago

The issue was exported from the internal Jira. The original Jira issue: SITES-2915.

gabrielwalt commented 2 years ago

@adobe export issue to Jira project SITES

github-jira-sync-bot commented 2 years ago

:x: Cannot export the issue. This GitHub issue is already linked to Jira issue(s): SITES-2915

gabrielwalt commented 2 years ago

We couldn't reproduce this issue, it might have been fixed thanks to the previous accessibility enhancements done.