role="contentinfo"

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

Use contentinfo for the site-wide footer, the copyright and contact end of the page. One per page, like banner. A footer inside an article belongs to that article and is not this.

The HTML element behind role="contentinfo"

A footer element is a contentinfo landmark, on the same condition as header. It has to sit outside any article, aside, main, nav or section.

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="contentinfo" 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. contentinfo in the ARIA specification.

How a checker tests role="contentinfo"

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

• banner The site-wide page header, the part that repeats across pages.
• complementary Content that supports the main content and still makes sense on its own, like a sidebar.
• 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.