Region Landmark
A region landmark is a perceivable section containing content that is relevant to a specific, author-specified purpose and sufficiently important that users will likely want to be able to navigate to the section easily and to have it listed in a summary of the page.
ARIA 1.1 Specification: region landmark
Design Patterns
- A
regionlandmark must have a label. - If a page includes more than one
regionlandmark, each should have a unique label. - The
regionlandmark can be used identify content that named landmarks do not appropriately describe.
A role="region" attribute is used to define a region landmark.
ARIA Example: Using section[aria-labelledby] attribute
<div role="main">
<h1>title for main content area<h1>
<div role="region" aria-labelledby="region1">
<h2 id="region1">title for region area 1</h2>
... content for region area 1 ...
</div>
<div role="region" aria-labelledby="region2">
<h2 id="region2">title for region area 2</h2>
... content for region area 2 ...
</div>
</main>
<h1>title for main content area<h1>
<div role="region" aria-labelledby="region1">
<h2 id="region1">title for region area 1</h2>
... content for region area 1 ...
</div>
<div role="region" aria-labelledby="region2">
<h2 id="region2">title for region area 2</h2>
... content for region area 2 ...
</div>
</main>
Use the HTML5 section element to define a region landmark.
HTML5 Example: Using section[aria-labelledby] attribute
Defines a label for each region using existing content on the page.
<main>
<h1>title for main content area<h1>
<section aria-labelledby="region1">
<h2 id="region1">title for region area 1</h2>
... content for region area 1 ...
</section>
<section aria-labelledby="region2">>
<h2 id="region2">title for region area 2</h2>
... content for region area 2 ...
</section>
</main>
<h1>title for main content area<h1>
<section aria-labelledby="region1">
<h2 id="region1">title for region area 1</h2>
... content for region area 1 ...
</section>
<section aria-labelledby="region2">>
<h2 id="region2">title for region area 2</h2>
... content for region area 2 ...
</section>
</main>
HTML5 Example: Using section[aria-label] attribute
Defines a label for each region using attribute value that is only visible to assistive technologies.
<main>
<h1>title for main content<h1>
<section aria-label="title for region area 1">
<h2>title for region area 1</h2>
... content for region area 1 ...
</section>
<section aria-label="title for region area 2">
<h2>title for region area 2</h2>
... content for region area 2 ...
</section>
</main>
<h1>title for main content<h1>
<section aria-label="title for region area 1">
<h2>title for region area 1</h2>
... content for region area 1 ...
</section>
<section aria-label="title for region area 2">
<h2>title for region area 2</h2>
... content for region area 2 ...
</section>
</main>
HTML5 Example: Using section[title] attribute
Defines a label for each region using attribute value that maybe available as a tooltip on some browsers.
<main>
<h1>title for main content<h1>
<section title="title for region area 1">
<h2>title for region area 1</h2>
...content for region area 1...
</section>
<section title="title for region area 2">>
<h2>title for region area 2</h2>
...content for region area 2...
</section>
</main>
<h1>title for main content<h1>
<section title="title for region area 1">
<h2>title for region area 1</h2>
...content for region area 1...
</section>
<section title="title for region area 2">>
<h2>title for region area 2</h2>
...content for region area 2...
</section>
</main>