Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

WCAG 4.1.2: Nested interactive controls are not announced by screen readers (checkbox - custom style)

See original GitHub issue

Issue

Element has focusable descendant but the descendant is hidden and is not announced by screen readers as desired by the application. Because of the attributes aria-hidden=“true” tabindex=“-999”

Could you help me how to fix this error on AI? (while it is the expected behavior for the application) Or should the tool be actually NOT showing the error when input element is aria-hidden?

Below is the modified excerpt as given by AI browser plugin

Nested interactive controls are not announced by screen readers (nested-interactive)

Target application

Element path

#published-id

Snippet

<div _ngcontent-xic-c25="" aria-labelledby="published-label-id" aria-live="polite" class="m-checkbox-container" id="published-id" role="checkbox" tabindex="0" aria-checked="false">

<div class="m-checkbox-container" role="checkbox" tabindex="0" aria-checked="false">
<input aria-hidden="true" tabindex="-999" type="checkbox">
<span class="m-icon-Checkbox unchecked"></span>
<span class="m-icon-CheckboxComposite checked "></span>
<div> blah blah </div>
</div>

How to fix

Fix any of the following:
  Element has focusable descendants

Environment

Microsoft Edge version 93.0.961.38 This accessibility issue was found using Accessibility Insights for Web 2.28.0 (axe-core 4.3.2), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Issue Analytics

State:
Created 2 years ago
Comments:7 (6 by maintainers)

Top GitHub Comments

1reaction

JGibson2019commented, Sep 8, 2021

Thank you for the additional information. After further investigation, we were able to determine that the dual checkboxes (despite the native checkbox not being visible) can create an issue for screen reader users relying on either VoiceOver or Dragon. As such, this is not a false positive and the non-visible checkbox should be removed from the code to prevent accessibility violations.

0reactions

JGibson2019commented, Sep 8, 2021

@sahithikkss Can you specify which page on the website the failure is showing up on? Can we have more detailed repro steps?

Top Results From Across the Web

Nested interactive controls are not announced by screen ...

Focusable elements with an interactive control ancestor (any element that accepts user input such as button or anchor elements) are not announced by...

WCAG 4.1.2: Nested interactive controls are not announced ...

Here is my issue in terms of the adaptive cards. Issue. Nested interactive controls are not announced by screen readers (nested-interactive).

dequelabs/axe-core - New rule: flag nested interactive roles

Nested Interactive Roles. Ensures interactive controls are not nested so they work with keyboards and screen readers.

Accessibility rule: Interactive controls must not be nested

Screen readers do not announce nested interactive controls. Screen readers do not notify focusable components with interactive control ancestors (any ...

Wcag 4.1.2: Nested Interactive Controls Are Not ... - ADocLib

Nested interactive controls are not announced by screen readers Interactive controls must not have focusable descendants. Focusable elements with an.