Header & footer elements change their roles when they're inside of sectioning content

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.

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.

But what if you can't change the document structure or really want to have the header element in a sectioning main? If you really must, you can get out the hammer and add a landmark role yourself.

<main>
  <header role="banner">
    "Main" header
  </header>
</main>

I'm not sure how I feel about this, though.

Where does this lead us? You probably shouldn't rely on or use the new sectionheader and sectionfooter roles yet. Here's Luke from Igalia giving some advice:

Browser support needs to improve but AT also won't necessarily understand these roles yet.

It will take some time until browsers have caught up and then still screen readers need to implement the new roles, too. This won't happen until tomorrow.

But generally, whenever you use header or footer elements, make sure to double check the applied ARIA landmark roles and avoid placing the elements in sectioning content like the main element. Otherwise, you might not provide the accessibility benefits you're hoping for.