-
Notifications
You must be signed in to change notification settings - Fork 28
/
Copy pathindex.html
134 lines (119 loc) · 6.14 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Accessibility Code Library</title>
<link rel="stylesheet" href="css/normalization.css" />
<link rel="stylesheet" href="css/base.css" />
</head>
<body>
<div class="container">
<div class="page-wrapper">
<h1>Accessible Solutions</h1>
<p><a href="https://github.com/haltersweb/Accessibility">Link back to the GitHub Repository for these solutions.</a></p>
<p>This is a collection of accessible solutions. The links take you to a page demonstrating the fully functional widget.</p>
<h2 class="h3">Requirements for all solutions:</h2>
<p>All solutions require the following css and js files.</p>
<ul class="bullet singletons">
<li><a href="css/normalization.css" target="_blank">normalization.css</a></li>
<li><a href="css/base.css" target="_blank">base.css</a></li>
<li>jQuery (I'm using 1.10.2)</li>
<li><a href="js/namespacing.js" target="_blank">namespacing.js</a></li>
<li><a href="js/accessibility-helpers.js" target="_blank">accessibiity-helpers.js</a></li>
</ul>
<h2><a href="autocomplete.html">Accessible Autocomplete</a></h2>
<p>This <a href="autocomplete.html">autocomplete</a> is created to work on desktop and in mobile with screen readers and switch devices.</p>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li><a href="css/autocomplete.css" target="_blank">autocomplete.css</a></li>
<li><a href="js/autocomplete.js" target="_blank">autocomplete.js</a></li>
</ul>
<h2><a href="tables.html">Tables</a></h2>
<p>This <a href="tables.html">accessible table page</a> gives a how to, example, and code snippet.</p>
<h2><a href="drop-menu.html">Drop Menu / Mobile Drawer Menu</a></h2>
<p>This <a href="drop-menu.html">drop menu</a> is also responsive, changing to an accessible drawer menu.</p>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li><a href="css/drop-menu.css" target="_blank">drop-menu.css</a></li>
<li><a href="js/drop-menu.js" target="_blank">drop-menu.js</a></li>
<li><a href="js/block-screen.js" target="_blank">block-screen.js</a></li>
</ul>
<h2><a href="svg.html">Inline SVGs for buttons and links</a></h2>
<p>Preferred <a href="svg.html">SVG code</a> for use in links and buttons.</p>
<h2><a href="dialog.html">Dialog Boxes (Modals and Interstitials)</a></h2>
<p>This <a href="dialog.html">modal example</a> uses role="dialog", role="document", aria-controls, and aria-hidden to create an accessible solution.</p>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li><a href="css/dialog.css" target="_blank">dialog.css</a></li>
<li><a href="js/dialog.js" target="_blank">dialog.js</a></li>
<li><a href="js/block-screen.js" target="_blank">block-screen.js</a></li>
</ul>
<h2><a href="tab-like-navigation.html">Tab-Like Navigation</a></h2>
<p>This <a href="tab-like-navigation.html">tab-like menu example</a> shows two options: one where only one content panel is revealed at a time, and the other where all content is in view and selecting an in-page link scrolls that content into view.</p>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li><a href="css/tab-menu.css" target="_blank">tab-menu.css</a></li>
<li><a href="js/tab-menu.js" target="_blank">tab-menu.js</a></li>
</ul>
<h2><a href="form.html">Form and Error Handling</a></h2>
<ol>
<li>
<p>This <a href="form.html">form example</a> uses label and legend correctly. It also demonstrates accessible error handling.</p>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li><a href="css/form.css" target="_blank">form.css</a></li>
<li><a href="js/form.js" target="_blank">form.js</a></li>
</ul>
</li>
<li>
<p>This <a href="submit-disabling.html">form example with disabled submit</a> shows an accessible solution for the disabled-submit-as-validation design pattern.</p>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li><a href="css/form.css" target="_blank">form.css</a></li>
<li><a href="js/form-with-disabled.js" target="_blank">form-with-disabled.js</a></li>
</ul>
</li>
</ol>
<h2><a href="accordion.html">Accordions/Blinds</a></h2>
<p>This <a href="accordion.html">accordion example</a> is light in aria. It demonstrates the use of aria-owns, aria-controls, and aria-expanded.</p>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li><a href="css/accordion.css" target="_blank">accordion.css</a></li>
<li><a href="js/accordion.js" target="_blank">accordion.js</a></li>
</ul>
<h2><a href="carousel.html">Carousel</a></h2>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li><a href="css/carousel.css" target="_blank">carousel.css</a></li>
<li><a href="js/carousel.js" target="_blank">carousel.js</a></li>
</ul>
<h2><a href="barchart.html">CSS-based Bar Chart</a></h2>
<p>This <a href="barchart.html">barchart example</a> uses HTML/CSS applied to a data table.</p>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li><a href="css/barchart.css" target="_blank">barchart.css</a></li>
</ul>
<h2><a href="spa.html">Single-page Application</a></h2>
<h3>Additional Requirements:</h3>
<ul class="bullet singletons">
<li>the extra css is limited and can be found in the html file.</li>
<li><a href="js/spa.js" target="_blank">spa.js</a></li>
</ul>
<h2><a href="font-sizing-and-contrast.html">Font Sizing, Font Weight, and Font Contrast</a></h2>
<p>For information only. No additional requirements.</p>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/namespacing.js"></script>
<script type="text/javascript" src="js/accessibility-helpers.js"></script>
<!--// Example snippet for your site (Accessibility GitHub Library) //-->
<script>
window.tenonSiteMonitor = {
siteKey: 'Pu86EHLqCOsw',
interval: 60*3
};
</script>
<script src='https://tenon.io/api/monitor.js'></script>
</body>
</html>