role="banner"

What role="banner" means, and when to use it

Use banner for the site-wide header, the part with the logo and the top navigation that repeats on every page. There should be one per page. A masthead inside an article is not a banner, it is that article's own header.

The HTML element behind role="banner"

A header element is a banner landmark already, as long as it is not sitting inside an article, aside, main, nav or section. That condition is the whole rule, and it is why a header deep inside a page does not turn into a second banner.

Landmark roles cut a page into regions people can jump between

Landmarks split a page into regions a screen reader user can move between directly, so the header, the navigation, the main content and the footer become places to jump to rather than stretches of text to sit through.

HTML gives you most of them for free. A main element is a main landmark and a nav is a navigation landmark. A header or footer becomes a banner or a contentinfo landmark as long as it is not sitting inside an article, aside, main, nav or section.

A landmark with no name still appears in the landmarks list, which is why six unnamed regions produce six identical entries. Naming them with aria-labelledby is what turns a list of six regions into a map of the page.

Where role="banner" sits in the model

Inherits from

landmark → section → structure → roletype

The name can come from

aria-labelledby or aria-label. Its own text does not become the name, so text inside it will not be read as one.

The normative definition stays with the W3C, so it cannot go stale here. banner in the ARIA specification.

How a checker tests role="banner"

This role carries no obligation of its own, so what a checker looks at is whether the role is a real one and whether it belongs on the element carrying it. These are the published test rules that apply.

• Role attribute has valid value

The other landmark roles

• complementary Content that supports the main content and still makes sense on its own, like a sidebar.
• contentinfo The site-wide page footer, the copyright and contact end of the page.
• form A form region, worth naming when a page carries more than one.
• main The page's own content. There should be exactly one, and the header, footer and sidebars stay outside it.
• navigation A set of links for moving around the site or the page.
• region A section important enough to jump to. It only becomes a landmark once it has a name.
• search The search facility, marked as a region of the page rather than as a single control.