Header and footer elements lose their roles in sectioning content (#tilPost)

Using proper ARIA landmark roles allows assistive technologies to navigate a page. You probably know about some common ones: main (main), header (banner), footer (contentinfo). But do you know that header and footer don't always get assigned their initial ARIA roles?

Here's an example:

<header>
  "Root" header
</header>
<main>
  <header>
    "Main" header
  </header>
  <footer>
    "Main" footer
  </footer>
</main>
<footer>
  "Root" footer
</footer>

This HTML snippet includes header and footer elements that are a) on the root level and b) included in a main element. If you check the browser's accessibility tools, these elements get different roles assigned.

The header element loses its banner role and depending on the browser gets generic or sectionheader assigned, which has an effect on assistive technologies. Here's Martin in his post "Page headings don’t belong in the header":

The header would carry no semantic meaning, so screen reader users would be left wondering where the main page header landmark was.

You can find similar behavior, though not identical, with the footer element.

Footer elements receive varying roles from sectionfooter and generic to WebKit telling that there's no role assigned.

If you look at the "ARIA in HTML" spec, you'll find some answers.

For the header element:

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=banner. Otherwise, role=generic.

For the footer element

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.

So, whenever you use header or footer elements, make sure not to include them in sectioning content like the main element, because then they probably won't provide the accessibility benefits you're hoping for. Well, today I learned!