| id | 3e12e1 | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| name | Block of repeated content is collapsible | ||||||||||
| rules_format | 1.1 | ||||||||||
| rule_type | atomic | ||||||||||
| description | This rule checks that repeated blocks of content are collapsible | ||||||||||
| accessibility_requirements |
|
||||||||||
| input_aspects |
|
||||||||||
| acknowledgments |
|
This rule applies to any HTML web page.
For each block of repeated content in each test target, which is before (in the flat tree) at least one node of non-repeated content after repeated content, all the following are true:
- there exists an instrument to make all nodes in this block not visible; and
- there exists an instrument to remove all nodes in this block from the accessibility tree.
Usually the same instrument removes both visibility and inclusion in the accessibility tree of a block of repeated content. That instrument may remove all blocks of repeated content. If there is no block of repeated content before the non-repeated content the rule passes.
Technique SCR28: Using an expandable and collapsible menu to bypass block of content does not have any requirements concerning the location of the instruments in relation to the block of repeated content they control, hence this rule doesn't. It is likely a good idea to either keep each instrument close to the start of the block of repeated content it controls; or to group them all in one place near the start of the document. Notably, instruments located after (in reading order) the block they collapse are likely not satisfying Success Criterion 2.4.1 Bypass blocks, which this rule is designed for. Thus, it is possible to pass this rule without satisfying Success Criterion 2.4.1 Bypass blocks.
There are no accessibility support issues known.
To avoid using landmarks for the non-repeated content, which would satisfy Success Criterion 2.4.1 Bypass Block, which this rule is designed for, this rule uses <div id="main"> in its examples to indicate where non-repeating content exists. It is recommended to use the main landmark instead. The aside and nav elements are each a block of repeated content due to the link inside the nav element to a page with similar blocks of content.
This document has a link at the start of the document to toggle the visibility and inclusion in the accessibility tree of the navigational block of repeated content.
<html>
<head>
<script src="/test-assets/bypass-blocks-cf77f2/toggle-display.js"></script>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<a href="#" onclick="toggleHidden('chapters-navigation')">Toggle table of content</a>
<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 id="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 a button at the start of the document to toggle the visibility and inclusion in the accessibility tree of both the complementary and the navigational blocks of repeated content.
<html>
<head>
<script src="/test-assets/bypass-blocks-cf77f2/toggle-display.js"></script>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<button onclick="toggleHidden('chapters-navigation', 'about-book')">Toggle repeated content</button>
<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>
<aside id="about-book">
<p>The Romance of the Three Kingdoms is a 14th century historical novel.</p>
</aside>
<div id="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 two dedicated instruments to toggle the visibility and inclusion in the accessibility tree of the complementary and the navigational blocks of repeated content respectively.
<html>
<head>
<script src="/test-assets/bypass-blocks-cf77f2/toggle-display.js"></script>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<a href="#" onclick="toggleHidden('chapters-navigation')">Toggle table of content</a>
<button onclick="toggleHidden('about-book')">Toggle extra content</button>
<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>
<aside id="about-book">
<p>The Romance of the Three Kingdoms is a 14th century historical novel.</p>
</aside>
<div id="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 a button at the start of the document to toggle the visibility and inclusion in the accessibility tree of the navigational block of repeated content. The button is only visible when focused.
<html>
<head>
<script src="/test-assets/bypass-blocks-cf77f2/toggle-display.js"></script>
<link rel="stylesheet" href="/test-assets/bypass-blocks-cf77f2/styles.css" />
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<button onclick="toggleHidden('chapters-navigation')" class="visible-on-focus">Toggle repeated content</button>
<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 id="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 no instrument to toggle the navigational block of 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>
<div id="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 an instrument to toggle visibility of the navigational block of repeated content, but none to toggle its inclusion in the accessibility tree.
<html>
<head>
<link rel="stylesheet" href="/test-assets/bypass-blocks-cf77f2/styles.css" />
<script src="/test-assets/bypass-blocks-cf77f2/toggle-display.js"></script>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<a href="#" onclick="toggleVisibility('chapters-navigation')">Toggle table of content</a>
<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 id="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 an instrument to toggle the inclusion on the accessibility tree of the block of repeated content, but none to toggle its visibility.
<html>
<head>
<script src="/test-assets/bypass-blocks-cf77f2/toggle-display.js"></script>
<title>The Three Kingdoms, Chapter 1</title>
</head>
<body>
<a href="#" onclick="toggleAriaHidden('chapters-navigation')">Toggle table of content</a>
<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 id="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 is not an HTML web page.
<svg xmlns="http://www.w3.org/2000/svg">
<title>This is an SVG</title>
</svg>