blob: 4c104b6b7857e77dfbe7d83f39a3289b9eee4e42 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
|
<!DOCTYPE html>
<html>
<head>
<title>Traversal Rule test document</title>
<meta charset="utf-8" />
<style>
.content:before {
content: "Content";
}
</style>
</head>
<body>
<header id="header-1">
<h3 id="heading-1">A small first heading</h3>
<form>
<label for="input-1-1">Name:</label>
<input id="input-1-1">
<label id="label-1-2">Favourite Ice Cream Flavour:<input id="input-1-2"></label>
<button id="button-1-1">Magic Button</button>
<label for="radio-1-1">Radios are old: </label>
<input id="radio-1-1" type="radio">
<label for="radio-1-2">Radios are new: </label>
<input id="radio-1-2" type="radio">
<label for="input-1-3">Password:</label>
<input id="input-1-3" type="password">
<label for="input-1-4">Unlucky number:</label>
<input id="input-1-4" type="tel">
<input id="button-1-2" type="button" value="Fun">
<label for="checkbox-1-1">Check me: </label>
<input id="checkbox-1-1" type="checkbox">
<select id="select-1-1">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
<select id="select-1-2" multiple="true">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
<label for="checkbox-1-2">Check me too: </label>
<input id="checkbox-1-2" type="checkbox">
<label for="checkbox-1-3">But not me: </label>
<input id="checkbox-1-3" type="checkbox" aria-hidden="true">
<label for="checkbox-1-4">Or me! </label>
<input id="checkbox-1-4" type="checkbox" style="visibility:hidden">
<select id="select-1-3" size="3">
<option>Value 1</option>
<option>Value 2</option>
<option>Value 3</option>
</select>
<label for="input-1-5">Electronic mailing address:</label>
<input id="input-1-5" type="email">
<input id="button-1-3" type="submit" value="Submit">
</form>
</header>
<main id="main-1">
<h2 id="heading-2">A larger second</h2>
<div id="heading-3" role="heading">ARIA is fun</div>
<input id="button-2-1" type="button" value="More Fun">
<div id="button-2-2" tabindex="0" role="button">ARIA fun</div>
<div id="button-2-3" tabindex="0" role="button" aria-pressed="false">My little togglebutton</div>
<div id="button-2-4" tabindex="0" role="spinbutton">ARIA fun</div>
</main>
<h1 id="heading-4" style="display:none">Invisible header</h1>
<dl id="list-1">
<dt id="listitem-1-1">Programming Language</dt>
<dd>A esoteric weapon wielded by only the most formidable warriors,
for its unrelenting strict power is unfathomable.</dd>
</dl>
<ul id="list-2" onclick="alert('hi');">
<li id="listitem-2-1">Lists of Programming Languages</li>
<li id="listitem-2-2">Lisp
<ol id="list-3">
<li id="listitem-3-1">Scheme</li>
<li id="listitem-3-2">Racket</li>
<li id="listitem-3-3">Clojure</li>
<li id="listitem-3-4"><strong>Standard</strong> Lisp</li>
<li id="listitem-3-5"><a id="link-0" href="#">Common</a> Lisp</li>
<li id="listitem-3-6"><input id="checkbox-1-5" type="checkbox"> LeLisp</li>
</ol>
</li>
<li id="listitem-2-3">JavaScript</li>
</ul>
<section>
<h6 id="heading-5">The last (visible) one!</h6>
<img id="image-1" src="http://example.com" alt="">
<img id="image-2" src="../moz.png" alt="stuff">
<div id="image-3" tabindex="0" role="img">Not actually an image</div>
</section>
<section>
<h4 id="heading-6" aria-hidden="true">Hidden header</h4>
<a id="link-1" href="http://www.mozilla.org">Link</a>
<a id="anchor-1">Words</a>
<a id="link-2" href="http://www.mozilla.org">Link the second</a>
<a id="anchor-2">Sentences</a>
<a id="link-3" href="http://www.example.com">Link the third</a>
</section>
<hr id="separator-1">
<h6 id="heading-6"></h6>
<table id="table-1">
<tr>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td>4</td>
<td>1</td>
</tr>
</table>
<section id="grid" role="grid">
<ol role="row">
<li role="presentation"></li>
<li role="columnheader" aria-label="Sunday">S</li>
<li role="columnheader">M</li>
</ol>
<ol role="row">
<li role="rowheader" aria-label="Week 1">1</li>
<li role="gridcell"><span>3</span><div></div></li>
<li role="gridcell"><span>4</span><div>7</div></li>
</ol>
<ol role="row">
<li role="rowheader">2</li>
<li role="gridcell"><span>5</span><div role="presentation">8</div></li>
<li id="gridcell4" role="gridcell">
<span>6</span><div aria-hidden="true"><div class="content"></div></div>
</li>
</ol>
</section>
<div id="separator-2" role="separator">Just an innocuous separator</div>
<table id="table-2">
<thead>
<tr>
<th>Dirty Words</th>
<th>Meaning</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Mud</td>
<td>Wet Dirt</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Dirt</td>
<td>Messy Stuff</td>
</tr>
</tbody>
</table>
<footer id="footer-1">
<div id="statusbar-1" role="status">Last sync:<span>2 days ago</span></div>
<div aria-label="Last sync: 30min ago" id="statusbar-2" role="status"></div>
</footer>
<span id="switch-1" role="switch" aria-checked="false" aria-label="Light switch"></span>
<p>This is a MathML formula <math id="math-1" display="block">
<mfrac>
<mrow><mi>x</mi><mo>+</mo><mn>1</mn></mrow>
<msqrt><mn>3</mn><mo>/</mo><mn>4</mn></msqrt>
</mfrac>
</math> with some text after.</p>
</body>
</html>
|
