-
Notifications
You must be signed in to change notification settings - Fork 224
/
Copy pathindex.html
177 lines (177 loc) · 6.46 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
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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Introduction to Accessibility</title>
<link rel="stylesheet" href="./css/style.css" />
</head>
<body>
<header>
<ul>
<li><a href="./index.html">Home</a></li>
<li>
<a href="./screen-readers/index.html">Screen Readers</a>
</li>
<li>
<a href="./accessible-html/index.html">Accessible HTML</a>
</li>
<li>
<a href="./aria/index.html">ARIA</a>
</li>
<li>
<a href="./focus-management/index.html">Focus Management</a>
</li>
<li>
<a href="./visual-considerations/index.html">Visual Considerations</a>
</li>
<li>
<a href="./tooling/index.html">Tooling</a>
</li>
<li>
<a href="./resources/index.html">Resources</a>
</li>
</ul>
</header>
<div id="container">
<h1>Introduction to Accessibility</h1>
<p>This is the website for my Frontend Masters class on Accessibility.</p>
<p>
You can find the codebase for it
<a href="https://github.com/jkup/learn-a11y">here</a>.
</p>
<h2>About Me</h2>
<img src="./static/jon.jpeg" alt="Jon Kuperman Avatar" />
<p>
Hello. My name is Jon Kuperman. I've been a software engineer for the
last 12 years. I spent most of my career doing web development with a
focus on accessibility and web performance.
</p>
<h2>What is Accessibility</h2>
<blockquote>
When websites and web tools are properly designed and coded, people with
disabilities can use them. However, currently many sites and tools are
developed with accessibility barriers that make them difficult or
impossible for some people to use. Making the web accessible benefits
individuals, businesses, and society.
</blockquote>
<h2>Similar Fields</h2>
<ul>
<li>Web Performance</li>
<li>Internationalization</li>
<li>UI Design</li>
</ul>
<blockquote>
Web accessibility means that people with disabilities can use the Web.
</blockquote>
<p>
More specifically, Web accessibility means that people with disabilities
can <b>perceive, understand, navigate, and interact</b> with the Web,
and that they can <b>contribute to the Web</b>.
</p>
<h2>Some Statistics</h2>
<ul>
<li>
26 percent (one in 4) of adults in the United States have some type of
disability.
</li>
<li>2 in 5 adults age 65 years and older have a disability</li>
<li>
20 percent of people in the US (48 million people) report some degree
of hearing loss, and 29 million of them could benefit from using
hearing aids.
</li>
<li>
2.3 percent of people in the US (7 million people) report having a
visual disability, and 1 million people in the US are legally blind.
</li>
<li>
16 percent of people in the US (39 million people) have difficulties
with their physical functioning. 17.1 million people would find it
very difficult or impossible to walk unassisted for a quarter mile.
</li>
<li>
Roughly 8 million people in the US have an intellectual disability,
including 425,000 children.
</li>
</ul>
<h2>Types of disabilities</h2>
<ul>
<li>Mobility and physical</li>
<li>Cognitive and neurological</li>
<li>Visual</li>
<li>Hearing</li>
</ul>
<h2>The web is already accessible (even if your website is not)</h2>
<p>
For example, let's check out
<a href="http://info.cern.ch/hypertext/WWW/TheProject.html">
The first website </a
>. It's very easy to use with assistive technologies.
</p>
<h2>Reasons developers should learn accessibility</h2>
<ul>
<li>It's fun!</li>
<li>We're the ones making it inaccessible</li>
<li>Human Rights</li>
<li>Legal Issue</li>
<li>Reach a larger audience</li>
<li>Impactful</li>
<li>Makes you a specialist</li>
</ul>
<h2>Amazing ways people use the web</h2>
<h3>Keyboard Only</h3>
<img src="./static/keyboard.jpg" alt="high contrast keyboard" />
<h3>Head Wand</h3>
<img src="./static/head-wand.jpeg" alt="head wand" />
<h3>Mouth Stick</h3>
<img src="./static/mouth-stick.jpg" alt="mouth stick" />
<h3>Single Switch</h3>
<img src="./static/single-switch.jpg" alt="single switch" />
<h3>Screen Reader</h3>
<img src="./static/screen-reader.jpg" alt="screen reader" />
<h2>Curb cut effect</h2>
<img src="./static/curb-cut.jpeg" alt="Lady pushing stroller up ramp" />
<blockquote>
The Curb-Cut Effect, in its essence, asserts that an investment in one
group can cascade out and up and be a substantial investment in the
broader well-being of a nation -- one whose policies and practices
create an equitable economy, a healthy community of opportunity, and
just society.
</blockquote>
<h2>Accessibility Standards</h2>
<h3>Web Content Accessibility Guidelines (WCAG)</h3>
<a href="https://www.w3.org/WAI/standards-guidelines/wcag/">WCAG</a>
specifies three different
<a href="https://www.w3.org/WAI/WCAG21/Understanding/conformance#levels"
>conformance levels</a
>
they are:
<ul>
<li>A (lowest)</li>
<li>AA (mid range)</li>
<li>and AAA (highest)</li>
</ul>
<blockquote>
Level A sets a minimum level of accessibility and does not achieve broad
accessibility for many situations. For this reason, UC recommends AA
conformance for all Web-based information.
</blockquote>
<h3>WebAIM</h3>
<p>
<a href="https://webaim.org/">WebAIM</a>
provides a handy
<a href="https://webaim.org/standards/wcag/checklist">checklist</a> with
their recommendations.
</p>
<p>WebAIM specifies that accessible websites should be:</p>
<ul>
<li>Perceivable</li>
<li>Operable</li>
<li>Understandable</li>
<li>Robust</li>
</ul>
</div>
</body>
</html>