This repository was archived by the owner on Feb 17, 2026. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
159 lines (156 loc) · 8.06 KB
/
index.html
File metadata and controls
159 lines (156 loc) · 8.06 KB
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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/Static/dist/css/main.css" />
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Accessible Components</h1>
</header>
<div class="container">
<nav class="main-nav js-sticky-nav" data-component="common/main-nav">
<div class="main-nav__js-wrapper">
<p class="main-nav__title">Menu</p>
<a class="main-nav__mobile-btn js-toggle" href="javascript:;"><span></span></a>
<ul class="main-nav__list">
<li class="main-nav__item">
<a class="main-nav__link" href="#intro">Intro</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#accordion">Accordion</a>
</li>
<li class="main-nav__item">
<a class="main-nav__link" href="#form">Form</a>
</li>
</ul>
</div>
</nav>
<main class="components">
<section id="intro" class="components__item components__item--intro">
<h2 class="components__title">Introduction</h2>
<div class="components__description">
<p>Below are a number of components that have been built following the recommendations of the <a href="https://www.w3.org/TR/wai-aria-practices" target="_blank">WAI-ARIA Authoring Practices 1.1</a></p>
<p>Each section describes how the component can be interacted with using the keyboard. In addition, I'm adding ARIA attributes with javascript, which relies on the components following the structures and naming conventions in the examples.
</p>
</section>
<section id="accordion" class="components__item components__item--accordion">
<h2 class="components__title">Accordion</h2>
<div class="components__description">
<p>If focus is on an accordion tab:</p>
<ul>
<li><span class="code">Click</span>, <span class="code">enter</span>, or <span class="code">spacebar</span> open and close the related accordion panel.</li>
<li><span class="code">Left</span> or <span class="code">Up</span> arrows move focus to previous accordion tab. If focus is on the first accordion tab, moves focus to the last accordion header.</li>
<li><span class="code">Down</span> or <span class="code">Right</span> arrows move focus to next accordion tab. If focus is on the last accordion tab, moves focus to the first accordion header.</li>
<li><span class="code">Tab</span> moves focus to next accordion tab (or the next focusable element within an open tab panel). If focus is on the last accordion tab, moves focus out of the accordion to the next focusable element on the page.</li>
<li><span class="code">HOME</span> moves focus to first accordion tab.</li>
<li><span class="code">END</span> moves focus to last accordion tab.</li>
</ul>
</div>
<dl class="components__example accordion" data-component="accordion">
<dt class="accordion__tab-container">
<a href="javascript:;" class="accordion__tab">Tab 1
<span class="accordion__icon"></span>
</a>
</dt>
<dd class="accordion__panel">
<p>Thus the night passed. At dawn, the half-extinguished disc of the sun rose above a misty horizon; but it was now possible to recognise objects two miles off. <a href="http://www.google.com" target="_blank">Phileas Fogg</a> and the squad had gone southward; <a href="http://www.google.com" target="_blank">in the south</a> all was still vacancy. It was then seven o'clock.</p>
</dd>
<dt class="accordion__tab-container">
<a href="javascript:;" class="accordion__tab">Tab 2
<span class="accordion__icon"></span>
</a>
</dt>
<dd class="accordion__panel">
<p>And now behold Jonah taken up as an anchor and dropped into the sea; when instantly an oily calmness floats out from the east, and the sea is still, as Jonah carries down the gale with him, leaving smooth water behind. He goes down in the whirling heart of such a masterless commotion that he scarce heeds the moment when he drops seething into the yawning jaws awaiting him; and the whale shoots-to all his ivory teeth, like so many white bolts, upon his prison.</p>
</dd>
<dt class="accordion__tab-container">
<a href="javascript:;" class="accordion__tab">Tab 3
<span class="accordion__icon"></span>
</a>
</dt>
<dd class="accordion__panel">
<p>Permit me to introduce to you her Majesty, the Queen.</p>
</dd>
</dl>
</section>
<section id="form" class="components__item components__item--form">
<h2 class="components__title">Form</h2>
<div class="components__description">
<p>The default keyboard events work for form accessibility:</p>
<ul>
<li><span class="code">TAB</span> moves through each form element. If focus is on the focusable element in the form, moves focus out of the form to the next focusable element on the page.</li>
<li>When focus is on a radio button or checkbox, <span class="code">spacebar</span> selects/unselects the focused element.</li>
<li>When focus is on a radio button, <span class="code">down</span> arrow selects the focused element. If on the last radio button, the <span class="code">down</span> arrow focuses on and selects the first radio button.</li>
<li>When focus is on a select bar, <span class="code">down</span> or <span class="code">up</span> arrows move through the options. <span class="code">Enter</span> opens the select bar.</li>
<li>When focus is on the submit button, <span class="code">enter</span> submits the form.</li>
</ul>
</div>
<form class="components__example form" data-component="form">
<h3 class="form__title">Fun Facts</h3>
<div class="form__item">
<label for="name">Name</label>
<input id="name" type="text" name="textfield">
</div>
<div class="form__item">
<label for="hopes">Tell us your hopes and dreams</label>
<textarea id="hopes" name="textarea"></textarea>
</div>
<fieldset>
<legend>Which artists do you like?</legend>
<div class="form__item">
<input id="Modigliani" type="checkbox" name="artist" value="Modigliani">
<label for="Modigliani">Amedeo Modigliani</label>
</div>
<div class="form__item">
<input id="Cezanne" type="checkbox" name="artist" value="Cezanne">
<label for="Cezanne">Paul Cezanne</label>
</div>
<div class="form__item">
<input id="Neel" type="checkbox" name="artist" value="Neel">
<label for="Neel">Alice Neel</label>
</div>
<div class="form__item">
<input id="Goldsworthy" type="checkbox" name="artist" value="Goldsworthy">
<label for="Goldsworthy">Andy Goldsworthy</label>
</div>
</fieldset>
<fieldset>
<legend>Pick your favorite fruit</legend>
<div class="form__item">
<input id="kiwi" type="radio" name="fruit" value="kiwi">
<label for="kiwi">Kiwi</label>
</div>
<div class="form__item">
<input id="banana" type="radio" name="fruit" value="banana">
<label for="banana">Banana</label>
</div>
<div class="form__item">
<input id="blueberries" type="radio" name="fruit" value="blueberries">
<label for="blueberries">Blueberries</label>
</div>
</fieldset>
<div class="form__item">
<label for="favcity">Choose your favorite city!</label>
<select id="favcity" name="select">
<option value="1">Philadelphia, PA</option>
<option value="2">St. Paul, MN</option>
<option value="3">Flagstaff, AZ</option>
<option value="4">Brooklyn, NY</option>
</select>
</div>
<input type="submit" name="submit" value="Submit">
</form>
</section>
</main>
</div>
<script data-main="/Static/src/js/skeletor.main" src="/Static/dist/js/lib/require.js"></script>
</body>
</html>