Accessibility Examples
Test Start
H81 Test 1: Link context from parent list item in a nested list:
- List item 1:
Link 1 for H81 Test 1,
Link 2 for H81 Test 1
- Nested List Item: Link 1 for H81 Test 1, Link 2 for H81 Test 1
- List item 2:
Link 1 for H81 Test 1,
Link 2 for H81 Test 1
- Nested List Item: Link 1 for H81 Test 1, Link 2 for H81 Test 1
- List item 3:
Link 3 for H81 Test 1,
Link 2 for H81 Test 1
- Nested List Item: Link 1 for H81 Test 1, Link 4 for H81 Test 1
H81 Test 2: Link context from parent list item in a multiply nested list:
- List item:
Link for H81 Test 2
- List item 2:
Link for H81 Test 2
- List item: Link for H81 Test 2
- List item 2:
Link for H81 Test 2
- List item 2:
Link for H81 Test 2
- List item: Link for H81 Test 2
Failing Cases
H81 Test 3: Link context from parent list item in a nested list:
- List item:
Link 1 for H81 Test 3,
Link 2 for H81 Test 3
- Nested List Item: Link 1 for H81 Test 3, Link 2 for H81 Test 3
- List item:
Link 1 for H81 Test 3,
Link 2 for H81 Test 3
- Nested List Item: Link 1 for H81 Test 3, Link 2 for H81 Test 3
Test End
Rule References
| Rule | Pass IDs | Fail IDs |
|---|---|---|
| Rule 40 |
|
|
Calculations
No calculations for test 112
Test Description
- This test contains links enclosed in a multiply nest list. The list item text and list hiearchy provides unique context for the link.
* Failing cases do not create unique list item context.
Test Markup
- HTML4: a[href]
User Agent Implementation
No user agent implementation information.
HTML Source Code
<div class="wrapper">
<h3>H81 Test 1: Link context from parent list item in a nested list:</h3>
<ul>
<li>List item 1:
<a id="id1" href="#1">Link 1 for H81 Test 1</a>,
<a id="id2" href="#2">Link 2 for H81 Test 1</a>
<ul>
<li>Nested List Item:
<a id="id3" href="#3">Link 1 for H81 Test 1</a>,
<a id="id4" href="#4">Link 2 for H81 Test 1</a>
</li>
</ul>
</li>
<li>List item 2:
<a id="id5" href="#5">Link 1 for H81 Test 1</a>,
<a id="id6" href="#6">Link 2 for H81 Test 1</a>
<ul>
<li>Nested List Item:
<a id="id7" href="#7">Link 1 for H81 Test 1</a>,
<a id="id8" href="#8">Link 2 for H81 Test 1</a>
</li>
</ul>
</li>
<li>List item 3:
<a id="id9" href="#9">Link 3 for H81 Test 1</a>,
<a id="id10" href="#10">Link 2 for H81 Test 1</a>
<ul>
<li>Nested List Item:
<a id="id11" href="#11">Link 1 for H81 Test 1</a>,
<a id="id12" href="#12">Link 4 for H81 Test 1</a>
</li>
</ul>
</li>
</ul>
<h3>H81 Test 2: Link context from parent list item in a multiply nested list:</h3>
<ul>
<li>List item:
<a id="id13" href="#13">Link for H81 Test 2</a>
<ul>
<li>List item 2:
<a id="id14" href="#14">Link for H81 Test 2</a>
<ul>
<li>List item:
<a id="id15" href="#15">Link for H81 Test 2</a>
</li>
</ul>
</li>
</ul>
</li>
<li>List item 2:
<a id="id16" href="#16">Link for H81 Test 2</a>
<ul>
<li>List item:
<a id="id17" href="#17">Link for H81 Test 2</a>
</li>
</ul>
</li>
</ul>
<h2>Failing Cases</h2>
<h3>H81 Test 3: Link context from parent list item in a nested list:</h3>
<ul>
<li>List item:
<a id="id18" href="#18">Link 1 for H81 Test 3</a>,
<a id="id19" href="#19">Link 2 for H81 Test 3</a>
<ul>
<li>Nested List Item:
<a id="id20" href="#20">Link 1 for H81 Test 3</a>,
<a id="id21" href="#21">Link 2 for H81 Test 3</a>
</li>
</ul>
</li>
<li>List item:
<a id="id22" href="#22">Link 1 for H81 Test 3</a>,
<a id="id23" href="#23">Link 2 for H81 Test 3</a>
<ul>
<li>Nested List Item:
<a id="id24" href="#24">Link 1 for H81 Test 3</a>,
<a id="id25" href="#25">Link 2 for H81 Test 3</a>
</li>
</ul>
</li>
</ul>
</div>
CSS Code
div.wrapper {
margin: 20px;
padding: 10px;
overflow: visible;
background-color: #faf7f0;
border: 1px solid #880000;
-webkit-border-radius: 10px; /* Safari and Chrome rounded corners */
-moz-border-radius: 10px; /* Firefox rounded corners */
border-radius: 10px; /* Opera rounded corners */
}
div#example_code ul {
font-size: 100% !important;
}