-
Notifications
You must be signed in to change notification settings - Fork 1
/
ol-wapa.html
78 lines (66 loc) · 2.98 KB
/
ol-wapa.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>WAPA Demo: Dynamic Set Size and Position</title>
<style type="text/css">
body{font-family:sans-serif;}
</style>
</head>
<body>
<h2>Unordered List with no aria</h2>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
...
<li>Item 100</li>
</ul>
<h2>This one has a handler for onariarequest</h2>
<ul id="listbox2" onariarequest="HandleRequest(event);">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
...
<li>Item 100</li>
</ul>
<script type="text/javascript">
var firsttime = true;
function HandleRequest(event) {
var myList = document.getElementById('listbox2');
var myItems = myList.children;
if (firsttime) {
for (var i = 0; i < myItems.length; i++) {
myItems[i].setAttribute("aria-posinset", i + 1);
myItems[i].setAttribute("aria-setsize", "100");
}
myItems[3].setAttribute("aria-posinset", "100"); //make the last one 100.
firsttime = false;
}
}
</script>
<h1>WAPA Demo: Dynamic Set Size and Position</h1>
<h2>How to Demo Me</h2>
<p>I only work in Edge on Windows 10 right now. I'd love it if other browsers supported me too.</p>
<ul>
<li>In Edge, go to about:flags and check “experimental accessibility features”</li>
<li>Restart Edge</li>
<li>Start F12 tools</li>
<li>Observe that neither list has any aria markup</li>
<li>Start Narrator (Windows+Enter)</li>
<li>CAPSLOCK+Right Arrow to get into and explore the page</li>
<li>Observe that the second list now reads as “one of 100, two of 100, three of 100, 100 o 100” while the first list is still “1 of 4…4 of 4”.</li>
<li>Switch to F12 window and observe that the second list now has aria markup. The ARIA markup was added in response to the call from Narrator via UIA via the onariarequest javascript event handler.</li>
</ul>
<h2>Why is that interesting?</h2>
<p>When you explored the page with Narrator, Narrator made a request to Edge for UIA properties. Edge coninected those properties
at that time, and sent them to Narrator. IE did that part before. What is new is that when the UIA request came in, Edge sends the <code>onariarequest</code>
DOM event. This demo has an event handler that hooks up the ARIA list size and position attributes. The markup for these was
not downloaded, and was only added to the page when it was needed. That saves download time, and processing time in cases
where there isn't an Assistive Technology product running.</p>
<p>This script also changed the size of the list, and the position of each element, to accomdate a list that didn't
include all of its children in the current page (or the current DOM). This feature will make creating virtualized
lists much easier.
</p>
</body>
</html>