forked from sergeicodes/a11ymyths
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
378 lines (321 loc) · 16.7 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
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
<!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>Accessibility Myths</title>
<link rel="stylesheet" href="./css/styles.css" />
<link rel="icon" type="image/x-icon" href="./favicon.ico" />
<meta name="description" content="A small project debunking common accessibility myths." />
<meta name="image" content="https://a11ymyths.com/" />
<meta property="og:title" content="Accessibility Myths" />
<meta property="og:description" content="A small project debunking common accessibility myths." />
<meta property="og:image" content="https://a11ymyths.com/images/og-image.png" />
<meta property="og:image:alt" content="Accessibility Myths Debunked" />
<meta property="og:url" content="https://a11ymyths.com/" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:creator" content="@_sergeikriger" />
<meta name="twitter:title" content="Accessibility Myths" />
<meta name="twitter:description" content="A small project debunking common accessibility myths." />
<meta name="twitter:image" content="https://a11ymyths.com/images/og-image.png" />
<meta name="twitter:image:alt" content="Accessibility Myths Debunked" />
</head>
<body>
<main>
<div class="content">
<nav class="nav">
<ul class="nav__list">
<li class="nav__list-item">
<a class="nav__link" lang="ar" href="/ar/">العربية</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="de" href="/de/">Deutsch</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="en" href="/">English</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="es" href="/es/">Español</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="fr" href="/fr/">Français</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="he" href="/il/">עברית</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="it" href="/it/">Italiano</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="ja" href="/jp/">日本語</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="ru" href="/ru/">Русский</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="pt-br" href="/pt-br/">Português (Brasil)</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="pt" href="/pt/">Português (Portugal)</a>
</li>
<li class="nav__list-item">
<a class="nav__link" lang="zh" href="/zh/">繁體中文</a>
</li>
</ul>
</nav>
<h1>Accessibility Myths</h1>
<p class="stamp">Debunked</p>
<section class="myth">
<h2 class="myth__title">Accessibility only affects a small group of users</h2>
<p>
Not that small. Around <strong>15%</strong> of the world's population, or estimated
<strong>1 billion</strong> people, live with disabilities, they are the world's largest minority. The number
of people with disability is dramatically increasing.
</p>
<a href="https://www.who.int/en/news-room/fact-sheets/detail/disability-and-health" target="_blank"
>More details
<span class="visually-hidden">about Accessibility only affects a small group of users</span></a
>
</section>
<section class="myth">
<h2 class="myth__title">Disabled users don't use my website</h2>
<p>
How can you be so sure? Many people with disabilities like color blindness, limited motor skills, etc. use
websites just like other users. Also, many
<strong>assistive technologies are not detectable</strong> in any way.
</p>
<a href="https://www.w3.org/WAI/people-use-web/" target="_blank"
>More details <span class="visually-hidden">about Disabled users don't use my website</span></a
>
</section>
<section class="myth">
<h2 class="myth__title">Making a website accessible is costly and time-consuming</h2>
<p>
It may not be the case if accessibility is considered from the beginning of the project and a development
team has proper skills. When accessibility has become a habit, the
<strong>development time doesn't change</strong> or changes a little.
</p>
</section>
<section class="myth">
<h2 class="myth__title">We can quickly add accessibility before the release</h2>
<p>
Won't work. Maybe easy things such as alternative text or form labeling may be added at the end, but some
<strong>complex UX should be planned to be accessible</strong>. In some cases, making features accessible at
the end of development process may require the full refactoring.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility is only about adding alternative text to images</h2>
<p>
In fact, missing alternative text for images is
<a target="_blank" href="https://webaim.org/projects/million/">one of the biggest accessibility issues</a>.
But besides this, there are many things to be considered while making accessible website -
<strong>headline structure</strong>, <strong>functional controls</strong>,
<strong>color contrast</strong> and much more.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Web accessibility is just a developer's responsibility</h2>
<p>
It's a team effort. <strong>Designers</strong> create accessible UIs, <strong>developers</strong> build it,
<strong>QA engineers</strong> do the accessibility testing, <strong>PMs</strong> make sure that
accessibility is included in the team processes, <strong>legal team</strong> checks if a product is risk
free from an accessibility perspective, <strong>content managers</strong> adjust content to be compliant.
</p>
<a href="https://accessibility.digital.gov/" target="_blank"
>More details <span class="visually-hidden">about Web accessibility is just a developer's job</span></a
>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility only helps people with disabilities</h2>
<p>
Fortunately <strong>it helps everyone</strong>. It's a known fact that applying accessibility principles
improves overall user experience and makes a website more convenient to use.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Making websites accessible doesn't bring any additional benefits</h2>
<p>
To list just a few of them - more users, more revenue, better reputation, less risks to be sued, better
competence of development teams and many more. At the end doing
<strong>a good thing</strong> doesn't always have to require a profitable reason.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility can be fixed by the accessibility overlay</h2>
<p>
Absolutely no. There is an
<a target="_blank" href="https://overlayfactsheet.com/">initiative</a>
signed by hundreds of professionals which advocates the removal of the web accessibility overlay.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Using automated tools is all I need to do to make my website accessible</h2>
<p>
That would be easy, but no. Usually automated accessibility testing can only find
<a target="_blank" href="https://marcysutton.com/evinced-automated-accessibility-testing"
>30-50% of all accessibility issues</a
>. In fact, some websites
<a
target="_blank"
href="https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/"
>can be built in a way</a
>
that automated tests will pass even though the website is totally inaccessible.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility is only for blind users</h2>
<p>
Certainly, accessibility affects the experience of blind users, but it also users with other visual
disabilities such as color blindness. And of course, it also benefits people with other forms of disability,
related to hearing, mobility, speech or cognition. It also works for elderly users. In short, for all users.
It is <strong>essential for some but useful for all</strong>.
</p>
<a href="https://www.w3.org/WAI/fundamentals/accessibility-intro/" target="_blank"
>More details <span class="visually-hidden">about Accessibility is only for blind users</span></a
>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility is optional</h2>
<p>
Until your company got sued. Learn about the
<a
href="https://www.nad.org/2011/06/16/nad-files-disability-civil-rights-lawsuit-against-netflix/"
target="_blank"
>Netflix</a
>
and
<a href="https://www.cnbc.com/2019/10/07/dominos-supreme-court.html" target="_blank">Domino</a>
cases to understand that the price for not being accessible may be too high. There are
<a href="https://www.w3.org/WAI/policies/" target="_blank">many laws</a>
that may require a website to be accessible.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility is only about preventing lawsuits</h2>
<p>
Accessibility is about your users. Of course, preventing lawsuits is important for any company, but
<strong>user satisfaction</strong> and <strong>company reputation</strong> bring a lot of value as well.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility is only about following the WCAG</h2>
<p>
Usually it starts from
<a href="https://www.w3.org/WAI/WCAG21/quickref/" target="_blank">WCAG</a>, but in real life a compliant
website may still not be fully accessible. Accessibility is about understanding the need of all users as
well as about empathy and awareness.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility can be achieved by only adding ARIA attributes</h2>
<p>
Of course,
<a href="https://www.w3.org/WAI/standards-guidelines/aria/" target="_blank">ARIA</a>
is an important part of accessibility, but the golden rule of ARIA is
<a href="https://w3c.github.io/using-aria/#rule1" target="_blank">"Don't Use ARIA"</a>. Many ARIA attributes
may not be necessary if
<a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML#good_semantics" target="_blank"
>semantic HTML</a
>
tags are used.
</p>
</section>
<section class="myth">
<h2 class="myth__title">We don't need to be compliant</h2>
<p>
Maybe you need. There are a number of laws and regulations which may require a website to follow
accessibility principles. It's definitely worth checking them.
</p>
<a href="https://www.w3.org/WAI/policies/" target="_blank"
>More details <span class="visually-hidden">about We don't need to be compliant</span></a
>
</section>
<section class="myth">
<h2 class="myth__title">Only accessibility experts can implement accessibility fixes</h2>
<p>
Luckily no. Everyone with some accessibility skills can implement and test websites for accessibility. In
fact, it's not only easy to learn, but sometimes it's quite a fun process. It doesn't require a specific
experience to run the
<a href="https://www.w3.org/WAI/test-evaluate/preliminary/" target="_blank">easy checks</a>.
</p>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility is like a feature - you do it once and then you have it</h2>
<p>
Accessibility is a practice, not a feature. It means that one should take care of it regularly, both when
working on features or doing maintenance work. The knowledge about accessibility should be passed on when a
new team member joins or when requirement changes.
</p>
<a href="https://ethanmarcotte.com/wrote/accessibility-is-not-a-feature/" target="_blank"
>More details
<span class="visually-hidden"
>about Accessibility is like a feature - you do it once and then you have it</span
></a
>
</section>
<section class="myth">
<h2 class="myth__title">
Accessibility can be fixed by providing a separate website version for disabled people
</h2>
<p>
That was the wrong assumption back then. Since that time, many development teams have
<strong>learned the hard way</strong> that maintaining several versions of the website and keeping all the
content up to date <strong>costs much more</strong> than creating the only one fully accessible website.
</p>
</section>
<section class="myth">
<h2 class="myth__title">People with disabilities don't use the web</h2>
<p>
That's wrong. In fact, in some cases internet is
<strong>the only way</strong> how disabled people can communicate to the world. Also, where "abled people"
use their natural feelings such as sight and hearing,
<strong>people with disabilities must rely on technologies</strong>.
</p>
<a href="https://www.w3.org/WAI/people-use-web/" target="_blank"
>More details <span class="visually-hidden">about People with disabilities don't use the web</span></a
>
</section>
<section class="myth">
<h2 class="myth__title">Blind people don't watch movies</h2>
<p>
They definitely do. With the help of
<strong>audio descriptions</strong> they can watch and listen to any media content as all other people do.
</p>
<a href="https://www.w3.org/WAI/media/av/description/" target="_blank"
>More details <span class="visually-hidden">about Blind people don't watch movies</span></a
>
</section>
<section class="myth">
<h2 class="myth__title">Accessibility can only be tested by disabled people</h2>
<p>
Well, usually disabled people are the best testers - they use assistive technologies full time. However,
<strong>everyone can learn</strong> how to test websites for accessibility.
</p>
<a href="https://www.w3.org/WAI/test-evaluate/" target="_blank"
>More details
<span class="visually-hidden">about Accessibility can only be tested by disabled people</span></a
>
</section>
<p>Show this website to your manager.</p>
</div>
</main>
<footer>
<div class="content">
<p>
© 2022
<a target="_blank" href="https://www.sergeikriger.com/">Sergei Kriger</a>. All rights reserved.
</p>
<p>
Built by
<a target="_blank" href="https://en.wikipedia.org/wiki/Hand">Hands</a>. Hosted on
<a target="_blank" href="https://www.netlify.com/">Netlify</a>. The source code is on
<a target="_blank" href="https://github.com/sergeicodes/a11ymyths">GitHub</a>. Follow
<a target="_blank" href="https://twitter.com/_sergeikriger">@_sergeikriger</a>.
</p>
</div>
</footer>
</body>
</html>