Nested Interactive Controls Issues: Correcting

How to Avoid Nesting Interactive Controls

Use Wrapper Elements: Instead of nesting, wrap interactive controls in non-interactive container elements (e.g., <div> or <span>) to group them visually.
Separate Functions: Ensure each control is self-contained and handles only its specific function.
Use ARIA Roles: If complex interactions are necessary, use ARIA attributes to explicitly define relationships between elements without nesting.
Make sure interactive controls don’t contain focusable elements by either separating nested interactive components or styling a single element.

Slideshows

Flagged issue:

<div class="slick-item display-none slick-slide slick-current slick-active" data-slick-index="1" aria-hidden="false" style="width: 419px;" tabindex="-1" role="option" aria-describedby="slick-slide11">

Code from page:

<div class="slick-item display-block slick-slide slick-current slick-active" data-slick-index="0" aria-hidden="false" style="width: 419px;" tabindex="-1" role="option" aria-describedby="slick-slide10">
     <h2 class="news-ticker-title">
     <a href="/tp-course/northern-ireland/" tabindex="0">Politicians, 
      Paramilitaries, And Peace in Northern Ireland – July</a>
     </h2>
</div>

Checking this issue:

The tabindex="0" on the <a> element is appropriate because it ensures the link is focusable.
However, the tabindex="-1" on the containing <div> means that the div itself is not focusable, which is fine if you want the <div> to be inactive. Ensure this is intentional.

Button with a Link inside

Flagged content:

<button class="learn-more btv2">

Code from page:

<button class="learn-more">
<span class="circle" aria-hidden="true">											<span class="icon arrow"></span>										<a class="button-text" target="_blank" aria-label="Learn more about Asian Studies" href="https://site.edu">Learn More</a>
</button>

Fixing the issue:

Instead of nesting the link, use either a <button> or an <a> but not both.
If you need a button-styled link, style the <a> with CSS to look like a button.

Expandable Sections

Flagged issue:

Flagged Issue:

<h3 class="field-group-format-toggler accordion-item ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="false" aria-expanded="false" tabindex="0">

code from page:

<h3 class="field-group-format-toggler accordion-item ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0">
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle">
    </span>
    <a href="#">Research</a>
  </h3>

The issue with the expandable above is the <a> tag nested within an <h3> tag that is coded to receive focus with the tabindex="0".

One of our favorite references for accordions is the ARIA Authoring Practices Guide: Accordion Pattern (Sections With Show/Hide Functionality).

Third-party Embeds

A very common situation with our clients is the flagging of issues that are found in third-party content embedded in their sites.

Refer to our article on Third-Party Content on Your Sites and Accessibility Issues.

Need more fundamental help? Review our article, Interactive Controls must not be Nested.

Learn More with WCAG

Understanding Name, Role, and Value (A)

DubBot Flag:

Interactive controls must not be nested
Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies

If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!