DEV Community

Stefan Judis
Stefan Judis

Posted on • Originally published at stefanjudis.com on

Header and footer elements lose their roles in sectioning content

#webdev #a11y #html

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>
Enter fullscreen mode Exit fullscreen mode

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 raw `header` endraw element gets the role

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 on the root level get raw `contentinfo` endraw assigned whereas raw `footer` endraw elements in a raw `main` endraw element get raw `sectionfooter` endraw ,

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>
Enter fullscreen mode Exit fullscreen mode

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

I've wondered why Chromium and Safari 26+ didn't follow the spec and didn't switch to the generic role. It turns out, lucky me published this post right in the middle of some work-in-progress ARIA spec changes:

sectionheader and sectionfooter are new roles being worked on. Chromium and Safari started to ship the new semantics already. Firefox still has to implement the new aria mappings.

Thanks to Manuel and Luke pointing me in the right direction.

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.

Top comments (0)