├── README.md
├── assets
    ├── script.js
    └── style.css
├── hidden.html
├── howto.html
├── index.html
├── media.html
└── tests
    ├── figure.html
    ├── hidden.html
    ├── label.html
    └── media.html


/README.md:
--------------------------------------------------------------------------------
1 | # RAT
2 | 
3 | **RAT** <small>(Results from Assistive Technology)</small> is a collection of markup patterns and how they are handled by different assistive technology.
4 | 
5 | [Visit site](http://jonathantneal.github.io/rat/)
6 | 


--------------------------------------------------------------------------------
/assets/script.js:
--------------------------------------------------------------------------------
 1 | var forEach = Array.prototype.forEach;
 2 | var tables = document.querySelectorAll('table');
 3 | 
 4 | forEach.call(tables, function (table) {
 5 | 	var ths = table.tHead.rows[0].cells;
 6 | 	var trs = table.tBodies[0].rows;
 7 | 
 8 | 	forEach.call(trs, function (tr) {
 9 | 		forEach.call(tr.cells, function (td, index) {
10 | 			if (ths[index].lastChild) {
11 | 				var name = ths[index].lastChild.nodeValue.trim();
12 | 
13 | 				td.setAttribute('data-name', name);
14 | 				td.setAttribute('role', 'gridcell');
15 | 			}
16 | 		});
17 | 	});
18 | });
19 | 


--------------------------------------------------------------------------------
/assets/style.css:
--------------------------------------------------------------------------------
  1 | * {
  2 | 	color: inherit;
  3 | 	font-size: inherit;
  4 | 	font-weight: inherit;
  5 | 	line-height: inherit;
  6 | 	text-decoration: none;
  7 | }
  8 | 
  9 | html {
 10 | 	font: 300 20px/1.5 ".SFNSText-Regular", ".HelveticaNeueDeskInterface", ".LucidaGrandeUI", "Ubuntu", "Segoe UI", Helvetica, sans-serif;
 11 | 	-ms-overflow-style: -ms-autohiding-scrollbar;
 12 | 	text-rendering: optimizeLegibility;
 13 | 	text-size-adjust: 100%;
 14 | }
 15 | 
 16 | body {
 17 | 	margin: 0 1rem 5rem;
 18 | 	padding: 0 calc(50% - (880px / 2));
 19 | }
 20 | 
 21 | caption, td, th {
 22 | 	padding: .5rem .75rem;
 23 | }
 24 | 
 25 | h2, table {
 26 | 	margin: 3em 0 0;
 27 | }
 28 | 
 29 | section h3 {
 30 | 	box-shadow: inset 0 -1px 0 0 #cccccc;
 31 | 	margin-top: 2em;
 32 | 	padding-bottom: .25em;
 33 | }
 34 | 
 35 | caption, h2 {
 36 | 	font-size: 125%;
 37 | 	font-weight: bold;
 38 | 	text-align: left;
 39 | }
 40 | 
 41 | key,
 42 | tbody th {
 43 | 	font-family: Menlo, Monaco, Consolas, monospace;
 44 | }
 45 | 
 46 | h1 {
 47 | 	font-size: 200%;
 48 | 	font-weight: bold;
 49 | }
 50 | 
 51 | h1 + p {
 52 | 	margin: -1em 0;
 53 | }
 54 | 
 55 | a {
 56 | 	border-bottom: 1px solid;
 57 | 	padding-bottom: 1px;
 58 | 	color: #66D;
 59 | }
 60 | 
 61 | a:hover,
 62 | a:focus {
 63 | 	color: #900;
 64 | }
 65 | 
 66 | a:active {
 67 | 	color: #000;
 68 | }
 69 | 
 70 | ul {
 71 | 	padding-left: 2em;
 72 | }
 73 | 
 74 | li {
 75 | 	margin: 0 0 1em;
 76 | }
 77 | 
 78 | blockquote {
 79 | 	background-color: #ffc;
 80 | 	border-radius: 1em;
 81 | 	box-shadow: 0 0 5px 0 #88c;
 82 | 	padding: .75em 2em;
 83 | 	margin: 1em 0;
 84 | }
 85 | 
 86 | footer nav {
 87 | 	margin: 5em 0;
 88 | }
 89 | 
 90 | nav ul {
 91 | 	padding-left: 0;
 92 | }
 93 | 
 94 | nav li {
 95 | 	display: inline-block;
 96 | 	margin-right: 1em;
 97 | }
 98 | 
 99 | strong {
100 | 	font-weight: bold;
101 | }
102 | 
103 | small {
104 | 	font-size: 80%;
105 | 	opacity: .675;
106 | }
107 | 
108 | key {
109 | 	background-color: #f5f5f5;
110 | 	border-radius: .25em;
111 | 	color: #393;
112 | 	padding: .25em;
113 | 	font-size: 75%;
114 | }
115 | 
116 | table {
117 | 	box-shadow: 0 1px 0 0 rgba(0,0,0,.05);
118 | 	border-collapse: collapse;
119 | 	width: 100%;
120 | }
121 | 
122 | caption {
123 | 	margin-bottom: -2rem;
124 | }
125 | 
126 | thead th {
127 | 	font-size: 80%;
128 | }
129 | 
130 | tbody tr:nth-child(even) > * {
131 | 	background-color: rgba(0,0,64,.0375);
132 | }
133 | 
134 | tbody th {
135 | 	font-size: 80%;
136 | 	text-align: left;
137 | 	width: 1%;
138 | 	white-space: nowrap;
139 | }
140 | 
141 | tbody td {
142 | 	box-shadow: inset 1px 0 0 0 #FFF;
143 | 	font-weight: bold;
144 | 	text-align: center;
145 | }
146 | 
147 | [aria-label="pass"]::after {
148 | 	color: #393;
149 | 	content: "✔";
150 | }
151 | 
152 | [aria-label="fail"]::after {
153 | 	color: #C33;
154 | 	content: "✖";
155 | }
156 | 
157 | [aria-label="yes"]::after {
158 | 	color: #393;
159 | 	content: "☑";
160 | 	font-size: 1rem;
161 | }
162 | 
163 | [aria-label="no"]::after {
164 | 	color: #C33;
165 | 	content: "☐";
166 | 	font-size: 1rem;
167 | }
168 | 
169 | @media screen and (max-width: 40em) {
170 | 	table, caption, tbody, tbody th, tbody td, tr {
171 | 		display: block;
172 | 	}
173 | 
174 | 	caption {
175 | 		margin: 0;
176 | 	}
177 | 
178 | 	thead {
179 | 		display: none;
180 | 	}
181 | 
182 | 	tbody th {
183 | 		font-size: 60%;
184 | 		padding: 1em 1em 0;
185 | 		width: auto;
186 | 	}
187 | 
188 | 	tbody td {
189 | 		padding: .5em 1em;
190 | 		text-align: right;
191 | 	}
192 | 
193 | 	tbody td::before {
194 | 		content: attr(data-name);
195 | 		display: inline-block;
196 | 		font-size: 70%;
197 | 		font-weight: normal;
198 | 		margin-right: 1em;
199 | 		text-align: right;
200 | 	}
201 | 
202 | 	tbody td::after {
203 | 		display: inline-block;
204 | 		width: 1em;
205 | 	}
206 | }
207 | 
208 | p code, pre {
209 | 	background-color: #f5f5f5;
210 | 	border-radius: .25em;
211 | 	font-family: "Courier", "Consolas", monospace;
212 | }
213 | 
214 | p code {
215 | 	display: inline-block;
216 | 	padding: .125em .25em;
217 | }
218 | 
219 | pre {
220 | 	padding: .75em;
221 | }
222 | 
223 | .announced {
224 | 	background-color: black;
225 | 	color: white;
226 | }
227 | 
228 | ul.announced {
229 | 	border-radius: .25em;
230 | 	padding: .5em 2em;
231 | }
232 | 
233 | ul.announced ~ p {
234 | 	padding: 0 .75rem;
235 | }
236 | 
237 | q.announced {
238 | 	padding: .125em .25em;
239 | }
240 | 
241 | q.announced::before, q.announced::after {
242 | 	content: "";
243 | }
244 | 
245 | .announced p, .announced li {
246 | 	margin: .25em 0;
247 | }
248 | 


--------------------------------------------------------------------------------
/hidden.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Hidden Content Results - RAT</title>
  3 | <meta charset="utf-8">
  4 | <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 | <link href="assets/style.css" rel="stylesheet">
  7 | 
  8 | <h1>Hidden Content Results - <abbr title="Results from Assistive Technology">RAT</abbr></h1>
  9 | 
 10 | <nav aria-label="RAT">
 11 | 	<ul>
 12 | 		<li><a href="tests/hidden.html">This test</a>
 13 | 		<li><a href="./">All tests</a>
 14 | 		<li><a href="howto.html">How to test</a>
 15 | 		<li><a href="https://github.com/jonathantneal/rat">GitHub source</a>
 16 | 	</ul>
 17 | </nav>
 18 | 
 19 | <table>
 20 | 	<caption>Markup Expectations</caption>
 21 | 	<thead>
 22 | 		<tr>
 23 | 			<th aria-hidden="true"></th>
 24 | 			<th>is readable</th>
 25 | 			<th>is visible</th>
 26 | 		</tr>
 27 | 	</thead>
 28 | 	<tbody>
 29 | 		<tr>
 30 | 			<th>[aria-hidden]</th>
 31 | 			<td aria-label="yes"><td aria-label="yes">
 32 | 		</tr>
 33 | 		<tr>
 34 | 			<th>[aria-hidden="true"]</th>
 35 | 			<td aria-label="no"><td aria-label="yes">
 36 | 		</tr>
 37 | 		<tr>
 38 | 			<th>[aria-hidden="false"]</th>
 39 | 			<td aria-label="yes"><td aria-label="yes">
 40 | 		</tr>
 41 | 		<tr>
 42 | 			<th>[aria-hidden="nonsense"]</th>
 43 | 			<td aria-label="yes"><td aria-label="yes">
 44 | 		</tr>
 45 | 		<tr>
 46 | 			<th>[hidden]</th>
 47 | 			<td aria-label="no"><td aria-label="no">
 48 | 		</tr>
 49 | 		<tr>
 50 | 			<th>[hidden]<br>[aria-hidden="false"]</th>
 51 | 			<td aria-label="yes"><td aria-label="no">
 52 | 		</tr>
 53 | 		<tr>
 54 | 			<th>position: absolute;<br>clip: rect(0 0 0 0);</th>
 55 | 			<td aria-label="yes"><td aria-label="no">
 56 | 		</tr>
 57 | 	</tbody>
 58 | </table>
 59 | 
 60 | <table>
 61 | 	<caption>VoiceOver 7</caption>
 62 | 	<thead>
 63 | 		<tr>
 64 | 			<th></th>
 65 | 			<th>Chrome 60</th>
 66 | 			<th>Firefox 53</th>
 67 | 			<th>Safari 9</th>
 68 | 		</tr>
 69 | 	</thead>
 70 | 	<tbody>
 71 | 		<tr>
 72 | 			<th>[aria-hidden]</th>
 73 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass">
 74 | 		</tr>
 75 | 		<tr>
 76 | 			<th>[aria-hidden="true"]</th>
 77 | 			<td aria-label="pass"><td aria-label="fail"><td aria-label="pass">
 78 | 		</tr>
 79 | 		<tr>
 80 | 			<th>[aria-hidden="false"]</th>
 81 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass">
 82 | 		</tr>
 83 | 		<tr>
 84 | 			<th>[aria-hidden="nonsense"]</th>
 85 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass">
 86 | 		</tr>
 87 | 		<tr>
 88 | 			<th>[hidden]</th>
 89 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass">
 90 | 		</tr>
 91 | 		<tr>
 92 | 			<th>[hidden]<br>[aria-hidden="false"]</th>
 93 | 			<td aria-label="fail"><td aria-label="fail"><td aria-label="pass">
 94 | 		</tr>
 95 | 		<tr>
 96 | 			<th>position: absolute;<br>clip: rect(0 0 0 0);</th>
 97 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass">
 98 | 		</tr>
 99 | 	</tbody>
100 | </table>
101 | 
102 | <table>
103 | 	<caption>NVDA 2015.3</caption>
104 | 	<thead>
105 | 		<tr>
106 | 			<th></th>
107 | 			<th>Chrome 60</th>
108 | 			<th>Firefox 53</th>
109 | 			<th>Internet Explorer 11</th>
110 | 			<th>Edge 20</th>
111 | 		</tr>
112 | 	</thead>
113 | 	<tbody>
114 | 		<tr>
115 | 			<th>[aria-hidden]</th>
116 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="pass">
117 | 		</tr>
118 | 		<tr>
119 | 			<th>[aria-hidden="true"]</th>
120 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
121 | 		</tr>
122 | 		<tr>
123 | 			<th>[aria-hidden="false"]</th>
124 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="pass">
125 | 		</tr>
126 | 		<tr>
127 | 			<th>[aria-hidden="nonsense"]</th>
128 | 			<td aria-label="pass"><td aria-label="fail"><td aria-label="pass"><td aria-label="pass">
129 | 		</tr>
130 | 		<tr>
131 | 			<th>[hidden]</th>
132 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
133 | 		</tr>
134 | 		<tr>
135 | 			<th>[hidden]<br>[aria-hidden="false"]</th>
136 | 			<td aria-label="fail"><td aria-label="fail"><td aria-label="fail"><td aria-label="pass">
137 | 		</tr>
138 | 		<tr>
139 | 			<th>position: absolute;<br>clip: rect(0 0 0 0);</th>
140 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
141 | 		</tr>
142 | 	</tbody>
143 | </table>
144 | 
145 | <table>
146 | 	<caption>JAWS 16</caption>
147 | 	<thead>
148 | 		<tr>
149 | 			<th></th>
150 | 			<th>Chrome 60</th>
151 | 			<th>Firefox 53</th>
152 | 			<th>Internet Explorer 11</th>
153 | 			<th>Edge 20</th>
154 | 		</tr>
155 | 	</thead>
156 | 	<tbody>
157 | 		<tr>
158 | 			<th>[aria-hidden]</th>
159 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
160 | 		</tr>
161 | 		<tr>
162 | 			<th>[aria-hidden="true"]</th>
163 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
164 | 		</tr>
165 | 		<tr>
166 | 			<th>[aria-hidden="false"]</th>
167 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
168 | 		</tr>
169 | 		<tr>
170 | 			<th>[aria-hidden="nonsense"]</th>
171 | 			<td aria-label="pass"><td aria-label="fail"><td aria-label="pass"><td aria-label="fail">
172 | 		</tr>
173 | 		<tr>
174 | 			<th>[hidden]</th>
175 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
176 | 		</tr>
177 | 		<tr>
178 | 			<th>[hidden]<br>[aria-hidden="false"]</th>
179 | 			<td aria-label="fail"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
180 | 		</tr>
181 | 		<tr>
182 | 			<th>position: absolute;<br>clip: rect(0 0 0 0);</th>
183 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
184 | 		</tr>
185 | 	</tbody>
186 | </table>
187 | 
188 | <table>
189 | 	<caption>Narrator 10</caption>
190 | 	<thead>
191 | 		<tr>
192 | 			<th></th>
193 | 			<th>Chrome 60</th>
194 | 			<th>Firefox 53</th>
195 | 			<th>Internet Explorer 11</th>
196 | 			<th>Edge 20</th>
197 | 		</tr>
198 | 	</thead>
199 | 	<tbody>
200 | 		<tr>
201 | 			<th>[aria-hidden]</th>
202 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
203 | 		</tr>
204 | 		<tr>
205 | 			<th>[aria-hidden="true"]</th>
206 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
207 | 		</tr>
208 | 		<tr>
209 | 			<th>[aria-hidden="false"]</th>
210 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
211 | 		</tr>
212 | 		<tr>
213 | 			<th>[aria-hidden="nonsense"]</th>
214 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
215 | 		</tr>
216 | 		<tr>
217 | 			<th>[hidden]</th>
218 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
219 | 		</tr>
220 | 		<tr>
221 | 			<th>[hidden]<br>[aria-hidden="false"]</th>
222 | 			<td aria-label="fail"><td aria-label="fail"><td aria-label="fail"><td aria-label="fail">
223 | 		</tr>
224 | 		<tr>
225 | 			<th>position: absolute;<br>clip: rect(0 0 0 0);</th>
226 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
227 | 		</tr>
228 | 	</tbody>
229 | </table>
230 | 
231 | <table>
232 | 	<caption>Windows Eyes 9</caption>
233 | 	<thead>
234 | 		<tr>
235 | 			<th></th>
236 | 			<th>Chrome 60</th>
237 | 			<th>Firefox 53</th>
238 | 			<th>Internet Explorer 11</th>
239 | 			<th>Edge 20</th>
240 | 		</tr>
241 | 	</thead>
242 | 	<tbody>
243 | 		<tr>
244 | 			<th>[aria-hidden]</th>
245 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
246 | 		</tr>
247 | 		<tr>
248 | 			<th>[aria-hidden="true"]</th>
249 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
250 | 		</tr>
251 | 		<tr>
252 | 			<th>[aria-hidden="false"]</th>
253 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
254 | 		</tr>
255 | 		<tr>
256 | 			<th>[aria-hidden="nonsense"]</th>
257 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
258 | 		</tr>
259 | 		<tr>
260 | 			<th>[hidden]</th>
261 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
262 | 		</tr>
263 | 		<tr>
264 | 			<th>[hidden]<br>[aria-hidden="false"]</th>
265 | 			<td aria-label="fail"><td aria-label="fail"><td aria-label="pass"><td aria-label="fail">
266 | 		</tr>
267 | 		<tr>
268 | 			<th>position: absolute;<br>clip: rect(0 0 0 0);</th>
269 | 			<td aria-label="pass"><td aria-label="pass"><td aria-label="pass"><td aria-label="fail">
270 | 		</tr>
271 | 	</tbody>
272 | </table>
273 | 
274 | <table>
275 | 	<caption>ChromeVox</caption>
276 | 	<thead>
277 | 		<tr>
278 | 			<th></th>
279 | 			<th>Mac OS</th>
280 | 			<th>Windows</th>
281 | 		</tr>
282 | 	</thead>
283 | 	<tbody>
284 | 		<tr>
285 | 			<th>[aria-hidden]</th>
286 | 			<td aria-label="pass"><td aria-label="pass">
287 | 		</tr>
288 | 		<tr>
289 | 			<th>[aria-hidden="true"]</th>
290 | 			<td aria-label="pass"><td aria-label="pass">
291 | 		</tr>
292 | 		<tr>
293 | 			<th>[aria-hidden="false"]</th>
294 | 			<td aria-label="pass"><td aria-label="pass">
295 | 		</tr>
296 | 		<tr>
297 | 			<th>[aria-hidden="nonsense"]</th>
298 | 			<td aria-label="pass"><td aria-label="pass">
299 | 		</tr>
300 | 		<tr>
301 | 			<th>[hidden]</th>
302 | 			<td aria-label="pass"><td aria-label="pass">
303 | 		</tr>
304 | 		<tr>
305 | 			<th>[hidden]<br>[aria-hidden="false"]</th>
306 | 			<td aria-label="pass"><td aria-label="pass">
307 | 		</tr>
308 | 		<tr>
309 | 			<th>position: absolute;<br>clip: rect(0 0 0 0);</th>
310 | 			<td aria-label="pass"><td aria-label="pass">
311 | 		</tr>
312 | 	</tbody>
313 | </table>
314 | 
315 | <p>
316 | 	The <strong>Mac OS</strong> and <strong>Windows</strong> flagship browsers pass all tests with at least one <strong><abbr title="assistive technology">AT</abbr></strong>.
317 | </p>
318 | 
319 | <p>
320 | 	While limited to <strong>Chrome</strong>, <strong>ChromeVox</strong> may be the only cross-platform <strong><abbr title="assistive technology">AT</abbr></strong>, and it passes all tests.
321 | </p>
322 | 
323 | <p>
324 | 	<strong>VoiceOver</strong> for <strong>iOS</strong> appears to produce the same results as <strong>VoiceOver</strong> for <strong>Mac OS</strong>.
325 | </p>
326 | 
327 | <p>
328 | 	At this time, <strong>JAWS</strong> does not work with <strong>Edge</strong>.
329 | </p>
330 | 
331 | <footer>
332 | 	<nav aria-label="RAT">
333 | 		<ul>
334 | 			<li><a href="tests/hidden.html">This test</a>
335 | 			<li><a href="./">All tests</a>
336 | 			<li><a href="howto.html">How to test</a>
337 | 			<li><a href="https://github.com/jonathantneal/rat">GitHub source</a>
338 | 		</ul>
339 | 	</nav>
340 | </footer>
341 | 
342 | <script src="assets/script.js"></script>
343 | 


--------------------------------------------------------------------------------
/howto.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>How to test Assistive Technology</title>
 3 | <meta charset="utf-8">
 4 | <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
 5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 | <link href="assets/style.css" rel="stylesheet">
 7 | 
 8 | <h1>How to test <abbr title="Assistive Technology">AT</abbr>s</h1>
 9 | 
10 | <section>
11 | 	<h2>Virtual Machines</h2>
12 | 	<p>
13 | 		To test across multiple operating systems, a virtual machine monitor may be required.
14 | 		If this is the case, download and run the <a href="https://www.virtualbox.org/wiki/Downloads">VirtualBox installer</a>.
15 | 	</p>
16 | 	<p>
17 | 		To test <strong>Mac OS</strong> from another operating system, review this <a href="http://www.macbreaker.com/2013/01/iatkos-ml2-mountain-lion-virtualbox.html">guide to installing Mac OS as a Virtual Machine</a>.
18 | 	</p>
19 | 	<p>
20 | 		To test <strong>Windows</strong> from another operating system, download one of the many free <a href="http://dev.modern.ie/tools/vms/windows/">Windows virtual machines</a> from Microsoft.
21 | 	</p>
22 | </section>
23 | 
24 | <section>
25 | 	<h2>Browsers</h2>
26 | 	<p>
27 | 		To test <strong>Safari</strong> for <strong>Mac OS</strong>, run the pre-installed application.
28 | 	</p>
29 | 	<p>
30 | 		To test <strong>Edge</strong> or <strong>Internet Explorer</strong> for <strong>Windows</strong>, run one of the pre-installed applications.
31 | 	</p>
32 | 	<p>
33 | 		To test <strong>Chrome</strong> from any operating system, download the <a href="https://www.google.com/chrome/">Chrome installer</a>.
34 | 	</p>
35 | 	<p>
36 | 		To test <strong>Firefox</strong> for any operating system, download the <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox installer</a>.
37 | 	</p>
38 | 	<p>
39 | 		To test <strong>Opera</strong> for any operating system, download the <a href="http://www.opera.com/download">Opera installer</a>.
40 | 	</p>
41 | </section>
42 | 
43 | <section>
44 | 	<h2>Assistive Technologies</h2>
45 | 	<p>
46 | 		To test <strong>VoiceOver</strong> for <strong>Mac OS</strong>, run the pre-installed application.
47 | 	</p>
48 | 	<p>
49 | 		To begin using <strong>VoiceOver</strong> on <strong>Mac OS</strong>, press <key>Command + F5</key>.
50 | 	</p>
51 | 	<p>
52 | 		When using <strong>VoiceOver</strong> with <strong>Chrome</strong> or <strong>Safari</strong>, you can enter the page by pressing <key>Control + Options + Shift + Down</key>.
53 | 		This will take you to the first readable item.
54 | 		To move around the page, hold <key>Control + Option</key> and press the <key>left</key> or <key>right</key> arrow keys.
55 | 		To move between individual words, hold <key>Option</key> and press the  <key>left</key> or <key>right</key> arrow keys.
56 | 	</p>
57 | 	<p>
58 | 		To test with <strong>JAWS</strong> for <strong>Windows</strong>, download and run the <a href="http://www.freedomscientific.com/Downloads/JAWS">JAWS installer</a>.
59 | 	</p>
60 | 	<p>
61 | 		When using <strong>JAWS</strong> with <strong>Edge</strong>, you can enter the page by pressing <key>Control + Options + Shift + Down</key>.
62 | 		This will take you to the first readable item.
63 | 		To move around the page, hold <key>Control + Option</key> and press the <key>left</key> or <key>right</key> arrow keys.
64 | 		To move between individual words, hold <key>Option</key> and press the  <key>left</key> or <key>right</key> arrow keys.
65 | 	</p>
66 | 	<p>
67 | 		To test with <strong>NVDA</strong> for <strong>Windows</strong>, download and run the <a href="http://www.nvaccess.org/download/">NVDA installer</a>.
68 | 	</p>
69 | 	<p>
70 | 		To test with <strong>Windows Eyes</strong> for <strong>Windows</strong>, download and run the <a href="http://www.gwmicro.com/Window-Eyes/Demo/">Windows Eyes installer</a>.
71 | 	</p>
72 | 	<p>
73 | 		When using <strong>JAWS</strong>, <strong>NVDA</strong>, or <strong>Windows Eyes</strong>, load the page and it should be read aloud to you.
74 | 	</p>
75 | </section>
76 | 
77 | <script src="assets/script.js"></script>
78 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>RAT: Results from Assistive Technology</title>
 3 | <meta charset="utf-8">
 4 | <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
 5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 | <link href="assets/style.css" rel="stylesheet">
 7 | 
 8 | <h1><abbr title="Results from Assistive Technology">RAT</abbr></h1>
 9 | 
10 | <p>
11 | 	<strong>RAT</strong> <small>(Results from Assistive Technology)</small> is a collection of markup patterns and how they are handled by different assistive technology.
12 | </p>
13 | 
14 | <nav>
15 | 	<h2>Tests</h2>
16 | 	<ul>
17 | 		<li><a href="hidden.html">Hidden Content</a>
18 | 		<li><a href="media.html">Media Content</a>
19 | 	</ul>
20 | </nav>
21 | 
22 | <footer>
23 | 	<nav>
24 | 		<ul>
25 | 			<li><a href="https://github.com/jonathantneal/rat">GitHub source</a>
26 | 			<li><a href="howto.html">How to test</a>
27 | 		</ul>
28 | 	</nav>
29 | </footer>
30 | 
31 | <script src="assets/script.js"></script>
32 | 


--------------------------------------------------------------------------------
/media.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Media Element Results - RAT</title>
  3 | <meta charset="utf-8">
  4 | <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
  5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 | <link href="assets/style.css" rel="stylesheet">
  7 | 
  8 | <h1>Media Element Results - <abbr title="Results from Assistive Technology">RAT</abbr></h1>
  9 | 
 10 | <nav aria-label="RAT">
 11 | 	<ul>
 12 | 		<li><a href="tests/media.html">This test</a>
 13 | 		<li><a href="./">All tests</a>
 14 | 		<li><a href="howto.html">How to test</a>
 15 | 		<li><a href="https://github.com/jonathantneal/rat">GitHub source</a>
 16 | 	</ul>
 17 | </nav>
 18 | 
 19 | <section>
 20 | 	<h2><code>&lt;audio&gt;</code> without <code>controls</code></h2>
 21 | 	<pre>&lt;audio src=&quot;&quot;&gt;</pre>
 22 | 	<p>
 23 | 		An <code>&lt;audio&gt;</code> without controls is not announced in any browser.
 24 | 		This is expected per <a href="http://w3c.github.io/html/single-page.html#element-attrdef-mediaelements-controls">HTML: Embedded content: User interface</a>, which states;
 25 | 	</p>
 26 | 	<blockquote>
 27 | 		<p>
 28 | 			This user interface should include features to begin playback, pause playback, seek to an arbitrary position in the content (if the content supports arbitrary seeking), change the volume, change the display of closed captions or embedded sign-language tracks, select different audio tracks or turn on audio descriptions, and show the media content in manners more suitable to the user (e.g., fullscreen video or in an independent resizable window).
 29 | 			Other controls may also be made available.
 30 | 		</p>
 31 | </section>
 32 | 
 33 | <section>
 34 | 	<h2><code>&lt;audio&gt;</code> with <code>controls</code></h2>
 35 | 	<pre>&lt;audio src=&quot;&quot; controls&gt;</pre>
 36 | 	<section>
 37 | 		<h3>How it’s announced by <strong>Narrator</strong>:</h3>
 38 | 		<ul class="announced">
 39 | 			<li>audio, group
 40 | 				<ul>
 41 | 					<li>play button (space)
 42 | 					<li>time elapsed / skip back, button, shift + left arrow skips back 30 seconds
 43 | 					<li>seek, 0%, slider, left and right arrow keys skip 10 seconds; shift + left or right arrow keys skip 30 seconds
 44 | 					<li>time remaining / skip ahead, button, shift + right arrow skips ahead 30 seconds
 45 | 					<li>mute, button (M)
 46 | 					<li>volume, 100%, slider, up and down arrow keys raise or lower volume
 47 | 				</ul>
 48 | 		</ul>
 49 | 		<p>
 50 | 			<strong>Narrator</strong> announces <q>space</q> and <q>M</q> because they are keyboard controls to play or pause the audio, and to mute or unmute the audio.
 51 | 		</p>
 52 | 		<p>
 53 | 			<strong>Narrator</strong> announces the <q>slash</q> in phrases like <q class="announced">time elapsed / skip back</q>.
 54 | 		</p>
 55 | 	</section>
 56 | 	<section>
 57 | 		<h3>How it’s announced by <strong>JAWS</strong>:</h3>
 58 | 		<ul class="announced">
 59 | 			<li>audio
 60 | 				<ul>
 61 | 					<li>play button, to activate press space bar
 62 | 					<li>time elapsed / skip back button, to activate press space bar, shift + left arrow skips back 30 seconds (period)
 63 | 					<li>seek left right slider, 0%, to increase or decrease use the arrow keys, left and right arrow keys skip 10 seconds (semicolon) shift + left or right arrow keys skip
 64 | 					<li>time remaining / skip ahead button, to activate press space bar, shift + right arrow skips ahead 30 seconds (period)
 65 | 					<li>mute button, to activate press space bar (M)
 66 | 					<li>volume left right slider, 95%, to increase or decrease use the arrow keys, up and down arrow keys raise or lower volume
 67 | 				</ul>
 68 | 		</ul>
 69 | 		<p>
 70 | 			<strong>JAWS</strong> curiously announces <q>period</q> and <q>semicolon</q>, yet they are not keyboard controls.
 71 | 			<strong>JAWS</strong> announces <q>M</q> because it is a keyboard control to mute or unmute the audio.
 72 | 		</p>
 73 | 	</section>
 74 | 	<section>
 75 | 		<h3>How it’s announced by <strong>VoiceOver</strong>:</h3>
 76 | 		<ul class="announced">
 77 | 			<li>audio, toolbar
 78 | 				<p>in audio toolbar, 6 items
 79 | 				<ul>
 80 | 					<li>play, selected, button, begin playback
 81 | 					<li>0:00
 82 | 					<li>/ 7:29
 83 | 					<li>0, slider, audio time scrubber
 84 | 					<li>mute, selected, button, mute audio track
 85 | 					<li>download media, selected, button, media control
 86 | 				</ul>
 87 | 		</ul>
 88 | 		<p>
 89 | 			<strong>VoiceOver</strong> announces the current and remaining time as <q>zero, zero zero</q> and <q>slash, seven, twenty-nine</q>.
 90 | 		</p>
 91 | 		<p>
 92 | 			<strong>VoiceOver</strong> navigation cannot access volume controls.
 93 | 			However, volume controls may be tabbed into, and then they are announced as <q class="announced">1, audio control</q>, where <q class="announced">1</q> is the audio volume on a scale of <q class="announced">0</q> to <q class="announced">1</q>.
 94 | 		</p>
 95 | 	</section>
 96 | </section>
 97 | 
 98 | <section>
 99 | 	<h2><code>&lt;video&gt;</code> without <code>controls</code></h2>
100 | 	<pre>&lt;video src=&quot;&quot;&gt;</pre>
101 | 	<section>
102 | 		<p>
103 | 			A <code>&lt;video&gt;</code> without controls is not announced by <strong>Narrator</strong> or <strong>JAWS</strong>.
104 | 			This is probably expected per <a href="http://w3c.github.io/html/single-page.html#element-attrdef-mediaelements-controls">HTML: Embedded content: User interface</a>.
105 | 		</p>
106 | 	</section>
107 | 	<section>
108 | 		<h3>How it’s announced in <strong>VoiceOver</strong>:</h3>
109 | 		<ul class="announced">
110 | 			<li>video, toolbar
111 | 			<li>video, toolbar
112 | 		</ul>
113 | 		<p>
114 | 			<strong>VoiceOver</strong> curiously announces <code>&lt;video src=&quot;&quot;&gt;</code> as two toolbars with no content inside of them.
115 | 		</p>
116 | 	</section>
117 | </section>
118 | 
119 | <section>
120 | 	<h2><code>&lt;video&gt;</code> with <code>controls</code></h2>
121 | 	<pre>&lt;video src=&quot;&quot; controls&gt;</pre>
122 | 	<section>
123 | 		<h3>How it’s announced in <strong>Narrator</strong>:</h3>
124 | 		<ul class="announced">
125 | 			<li>video, group
126 | 				<ul>
127 | 					<li>play button (space)
128 | 					<li>time elapsed / skip back, button, shift + left arrow skips back 30 seconds
129 | 					<li>seek, 0%, slider, left and right arrow keys skip 10 seconds; shift + left or right arrow keys skip 30 seconds
130 | 					<li>time remaining / skip ahead, button, shift + right arrow skips ahead 30 seconds
131 | 					<li>mute, button (M)
132 | 					<li>volume, 100%, slider, up and down arrow keys raise or lower volume
133 | 					<li>full screen, button, alt + enter
134 | 				</ul>
135 | 		</ul>
136 | 		<p>
137 | 			<strong>Narrator</strong> announces <q>space</q> and <q>M</q> because they are keyboard controls to play or pause the video, and to mute or unmute the audio.
138 | 		</p>
139 | 		<p>
140 | 			<strong>Narrator</strong> announces the <q>slash</q> in phrases like <q class="announced">time elapsed / skip back</q>.
141 | 		</p>
142 | 	</section>
143 | 	<section>
144 | 		<h3>How it’s announced in <strong>JAWS</strong>:</h3>
145 | 		<ul class="announced">
146 | 			<li>video
147 | 				<ul>
148 | 					<li>play button, to activate press space bar
149 | 					<li>time elapsed / skip back button, to activate press space bar, shift + left arrow skips back 30 seconds (period)
150 | 					<li>seek left right slider, 0%, to increase or decrease use the arrow keys, left and right arrow keys skip 10 seconds; shift + left or right arrow keys skip
151 | 					<li>time remaining / skip ahead button, to activate press space bar, shift + right arrow skips ahead 30 seconds (period)
152 | 					<li>mute button, to activate press space bar (M)
153 | 					<li>volume left right slider, 100%, to increase or decrease use the arrow keys, up and down arrow keys raise or lower volume
154 | 					<li>full screen button, to activate press space bar, alt + enter
155 | 				</ul>
156 | 		</ul>
157 | 		<p>
158 | 			<strong>JAWS</strong> curiously announces <q>period</q> and <q>semicolon</q>, yet they are not keyboard controls.
159 | 			<strong>JAWS</strong> announces <q>M</q> because it is a keyboard control to mute or unmute the audio.
160 | 		</p>
161 | 	</section>
162 | 	<section>
163 | 		<h3>How it’s announced in <strong>VoiceOver</strong>:</h3>
164 | 		<ul class="announced">
165 | 			<li>video, toolbar
166 | 			<li>video, toolbar
167 | 				<p>in video toolbar, 6 items
168 | 				<ul>
169 | 					<li>play, selected, button, begin playback
170 | 					<li>0:00
171 | 					<li>/ 7:29
172 | 					<li>0, slider, movie time scrubber
173 | 					<li>enter full screen, selected, button, play movie in full screen mode
174 | 					<li>mute, selected, button, mute audio track
175 | 					<li>download media, selected, button, media control
176 | 				</ul>
177 | 		</ul>
178 | 		<p>
179 | 			<strong>VoiceOver</strong> curious announces the video canvas as a toolbar with no content inside of it.
180 | 		</p>
181 | 		<p>
182 | 			<strong>VoiceOver</strong> announces the current and remaining time as <q>zero, zero zero</q> and <q>slash, seven, twenty-nine</q>.
183 | 		</p>
184 | 		<p>
185 | 			<strong>VoiceOver</strong> navigation cannot access volume controls.
186 | 			However, volume controls may be tabbed into, and then they are announced as <q class="announced">1, audio control</q>, where <q class="announced">1</q> is the audio volume on a scale of <q class="announced">0</q> to <q class="announced">1</q>.
187 | 		</p>
188 | 		<p>
189 | 			<strong>VoiceOver</strong> loses access to controls after they visually disappear upon entering fullscreen.
190 | 		</p>
191 | 	</section>
192 | </section>
193 | 
194 | <footer>
195 | 	<nav aria-label="RAT">
196 | 		<ul>
197 | 			<li><a href="tests/media.html">This test</a>
198 | 			<li><a href="./">All tests</a>
199 | 			<li><a href="howto.html">How to test</a>
200 | 			<li><a href="https://github.com/jonathantneal/rat">GitHub source</a>
201 | 		</ul>
202 | 	</nav>
203 | </footer>
204 | 
205 | <script src="assets/script.js"></script>
206 | 


--------------------------------------------------------------------------------
/tests/figure.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Test: Figure Content</title>
 3 | <meta charset="utf-8">
 4 | <meta name="viewport" content="width=device-width,initial-scale=1">
 5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 | 
 7 | <style>
 8 | figure {
 9 | 	display: table;
10 | 	margin: 0 auto;
11 | }
12 | 
13 | figure + img {
14 | 	display: block;
15 | }
16 | 
17 | figcaption {
18 | 	border-bottom: 2px solid #DDD;
19 | 	caption-side: bottom;
20 | 	display: table-caption;
21 | 	padding: .25em 0;
22 | 	direction: rtl;
23 | }
24 | 
25 | figcaption > * {
26 | 	direction: ltr;
27 | 	display: table-cell;
28 | 	line-height: 1rem;
29 | 	text-align: left;
30 | 	vertical-align: middle;
31 | }
32 | 
33 | figcaption cite {
34 | 	font-size: 75%;
35 | 	min-width: 10em;
36 | 	padding-left: .5em;
37 | 	text-align: right;
38 | 	vertical-align: text-top;
39 | }
40 | 
41 | figcaption span {
42 | 	text-align: left;
43 | 	width: 20rem;
44 | }
45 | </style>
46 | 
47 | <figure role="presentation">
48 | 	<img src="//placehold.it/300x200" alt="" aria-labelledby="figure-text-1" aria-describedby="figure-cite-1">
49 | 	<figcaption>
50 | 		<cite id="figure-cite-1">Photo by Jane Smith</cite>
51 | 		<span id="figure-text-1">A beautiful photo.</span>
52 | 	</figcaption>
53 | </figure>
54 | 


--------------------------------------------------------------------------------
/tests/hidden.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Test - Hidden Content</title>
 3 | <meta charset="utf-8">
 4 | <meta name="viewport" content="width=device-width,initial-scale=1">
 5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 | 
 7 | <h1>Test - Hidden Content</h1>
 8 | 
 9 | <p aria-hidden>
10 | 	ARIA hidden has no value.
11 | </p>
12 | 
13 | <p aria-hidden="true">
14 | 	ARIA hidden is true.
15 | </p>
16 | 
17 | <p aria-hidden="false">
18 | 	ARIA hidden is false.
19 | </p>
20 | 
21 | <p aria-hidden="nonsense">
22 | 	ARIA hidden is nonsense.
23 | </p>
24 | 
25 | <p hidden>
26 | 	Hidden is defined.
27 | </p>
28 | 
29 | <p hidden aria-hidden="false">
30 | 	ARIA hidden is false and hidden is defined.
31 | </p>
32 | 
33 | <p style="position: absolute; clip: rect(0 0 0 0);">
34 | 	Element is visibly hidden.
35 | </p>
36 | 


--------------------------------------------------------------------------------
/tests/label.html:
--------------------------------------------------------------------------------
  1 | <!doctype html>
  2 | <title>Test: Inputs</title>
  3 | <meta charset="utf-8">
  4 | <meta name="viewport" content="width=device-width,initial-scale=1">
  5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
  6 | 
  7 | <form>
  8 | 	<p>
  9 | 		<label>Search</label>
 10 | 		<input type="search">
 11 | 	</p>
 12 | 	<!--
 13 | 	VoiceOver:
 14 | 		Chrome:
 15 | 			Search
 16 | 			edit text blank
 17 | 		Firefox:
 18 | 			Search
 19 | 			space, text
 20 | 		Safari:
 21 | 			Search
 22 | 			search text field
 23 | 	ChromeVox:
 24 | 		Search
 25 | 		edit text, search entry
 26 | 	JAWS:
 27 | 		Chrome:
 28 | 			Search
 29 | 			edit
 30 | 
 31 | 			onfocus:
 32 | 				Search, edit, type in text
 33 | 		Firefox:
 34 | 			Search
 35 | 			edit
 36 | 
 37 | 			onfocus:
 38 | 				Search, edit, type in text
 39 | 		Internet Explorer:
 40 | 			Search
 41 | 			edit
 42 | 
 43 | 			onfocus:
 44 | 				Search, edit, type in text
 45 | 	NVDA:
 46 | 		Chrome:
 47 | 			Search
 48 | 			edit
 49 | 		Firefox:
 50 | 			Search
 51 | 			edit, has autocomplete
 52 | 		Internet Explorer:
 53 | 			Search
 54 | 			edit
 55 | 	-->
 56 | 
 57 | 	<p>
 58 | 		<label>Search the site</label>
 59 | 		<input type="search">
 60 | 	</p>
 61 | 	<!--
 62 | 	JAWS:
 63 | 		Chrome:
 64 | 			Search the site
 65 | 			edit
 66 | 
 67 | 			onfocus:
 68 | 				Search the site, edit, type in text
 69 | 		Firefox:
 70 | 			Search the site
 71 | 			edit
 72 | 
 73 | 			onfocus:
 74 | 				Search the site, edit, type in text
 75 | 		Internet Explorer:
 76 | 			Search the site
 77 | 			edit
 78 | 
 79 | 			onfocus:
 80 | 				Search the site, edit, type in text
 81 | 	-->
 82 | 
 83 | 	<p>
 84 | 		<label for="search-1">Search</label>
 85 | 		<input id="search-1" type="search">
 86 | 	</p>
 87 | 	<!--
 88 | 	VoiceOver:
 89 | 		Chrome:
 90 | 			Search
 91 | 			Search edit text
 92 | 		Firefox:
 93 | 			Search
 94 | 			Search, text
 95 | 		Safari:
 96 | 			Search
 97 | 			search text field
 98 | 	ChromeVox:
 99 | 		Search, edit text, search entry
100 | 	JAWS:
101 | 		Chrome:
102 | 			Search
103 | 			edit
104 | 
105 | 			onfocus:
106 | 				Search, edit, type in text
107 | 		Firefox:
108 | 			Search
109 | 			edit
110 | 
111 | 			onfocus:
112 | 				Search, edit, type in text
113 | 		Internet Explorer:
114 | 			Search
115 | 			edit
116 | 
117 | 			onfocus:
118 | 				Search, edit, type in text
119 | 	NVDA:
120 | 		Chrome:
121 | 			Search
122 | 			edit
123 | 		Firefox:
124 | 			Search
125 | 			edit, has autocomplete
126 | 		Internet Explorer:
127 | 			Search
128 | 			edit
129 | 	-->
130 | 
131 | 	<p>
132 | 		<label for="search-2">Search the site</label>
133 | 		<input id="search-2" type="search">
134 | 	</p>
135 | 	<!--
136 | 	VoiceOver:
137 | 		Chrome:
138 | 			Search the site
139 | 			Search the site, edit text
140 | 		Firefox:
141 | 			Search the site
142 | 			Search the site, text
143 | 		Safari:
144 | 			Search the site
145 | 			Search the site, search text field
146 | 	ChromeVox:
147 | 		Search the site, edit text, search entry
148 | 	JAWS:
149 | 		Chrome:
150 | 			Search the site
151 | 			edit
152 | 
153 | 			onfocus:
154 | 				Search the site, edit, type in text
155 | 		Firefox:
156 | 			Search the site
157 | 			edit
158 | 
159 | 			onfocus:
160 | 				Search the site, edit, type in text
161 | 		Internet Explorer:
162 | 			Search the site
163 | 			edit
164 | 
165 | 			onfocus:
166 | 				Search the site, edit, type in text
167 | 	NVDA:
168 | 		Chrome:
169 | 			Search the site
170 | 			edit
171 | 		Firefox:
172 | 			Search the site
173 | 			edit, has autocomplete
174 | 		Internet Explorer:
175 | 			Search the site
176 | 			edit
177 | 	-->
178 | 
179 | 	<p>
180 | 		<label for="search-3" aria-hidden="true">Search</label>
181 | 		<input id="search-3" type="search" aria-label="Search">
182 | 	</p>
183 | 	<!--
184 | 	VoiceOver:
185 | 		Chrome:
186 | 			Search, edit text
187 | 		Firefox:
188 | 			Search the site
189 | 			Search the site, text
190 | 		Safari:
191 | 			search text field
192 | 	ChromeVox:
193 | 		Search, edit text, search entry
194 | 	JAWS:
195 | 		Chrome:
196 | 			edit
197 | 
198 | 			onfocus:
199 | 				Search, edit, type in text
200 | 		Firefox:
201 | 			edit
202 | 
203 | 			onfocus:
204 | 				Search, edit, type in text
205 | 		Internet Explorer:
206 | 			Search the site
207 | 			edit
208 | 
209 | 			onfocus:
210 | 				Search, edit, type in text
211 | 	NVDA:
212 | 		Chrome:
213 | 			edit
214 | 		Firefox:
215 | 			edit, has autocomplete
216 | 		Internet Explorer:
217 | 			edit
218 | 	-->
219 | 
220 | 	<p>
221 | 		<label for="search-4" aria-hidden="true">Search the site</label>
222 | 		<input id="search-4" type="search" aria-label="Search the site">
223 | 	</p>
224 | 	<!--
225 | 	VoiceOver:
226 | 		Chrome:
227 | 			Search the site, edit text
228 | 		Firefox:
229 | 			Search the site
230 | 			Search the site, text
231 | 		Safari:
232 | 			Search the site, search text field
233 | 	ChromeVox:
234 | 		Search the site, edit text, search entry
235 | 	JAWS:
236 | 		Chrome:
237 | 			edit
238 | 
239 | 			onfocus:
240 | 				Search the site, edit, type in text
241 | 		Firefox:
242 | 			edit
243 | 
244 | 			onfocus:
245 | 				Search the site, edit, type in text
246 | 		Internet Explorer:
247 | 			Search the site
248 | 			edit
249 | 
250 | 			onfocus:
251 | 				Search the site, edit, type in text
252 | 	NVDA:
253 | 		Chrome:
254 | 			edit
255 | 		Firefox:
256 | 			edit, has autocomplete
257 | 		Internet Explorer:
258 | 			edit
259 | 	-->
260 | </form>
261 | 


--------------------------------------------------------------------------------
/tests/media.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <title>Test - Media Elements</title>
 3 | <meta charset="utf-8">
 4 | <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
 5 | <meta http-equiv="x-ua-compatible" content="ie=edge">
 6 | 
 7 | <h1>Test - Media Elements</h1>
 8 | 
 9 | <h3>Audio Element without controls</h3>
10 | 
11 | <audio src="https://elt.oup.com/elt/students/ielts/audio/exams_ielts_mc_pt01.mp3?cc=global&amp;selLanguage=en" style="max-width:100%;width:60em"></audio>
12 | 
13 | <h3>Audio Element with controls</h3>
14 | 
15 | <audio src="https://elt.oup.com/elt/students/ielts/audio/exams_ielts_mc_pt01.mp3?cc=global&amp;selLanguage=en" controls style="max-width:100%;width:60em"></audio>
16 | 
17 | <h3>Video Element with controls</h3>
18 | 
19 | <video src="https://dwknz3zfy9iu1.cloudfront.net/uscenes_h-264_hd_test.mp4" style="max-width:100%;width:60em"></video>
20 | 
21 | <h3>Video Element with controls</h3>
22 | 
23 | <video src="https://dwknz3zfy9iu1.cloudfront.net/uscenes_h-264_hd_test.mp4" controls style="max-width:100%;width:60em"></video>
24 | 


--------------------------------------------------------------------------------