-
Notifications
You must be signed in to change notification settings - Fork 0
/
a11y-menu-template.html
137 lines (123 loc) · 4.66 KB
/
a11y-menu-template.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
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta Tags -->
<meta charset="UTF-8">
<!-- Name of Sim and Name of Project -->
<title>SIM NAME: PhET Interactive Simulations</title>
<style>
html {
font-size: 100%;
}
/*Focus style just for demonstration*/
:focus {
border: 3px solid hotpink;
}
section {
background-color: #efefef;
border-bottom: 2px solid #666;
margin-bottom: 1em;
padding: 0.5em;
}
</style>
</head>
<body>
<header>
<!-- Header area for common sim stuff -->
<!-- Name of Sim minus project name -->
<h1>SIM NAME</h1>
</header>
<!-- Sim Screen 1 goes here! -->
<section id="scene-summary">
<h2>Screen 1: Scene Summary</h2>
<p>Structured Scene Summary content here.</p>
<p>Playful sim-specific interaction hint, if needed.</p>
<p>If you need to, check out the <a href="#keyboard-shortcuts">keyboard shortcuts</a> for this sim.</p>
</section>
<section id="play-area">
<h2>Play Area</h2>
<p>Essential interactive objets here.</p>
</section>
<section id="play-area">
<h2>Control Panel</h2>
<p>Additional interactive elements.</p>
</section>
<!-- Bottom Bar Example 1: Footer -->
<footer role="footer" aria-label="Sim Screens, Resources, and Tools">
<h2>Footer with 2 nav regions</h2>
<nav aria-label="Sim Screens">
<!-- Potential tablist or accordions for screens -->
<ul>
<li><button href="#screen01" tabindex="0" aria-selected="true"><span class="visually-hidden">Current screen:</span> Screen 1</button></li>
<li><button href="#screen02" tabindex="-1">Screen 2</button></li>
<li><button href="#screenHome" tabindex="-1">home</button></li>
</ul>
</nav>
<!-- The button brings up the keyboard shortcuts dialog.-->
<button id="keyboard-shortcuts">Keyboard Shortcuts</button>
<!-- Design pattern adapted from Pickering's menu button.-->
<nav aria-label="Sim tools and links">
<button aria-expanded="false">PhET Menu</button>
<!-- <p>Tools and links for this sim.</p> -->
<ul hidden>
<li><button>View Options</button></li>
<li><button>Check for Updates</button></li>
<li><button>Take Screenshot</button></li>
<li><button>Full Screen</button></li>
<li><a href="https://phet.colorado.edu/files/troubleshooting/?BIG-LONG-LINK">Report Problem</a></li>
<li><button>About this Sim</button></li>
<li><a href="http://phet.colorado.edu/">PhET Website</a></li>
</ul>
</nav><!-- end PheT Menu Nav -->
</footer><!-- end FOOTER Sim Resource Bar -->
<!-- Bottom Bar Example 2: Div Menubar with nested toolbar -->
<div role="menubar" aria-label="Sim Screens, Resources, and Tools">
<h2>Menubar Role</h2>
<!-- Structurally, should the Screen navigation go inside or outside the bar? -->
<nav aria-label="Sim Screens">
<!-- Potential accordions for screens -->
<ul>
<li><button href="#screen01" tabindex="0" aria-selected="true"><span class="visually-hidden">Current screen:</span> Screen 1</button></li>
<li><button href="#screen02" tabindex="-1">Screen 2</button></li>
<li><button href="#screenHome" tabindex="-1">home</button></li>
</ul>
</nav>
<!-- The button brings up the keyboard shortcuts dialog.-->
<button id="keyboard-shortcuts">Keyboard Shortcuts</button>
<!-- Design pattern adapted from Pickering's menu button.-->
<div role="toolbar" aria-label="Sim tools and links">
<button aria-expanded="false">PhET Menu</button>
</div>
<!-- <p>Tools and links for this sim.</p> -->
<ul hidden>
<li><button>View Options</button></li>
<li><button>Check for Updates</button></li>
<li><button>Take Screenshot</button></li>
<li><button>Full Screen</button></li>
<li><a href="https://phet.colorado.edu/files/troubleshooting/?BIG-LONG-LINK">Report Problem</a></li>
<li><button>About this Sim</button></li>
<li><a href="http://phet.colorado.edu/">PhET Website</a></li>
</ul>
</nav><!-- end PheT Menu Nav -->
</div><!-- end Sim Resource Bar -->
</body>
<!-- Javascript from Pickering Menu Button-->
<script>
//For Example 1
(function() {
// get the button and menu nodes
var button = document.querySelector('[aria-label="Sim tools and links"] button');
var menu = button.nextElementSibling;
// set initial (closed menu) states
button.setAttribute('aria-expanded', 'false');
button.hidden = false;
menu.hidden = true;
button.addEventListener('click', function() {
// toggle menu visibility
var expanded = this.getAttribute('aria-expanded') ==='true';
this.setAttribute('aria-expanded', String(!expanded));
menu.hidden = expanded;
});
})();
</script>
</html>