| id | b40fd1 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| name | Document has a landmark with non-repeated content | |||||||||||
| rules_format | 1.1 | |||||||||||
| rule_type | atomic | |||||||||||
| description | This rule checks that each page has an element with a landmark semantic role starting with non-repeated content | |||||||||||
| accessibility_requirements | ||||||||||||
| input_aspects |
|
|||||||||||
| acknowledgments |
|
This rule applies to any HTML web page.
Within each test target, either there is no non-repeated content after repeated content or there exists an element for which all the following are true:
- the element is an inheriting semantic
landmark; and - the first perceivable content (in tree order in the flat tree) which is an inclusive descendant of the element is non-repeated content after repeated content; and
- the element is included in the accessibility tree.
Most of the time, this rule passes by enclosing the primary content of the page in a main landmark.
Technique ARIA11: Using ARIA landmarks to identify regions of a page only checks that landmarks are correctly used, but does not check whether landmarks could have been used and were omitted. Therefore, failing this rule (not having enough landmarks) does not necessarily fail that technique, and it is not listed as an accessibility mapping.
- This rule assumes that landmarks are intended to users of Assistive Technologies and are not necessarily rendered in a visible way. Therefore, it does not require the main landmark to be visible. Similarly, technique ARIA11: Using ARIA landmarks to identify regions of a page does not require landmarks to be visible or have visible content.
Marking content with landmarks is sufficient to pass Success Criterion 2.4.1 Bypass blocks. However, this will only benefit users who can actually navigate using landmark roles (such a functionality is usually provided by assistive technologies, but could also be provided by browsers or browsers plugins). Users without any possibility for landmarks navigation will be left without way of bypassing blocks of repeated content and will still experience accessibility issues. Therefore, it is recommended to provide other ways of bypassing blocks.
- Technique ARIA11: Using ARIA landmarks to identify regions of a page
- ARIA Landmarks Example
- CSS scoping (work in progress)
- The
mainrole
In most examples, the nav element is a block of repeated content.
In this document, the main element has a semantic role of main and is included in the accessibility tree.
<html>
<head>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<nav id="chapters-navigation">
<ol>
<li><a>Chapter 1</a></li>
<li><a href="/test-assets/bypass-blocks-cf77f2/chapter2.html">Chapter 2</a></li>
</ol>
</nav>
<main>
<p>
Unity succeeds division and division follows unity. One is bound to be replaced by the other after a long span
of time.
</p>
</main>
</body>
</html>In this document the div element has a semantic role of main and is included in the accessibility tree.
<html>
<head>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<nav id="chapters-navigation">
<ol>
<li><a>Chapter 1</a></li>
<li><a href="/test-assets/bypass-blocks-cf77f2/chapter2.html">Chapter 2</a></li>
</ol>
</nav>
<div role="main">
<p>
Unity succeeds division and division follows unity. One is bound to be replaced by the other after a long span
of time.
</p>
</div>
</body>
</html>This document has several elements with a role of main, at least one of them is included in the accessibility tree.
<html>
<head>
<title>Comparing translations of the Romance of the Three Kingdoms, Chapter one</title>
</head>
<body>
<nav id="chapters-navigation">
<ol>
<li><a>Chapter 1</a></li>
<li><a href="/test-assets/bypass-blocks-cf77f2/chapter2.html">Chapter 2</a></li>
</ol>
</nav>
<main aria-label="Translation by Charles Henry Brewitt-Taylor (1925)" aria-hidden="true">
<p>
The world under heaven, after a long period of division, tends to unite; after a long period of union, tends to
divide.
</p>
</main>
<main aria-label="Translation by Moss Roberts (1976)">
<p>The empire, long divided, must unite; long united, must divide. Thus it has ever been.</p>
</main>
<main aria-label="Translation by Yu Sumei (2014)" aria-hidden="true">
<p>
Unity succeeds division and division follows unity. One is bound to be replaced by the other after a long span
of time.
</p>
</main>
</body>
</html>This document has no non-repeated content after repeated content.
<html>
<head>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<p>
Unity succeeds division and division follows unity. One is bound to be replaced by the other after a long span of
time.
</p>
</body>
</html>This document has no element with a landmark role.
<html>
<head>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<div id="chapters-navigation">
<ol>
<li><a>Chapter 1</a></li>
<li><a href="/test-assets/bypass-blocks-cf77f2/chapter2.html">Chapter 2</a></li>
</ol>
</div>
<p>
Unity succeeds division and division follows unity. One is bound to be replaced by the other after a long span of
time.
</p>
</body>
</html>This document has no element with a landmark role after its repeated content. The element with a landmark role does not contain any non-repeated content after repeated content.
<html>
<head>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<nav id="chapters-navigation">
<ol>
<li><a>Chapter 1</a></li>
<li><a href="/test-assets/bypass-blocks-cf77f2/chapter2.html">Chapter 2</a></li>
</ol>
</nav>
<p>
Unity succeeds division and division follows unity. One is bound to be replaced by the other after a long span of
time.
</p>
</body>
</html>This document has a main landmark, but it is not included in the accessibility tree.
<html>
<head>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<nav id="chapters-navigation">
<ol>
<li><a>Chapter 1</a></li>
<li><a href="/test-assets/bypass-blocks-cf77f2/chapter2.html">Chapter 2</a></li>
</ol>
</nav>
<main aria-hidden="true">
<p>
Unity succeeds division and division follows unity. One is bound to be replaced by the other after a long span
of time.
</p>
</main>
</body>
</html>This document is not an HTML web page.
<svg xmlns="http://www.w3.org/2000/svg">
<title>This is an SVG</title>
</svg>