-
Notifications
You must be signed in to change notification settings - Fork 8
/
index.html
163 lines (155 loc) · 6.18 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<LINK href="stylesheet.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Web Accessibility 101</title>
</head>
<body>
<h1>Designing for Inclusion</h1>
<article class="intro">
<p> Contrary to a common belief, accessibility does not refer only to permanent conditions, limitations, impairments or disability. Sometimes exclusion is temporary - even a short-term injury or context affects the way people interact with the world around them, if only for a short time. Think about looking into a bright light, wearing a cast, or ordering dinner in a foreign country. </p>
<p>Sometimes exclusion is situational. As people move through different environments, their abilities can also change dramatically. In a loud crowd, they can’t hear well. In a car, they’re visually impaired. New parents spend much of their day doing tasks one-handed. An overwhelming day can cause sensory overload. What’s possible, safe, and appropriate is constantly changing.</p>
<p>In fact, many of the solutions designed as <a href="https://www.atia.org/at-resources/what-is-at/" tabindex="1">assistive technology</a> were later adapted by the general public. Did you know that electric toothbrushes were initially designed for people with weak arm muscles? </p>
<p>How amazing would it be if we designed everyday objects, web apps, buildings or entertainment for all users! </p>
<p>Together with your pair (or alone, if you prefer), explore the table below. You can hover over each field or use keyboard navigation to uncover the descriptions. Try to think of the solutions to the problems in the left column! </p>
</article>
<div class="table">
<div class="box"></div>
<div class="box"> Playing FIFA</div>
<div class="box"> Using maps</div>
<div class="box"> Listening to news</div>
<div class="box"> Calling 911</div>
<div class="box"> Taking test in noise</div>
<div class="box"> Rushing for a bus</div>
<div class="box"> Watching tutorials</div>
<div class="box"> Permanent</div>
<div class="box" tabindex="1">
<img src="./img/one-arm.png"
class="pic"
alt=""/>
Person with one arm
</div>
<div class="box" tabindex="4">
<img src="./img/blind.png"
class="pic"
alt=""/>
Blind person
</div>
<div class="box" tabindex="7">
<img src="./img/deaf.png"
class="pic"
alt=""/>
Deaf person / Deaf
</div>
<div class="box" tabindex="10">
<img src="./img/non-verbal.png"
class="pic"
alt=""/>
Non-verbal person
</div>
<div class="box" tabindex="13">
<img src="./img/neuroatypical.png"
class="pic"
alt=""/>
Neuroatypical person
</div>
<div class="box" tabindex="16">
<img src="./img/wheelchair-user.png"
class="pic"
alt=""/>
Wheelchair user
</div>
<div class="box" tabindex="18">
<img src="./img/weak-i.png"
class="pich"
alt=""/>
Weak internet
</div>
<div class="box"> Temporary </div>
<div class="box" tabindex="2">
<img src="./img/arm-injury.png"
class="pic"
alt=""/>
Person with arm injury
</div>
<div class="box" tabindex="5">
<img src="./img/cataract.png"
class="pic"
alt=""/>
Person with cataract
</div>
<div class="box" tabindex="8">
<img src="./img/ear-infection.png"
class="pic"
alt=""/>
Person with ear infection
</div>
<div class="box" tabindex="11">
<img src="./img/laryngitis.png"
class="pic"
alt=""/>
Person with laryngitis
</div>
<div class="box" tabindex="14">
<img src="./img/concussion.png"
class="pic"
alt=""/>
Person with concussion
</div>
<div class="box" tabindex="17">
<img src="./img/broken-leg.png"
class="pic"
alt=""/>
Person with broken leg
</div>
<div class="box" tabindex="19">
<img src="./img/traveling.png"
class="pic"
alt=""/>
Traveling person
</div>
<div class="box"> Situational</div>
<div class="box" tabindex="3">
<img src="./img/parent.png"
class="pic"
alt=""/>
New parent
</div>
<div class="box" tabindex="6">
<img src="./img/distracted.png"
class="pic"
alt=""/>
Distracted driver</div>
<div class="box" tabindex="9">
<img src="./img/bartender.png"
class="pic"
alt=""/>
Bartender</div>
<div class="box" tabindex="12">
<img src="./img/accent.png"
class="pic"
alt=""/>
Person with heavy accent</div>
<div class="box" tabindex="15">
<img src="./img/stress.png"
class="pic"
alt=""/>
Person under stress</div>
<div class="box" tabindex="17">
<img src="./img/snow-mounds.png"
class="pic"
alt=""/>
Snow mound
</div>
<div class="box" tabindex="20">
<img src="./img/in-metro.png"
class="pic"
alt=""/>
Person in metro
</div>
</div>
</body>
</html>