role="region"

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

Use region for a chunk of the page important enough to jump to that none of the other landmarks describes. It only becomes a landmark once it has a name, so a region with no aria-label or aria-labelledby is not a region at all as far as a screen reader is concerned.

The HTML element behind role="region"

A section element is a region landmark, but only once it has an accessible name. Without one it is exposed as a plain generic element, which catches people out because the markup looks meaningful and the accessibility tree is empty.

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

How a checker tests role="region"

Getting this one wrong is easy to assume is a 4.1.2 Name, Role, Value problem, and mostly it is not. 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.
• 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.
• search The search facility, marked as a region of the page rather than as a single control.