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.

Role="main" and <main> interaction with aria-hidden="true" creates false positive

See original GitHub issue

Expectation: The test “Ensures the document has at most one main landmark” should respect aria-hidden when detecting <main> elements

Actual: Both <main> and <div role="main"> are counted as main landmarks despite <main> being a child of an element with aria-hidden="true"

Motivation: This creates a double standard for testing, particularly with modals. If a page normally has a <main> element, and opening a modal adds aria-hidden to that element’s parent, the page is (correctly) seen as having no main landmark, however, if a role="main" is added within the modal, the aria-hidden <main> element is counted towards the maximum of one. In other words, the test to see if there is any main landmark respects aria-hidden, but the test to see if thee is no more than one does not.

Here’s an example page that demonstrates the issue:

<html lang="en">
  <body>
    <title>Fake page</title>
    <div aria-hidden="true">
      <h1>Hidden page heading</h1>
      <main>hidden main</main>
    </div>
    <div role="dialog" aria-label="fake dialog">
      <h1>Fake dialog heading</h1>
      <div role="main">Fake dialog main</div> <!-- This line is causing a failure -->
    </div>
  </body>
</html>

In the above example, removing role-"main" will mean the page has 0 main landmarks, including it as is means the page will have >1 main landmarks.


axe-core version: 4.1.2
axe-webdriver, extension or other integration version: 4.7.2

Browser and Assistive Technology versions

Issue Analytics

State:
Created 3 years ago
Reactions:5
Comments:6 (3 by maintainers)

Top GitHub Comments

1reaction

Dragonericcommented, Mar 6, 2021

@WilcoFiers For me this example is wrong, because you have no reachable main tag. It’s under aria-hidden=true, so a screenrader can’t find a main as strcture element on the page.

0reactions

padmavemulapaticommented, Jul 10, 2021

Validated with the latest develop branch axe-core code base, (dated 10th july 2021) test snippet:

<html lang="en">
  <body>
    <title>Fake page</title>
    <div aria-hidden="true">
      <h1>Hidden page heading</h1>
      <main>hidden main</main>
    </div>
    <div role="dialog" aria-label="fake dialog">
      <h1>Fake dialog heading</h1>
      <div>Fake dialog main</div> <!-- This line is causing a failure -->
    </div>
  </body>
</html>

Not able to see any violations or best-practices regarding landmark-no-duplicate-main / region rule

Seeing a violation on landmark-no-duplicate-main with 4.0.2 version

Top Results From Across the Web

ARIA in HTML - W3C

HTML language feature Implicit ARIA semantics ‑. SHOULD NOT be used ARIA roles, state... base No corresponding role No role or aria... caption No corresponding...

WinRM Configuration Guide.pdf - Hybrid Analysis

Indicators Report False-Positive. Not all malicious and suspicious indicators are displayed. Get your own cloud service or the full version to view all ......

Chapter 4 Standards and Accessibility

Modern web standards are created and maintained by a huge group of ... Warnings should be considered; however, it is possible to get...

Accessibility | 2022 | The Web Almanac by HTTP Archive

In cases where people copy a template to create a website, ... with a role="main" , and 38% of pages have either <main>...

A Practical Starter Guide on Developing Accessible Websites

As such, the article assumes a basic knowledge of HTML, CSS, ... to the main content (role=”main”), such as a list of related...