Skip to main content

Nested Interactive Controls Issues: Correcting

Updated over 3 weeks ago

In this Article

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 either by separating nested interactive components or by 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-style link, style the <a> element with CSS to resemble 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>

Problems in the flagged HTML:

  1. Improper use of heading (<h3>) with a link (<a href="#">):

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

    A heading is not typically a focusable widget (like a tab), so assigning it the role="tab" attribute is confusing unless it’s part of a tab list.

  2. <a href="#"> is non-functional:

    This is a keyboard trap and fails WCAG 2.1 2.1.1 Keyboard and 2.4.4 Link Purpose.

  3. ARIA attributes on the <h3> heading without supporting structure:

    role="tab", aria-controls, etc., only make sense if the element is part of a tab list structure with associated panels.

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 for 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

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!

Did this answer your question?