New rule: flag nested interactive roles

Nested Interactive Roles

Ensures interactive controls are not nested so they work with keyboards and screen readers

Tags: best-practice, experimental, cat.keyboard

Help text

Ensure interactive controls are not nested.

Selector

a, button, [role="link"], [role="button"]

More info

The code sample below shows a few places where aXe should have flagged nested interactive roles. The developer in this case added a role of link with tabindex, nested a link with role=button and tabindex inside of it, and then put an input with type of image inside. That’s a triple-whammy for nested controls, that we should be able to catch pretty easily since it doesn’t even use click events.

<div role="link" tabindex="40" title="link label">
  <a href="/url-went-here" title="link label" role="button" tabindex="12">
    Link label
    <div class="link-icon">
        <input type="image" alt="add to stop throwing error">
    </div>
  </a>
</div>

Checks

• none: nested-interactives

[stevefaulkner]

Nesting which results in duplication of announcements in the aural UI is a problem. For sure there are some examples where the result is sort of OK in some browsers with some AT (unknown unless fully tested), but the cost of teasing those out is worth less than accepting that the non-conforming (in HTML) nesting of interactive elements is an issue that should be flagged as an error.

Here is a neat example of a label/interactive control nesting that causes multiple issues; incorrect name calc and misdirected mouse click. This doesn’t appear to be caught by aXE (version 3.3)

Also interactive nesting conformance errors for marcy’s test page. When the DOM is tested (instead of the HTML code) the errors are reduced from 9 to 7.

[stevefaulkner]

@gaurav5430 I suggest your replacement example would fall foul of WCAG 2.1 SC 4.1.2 amongst other SC, as they are interactive UI elements that do not convey a role, if you add an appropriate role to each then you may fall foul of the nesting rules.

are there any guidelines on whether or not to have any nested interactions at all or not in ARIA widgets?

The authoring requirements for use of ARIA in HTML define what roles can be nested within each role.