Role Landmark

`region`

A generic landmark for content that doesn't fit banner, main, navigation, complementary, or contentinfo — but is still important enough to navigate to. A <section> becomes a region landmark when, and only when, it has an accessible name.

When to use

For a meaningful page section that doesn’t match another landmark and that screen-reader users should be able to jump to: a “Featured products” rail, a multi-step form’s current step, a chat transcript region inside a larger app.

<section> is exposed as a region landmark ONLY when it has an accessible name (aria-label or aria-labelledby). A <section> without a name is just a generic group — no landmark exposure. This is by design: too many landmarks make the landmark menu useless.

role="region" on a <div> works the same way — name required.

When to use vs. group

Use `role="region"` (or `<section aria-label>`)	Use `role="group"`
Major page section that warrants landmark navigation	Cluster of related controls without landmark status
One or two per page	Can have many per page
Always has an accessible name	Name optional

If in doubt: ask “would I want a screen-reader user to be able to jump straight here?” If yes, region. If no, group.

Common failures

<section> with no aria-label or aria-labelledby. Not a landmark; the wrapping is doing nothing for accessibility.
Marking every <section> as a region. Floods the landmark menu and dilutes the value of every landmark.
aria-label="Section" — meaningless. The label should describe what makes this section distinct.
Using role="region" for a sidebar — that’s complementary. Pick the most specific landmark.
role="region" on the wrapping <div> AND on an inner <section> — duplicate landmarks for the same content.

Example

<section aria-labelledby="recent">
  <h2 id="recent">Recently published</h2>
  <ul>
    <li><a href="/articles/aria-roles">ARIA roles overview</a></li>
    <li><a href="/articles/wcag-22">WCAG 2.2 changes</a></li>
  </ul>
</section>