-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·218 lines (150 loc) · 5.29 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
<!DOCTYPE html>
<html>
<head>
<title>Accessibility in one sprint</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Zilla+Slab:500,700">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<textarea id="source">
class: center, middle
# Accessibility in one sprint
.small[[@PMK Potluck Lightening Talk](https://publicmediakitchen.github.io/toolkit/public-media-potluck-june-2018.html) | Fri, June 15, 2018]
<!-- .small[[@ONA Boston Lightening Talk](https://www.meetup.com/ONA-Boston/events/240919759/) | Tues, Aug 1, 2017]
-->
Daigo Fujiwara, .small[Web Developer, WBUR, http://wbur.org @DaigoFuji]
<!---
Using Ignite style 20 slides x 15 sec = 5 min format
-->
---
class: center, middle, white
## *Caveat
You should spend more than one sprint on web accessibility.
<!---
Why did I want to do this talk? I wanted to demystify accessibility.
-->
---
class: center, middle, white, big-img
<!---
I am not an accessibility expert.
You hear about ADA compliance law suit but spirit of ADA is to give more people access to information, contents that you create.
-->
---
class: center, middle
## **Americans with Disabilities Act** ("ADA") and **Section 508 of the Rehabilitation Act**
<!-- The ADA is a civil rights law (1990) that prohibits discrimination against individuals with disabilities in all areas of public life, including jobs, schools, transportation, and all public and private places that are open to the general public.
In 1998, Congress amended the Rehabilitation Act of 1973 to require Federal agencies to make their electronic and information technology (EIT) accessible to people with disabilities.
-->
---
class: center, middle, white, big-img
---
class: center, middle
# Make the website **NOT inaccesible**
<!---
Access to meaningful and effective contents on the Internet
integral part of our modern life
Universal Design
"As more and more of our social infrastructure is made available on the Internet - in some cases, exclusively online - access to information and electronic technologies is increasingly becoming the gateway civil rights issue for individuals with disabilities (Non-discrimination, Equal Opportunity)." - Bobby Silverstein, the behind-the-scenes architect of the Americans with Disabilities Act (ADA)
-->
---
class: center, middle, inverse
# Assistive Technology
Screen Reader (blind), Zoom (low vision), Closed Captioning (deaf) etc.
---
class: middle
## Screen Reader landscape
- Apple Safari + [Voice Over](https://www.apple.com/accessibility/mac/vision/)
- Windows IE + [JAWS](http://www.freedomscientific.com/Products/Blindness/JAWS)
- Windows IE + [NVDA](https://www.nvaccess.org/)
- [Orca](https://wiki.gnome.org/Projects/Orca)
<!---
JAWS (Job Access With Speech)
NVDA (NonVisual Desktop Access)
Orca is open source
-->
---
class: center, middle, white, big-img
## Apple Voice Over
---
class: center, middle, white, big-img
Turning it on
Settings > General > Accessibility
---
class: center, middle, white, big-img
---
class: middle
## VoiceOver Useful keys:
VO key is "Control-Option" by default
- VO-left/right/up/down: Navigate
- VO-A: Read
- VO-B: Read from beginning
- Control: Pause reading
- VO-D: Dock
- VO-Z: repeat what was just read
---
class: middle, inverse
# Roter?
- VO-U
---
class: center, middle, white, big-img
<video width="608" height="480" controls loop>
<source src="img/roter.m4v" type="video/mp4">
<source src="img/roter.mov" type="video/ogg">
Your browser does not support the video tag.
</video>
---
class: center, middle
# WCAG 2.0
[Web Content Accessibility Guidelines](https://www.w3.org/WAI/WCAG20/quickref/)
<!---
WCAG PRINCIPLES
- Perceivable (able to see/hear - not hidden)
- Operable (able to use)
- Understandable
- Robust
-->
---
class: center, middle, big-img
## Alt tag
---
class: middle
### Accessible Rich Internet Applications (ARIA)
- aria-required
- aria-invalid
- aria-describedby (Use id on a page)
- aria-labeledby
- aria-label
---
class: middle
## Resources
-W3C [Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/Overview.html)
- Microsoft's [Inclusive Design](https://www.microsoft.com/en-us/design/inclusive)
- Google [Accessibility](https://www.google.com/accessibility/for-developers.html)
- [Perkins School for the Blind](http://www.perkins.org/get-involved/events/achieving-web-accessibility-make-sure-your-online-presence-works-for-everyone)
---
class: middle, white
##In conclusion
* Don't be afraid
* Responsive Design and Mobile First approach helps Accessibility
* Turn VoiceOver and check your site out
---
class: middle, center, white, big-img
<img src="img/velma.gif" alt="" width="500">
**Thank you!** <br>https://github.com/daigofuji/a11y-in-one-sprint
@DaigoFuji on <i class="fab fa-twitter"></i> & <i class="fab fa-github"></i>
</textarea>
<script src="js/remark-latest.min.js">
</script>
<script>
var slideshow = remark.create({ ratio: "16:9" });
</script>
</body>
</html>