gecko-dev/accessible/tests/mochitest/jsat/doc_traversal.html
2014-02-03 16:57:20 -08:00

119 lines
3.9 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<title>Traversal Rule test document</title>
<meta charset="utf-8" />
</head>
<body>
<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-3" 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>
<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>
<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">
<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>
</ol>
</li>
<li id="listitem-2-3">JavaScript</li>
</ul>
<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>
<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>
<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>
<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>
</body>
</html>