matatk/landmarks

Header and Footer elements inside of role=main parent are incorrectly treated as landmarks

carrythebanner opened this issue · 1 comments

carrythebanner commented

When a <header> or <footer> element appears inside of a <main> element (with implicit role=main), the extension (correctly) does not consider it a landmark.

When a <header> or <footer> element appears inside of a <div> element with explicit role=main, the extension incorectly consisders it a banner/contentinfo landmark.

According to ARIA in HTML, the <footer> element's implied semantics are:

If not a descendant of an article, aside, main, nav or section element, or an element with role=article, complementary, main, navigation or region then role=contentinfo

Otherwise, role=generic

(Similar language appears for the <header> element.)

With this test code:

<body>
  <div role="main">
    <header>Header element</header>
    <div role="banner">Banner role</div>

    <footer>Footer element</footer>
    <div role="contentinfo">Contentinfo role</div>
  </div>
</body>

… there should be 3 landmarks:

  • main (div with explicit role="main")
  • banner (div with explicit role="banner")
  • contentinfo (div with explicit role="contentinfo")

Additionally, even if I explicitly assign role=none to the <header> or <footer>, they are still identified as landmarks:

<body>
  <div role="main">
    <header role="none">Header element</header>
    <footer role="none">Footer element</footer>
  </div>
</body>
geoffrey-eisenbarth commented

Similar to this, I think the spec has been updated so that <aside> are also context dependent: https://w3c.github.io/html-aam/#el-aside

Looks like:

  1. If <aside> is scoped to <body> or <main>, then it gets complimentary role and it is a landmark.
  2. Otherwise, it's not a landmark unless aria-label or aria-labelledby is specified.