-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
706 lines (620 loc) · 29.3 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
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Accessibility Matters.</title>
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/white.css">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="lib/css/zenburn.css">
<!-- Printing and PDF exports -->
<script>
var link = document.createElement( 'link' );
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = window.location.search.match( /print-pdf/gi ) ? 'css/print/pdf.css' : 'css/print/paper.css';
document.getElementsByTagName( 'head' )[0].appendChild( link );
</script>
</head>
<body>
<div class="reveal">
<div class="slides">
<section data-background-image="images/a11y-lead.jpg" data-background-size="50% auto" data-background-position="left">
<h2 style="margin-left: 52%; text-align: left;">
Accessibility is <i>important</i>. Let’s do something about it.
</h2>
<aside class="notes">
Just as the title says, I’m here to talk to y’all about accessibility, why it’s super important, how we’re dealing with it at Vox Media, and I’m also going to leave you with some tips to start implementing it in your work.
</aside>
</section>
<section>
<h1>Hi! I’m <i>Ally Palanzi</i>.</h1>
<p class="fragment" data-fragment-index="1">Senior Front-End Engineer @ Vox Media</p>
<p><a class="fragment" data-fragment-index="2" href="https://www.twitter.com/mylifeasalllly">@mylifeasalllly</a></p>
<aside class="notes">
My name is Ally Palanzi and I’m a senior front-end engineer working on our content publishing platform at Vox Media.
</aside>
</section>
<section>
<h1><center><a href="http://allypalanzi.com/a11y/slides">allypalanzi.com/a11y/slides</a></center></h1>
<aside class="notes">
At this URL you can find slides, if you want to follow along. I'll also tweet this!
<br><br>
How many of you include accessibility in your work flow currently?
<br><br>
So what is accessibility anyways?
</aside>
</section>
<section>
<h1><i>Accessibility</i> (a11y) refers to the design of products, devices, services, or environments for people who experience disabilities.</h1>
<aside class="notes">
Read the dang slide
</aside>
</section>
<section>
<h1>
<small>In 2001 the World Health Organization redefined disability as:</small> <i>“a mismatch in interaction between the features of a person’s body and the features of the environment in which they live.”</i>
</h1>
<aside class="notes">
read the slide
</aside>
</section>
<section>
<h1>Our work can <i>create</i> or <i>remove</i> mismatches in interaction.</h1>
<aside class="notes">
As designers, developers and people who make stuff, our work can create or remove these mismatches in interaction
</aside>
</section>
<section>
<h1>The impact of disability is radically changed on the Web because the Web <i>removes barriers</i> to communication and interaction that many people face in the physical world.</h1>
<cite><a href="https://www.w3.org/standards/webdesign/accessibility">W3C Accessibility</a></cite>
</section>
<section>
<h1>By designing with disabilities in mind, we create better products for <i>everyone</i>.</h1>
<aside class="notes">
By designing with disabilities in mind, we create better products for everyone.
<br><br>
It’s important to not think of disability as something that only effects a subset of users. It’s not something you can tell from your analytics, you can’t see who’s using a screen reader on your webpage, and there’s not a great way to test for if folks are only using keyboards to interact with your site.
</aside>
</section>
<section>
<div class="left">
<h1>Disability affects all of us at some point.</h1>
<ul>
<li class="fragment" data-fragment-index="1">Permanent</li>
<li class="fragment" data-fragment-index="2">Temporary</li>
<li class="fragment" data-fragment-index="3">Situational</i>
</ul>
</div>
<div class="right">
<img src="images/disabilities.png" alt="How four categories of impairments (touch, see, hear, and speak) apply to users in mild, moderate, and severe instances.">
<cite><a href="https://www.microsoft.com/en-us/design/practice#toolkit">Microsoft Design</a></cite>
</div>
<aside class="notes">
Disability can effect anyone at some point in their life, or even all within a day.
<br><br>
Disability can be permanent, temporary, or situational.
<br><br>
A user who might be using your website with a mouse one morning could have a child in their arms later that night, and only able to interact with your page via a keyboard.
</aside>
</section>
<section>
<h1>Ok, but why should we <i>care</i>?</h1>
<p class="fragment" data-fragment-index="1">a.k.a. what to tell your boss</p>
<aside class="notes">
So, I get it. It can be hard to advocate for accessibility when you don’t have analytics to prove progress or improvements, but you’ve just gotta trust the facts.
</aside>
</section>
<section>
<h1>It’s better for business</h1>
<ul>
<li class="fragment" data-fragment-index="1">Device independence</li>
<li class="fragment" data-fragment-index="2">Usability</li>
<li class="fragment" data-fragment-index="3">Design for older users</li>
<li class="fragment" data-fragment-index="4">SEO</li>
</ul>
<aside class="notes" style="font-size: .9em;">
Building accessible products and websites is truly better for business.
<br><br>
A lot of thinking about accessibility feeds into other best practices such as device independence — your product should work across devices.
<br><br>
your product should be usable,
older users should be able to use your site,
<br><br>
and a word all important execs and clients like to hear: SEO. If a screen reader can access your site properly, so can google’s indexing crawler.
</aside>
</section>
<section>
<h1>Case studies show that accessible websites have better <i>search results</i>, <i>reduced maintenance</i>, and <i>increased audience reach</i>.</h1>
<cite><a href="https://www.w3.org/standards/webdesign/accessibility">W3C Accessibility Overview</a></cite>
<aside class="notes">
Case studies show that accessible websites are just better overall — better search results, less maintenance, and increased audience reach.
</aside>
</section>
<section>
<h1>Accessibility supports <i>social inclusion</i>, allowing us to hire more diversely & reach a diverse audience.</h1>
<aside class="notes">
Everyone should want to hire more diversely & reach diverse audiences — accessibility supports social inclusion
</aside>
</section>
<section>
<h1>Scary legal things!!</h1>
<aside class="notes">
Also scary legal things! Companies like Netflix and Sweegreen have already experienced lawsuits for having accessibility issues.
<br><br>
Things like creating internal tools that employees are required to use to get their job done, if inaccessible, might mean that you can’t hire as diversely as you should, or it might mean you’re disadvantaging disabled employees to do their job.
<br><br>
This is especially important for us at Vox as we create tools for our reporters to publish content on our websites.
</aside>
</section>
<section>
<h1>Many countries are recognizing and acting upon the need to ensure access to the web for people with disabilities.</h1>
<cite><a href="http://webaim.org/articles/laws/world/">Web Aim</a>
<aside class="notes">
Many countries are recognizing and acting upon the need to ensure access to the web for people with disabilities.
</aside>
</section>
<section>
<h1>A common approach throughout the world is for nations to adopt the <i>Web Content Accessibility Guidelines</i>.</h1>
<aside class="notes">
WCAG is developed through the W3C process & explains how to make web content more accessible to people with disabilities
</aside>
</section>
<section>
<h1>USA 🇺🇸</h1>
<h3><i>Section 508 of the Rehabilitation Act</i> means that all users, regardless of disability status, can access technology.</h3>
<aside class="notes">
It is a mandate for government agencies, federally funded non-profits, public colleges and schools to pass a certain standard of accessibility.
</aside>
</section>
<section>
<h1>Australia 🇦🇺</h1>
<h3><i>World Wide Web Access: Disability Discrimination Act Advisory Notes</i> requires equal access for people with a disability where it can reasonably be provided.</h3>
<aside class="notes">
Similarly to the US 508 compliance this mandates for government, banking, and education sites to be accessible.
</aside>
</section>
<section>
<h1>Europe 🇪🇺</h1>
<h3><i>EU Charter of Fundamental Rights Article 21</i> prohibits discrimination based on grounds of disability, among others.</h3>
</section>
<section>
<h1>...and more!</h1>
<cite><a href="http://webaim.org/articles/laws/world/">WebAIM World Laws</a>
<aside class="notes">
Each country is slightly different, but it's important to be aware of what accessibility laws pertain to your work.
</aside>
</section>
<section>
<h1>And if this still doesn't convince your stakeholders...</h1>
<p class="fragment" data-fragment-index="1">Ask for forgiveness later</p>
<aside class="notes">
Build accessibility in! No one is going to be mad at you for making your products accessible (I hope).
</aside>
</section>
<section>
<h1>How we’re solving a11y at <i>Vox Media</i>.
<aside class="notes">
So, like I said there’s a lot of reasons to care about accessibility.
<br><br>
At Vox, we’ve grown a lot over the past few years. We’re building lots and lots of tools daily.
<br><br>
And it’s not something we’ve officially ever considered, until now.
</aside>
</section>
<section>
<h1>Our foray into accessibility didn’t really get started until <i>May 2016</i>.</h1>
<aside class="notes">
We really didn’t get started until just a few months ago, but we’re already seeing big changes across the board.
</aside>
</section>
<section>
<h1>We’ve always had advocates for a11y.</h1>
<img src="images/slack.png" alt="A slack screenshot showing the channel was made in Feb 2015">
<p>An accessibility slack channel was created in early 2015.</p>
<aside class="notes">
We’ve always had advocates for Accessibility. In early 2015, one of my coworkers created this slack channel where those of us who were interested would drop links and share knowledge. It took a while for us to get much past that.
</aside>
</section>
<section>
<h1>Lots of talking.</h1>
<img src="images/minivax1.png" alt="A slack convo talking about planning an accessibility meetup">
<img src="images/minivax2.png" alt="A slack convo talking about planning an accessibility meetup">
<aside class="notes">
We talked a lot, trying to figure out just how we could really start including accessibility in our work-flow.
<br><br>
At Vox Media, we have a yearly hackathon that we call Vax where we can work on pretty much whatever we want.
<br><br>
EXPLAIN MINI VAX
</aside>
</section>
<section data-background-image="images/minivaxnotes.png" data-background-size="50% auto" data-background-position="right">
<div class="left">
<h1>Two Days</h1>
<ul>
<li class="fragment" data-fragment-index="1">Brainstorming</li>
<li class="fragment" data-fragment-index="2">Speaker</li>
<li class="fragment" data-fragment-index="3">Documentation</li>
<li class="fragment" data-fragment-index="4">Planning</li>
</ul>
</div>
<aside class="notes">
Realistically, we couldn’t take too much time away from our day to days to get this done.
<br><br>
So we had two days.
<br><br>
We decided we wanted to have some sort of training or at least hear from other companies who have implemented accessibility practices.
<br><br>
So we reached out to Viget!! And Jeremy Fields came up to our offfice for an afternoon to talk about all things accessibility.
<br><br>
After digesting all of what we learned, we spent the entire second day writing documentation.
</aside>
</section>
<section>
<h1>We wrote a lot of docs!</h1>
<img src="images/docs.png" alt="screenshot of documentation folder">
<aside class="notes">
A lot of documentation.
<br><br>
We decided to break our docs into role specific guidelines that way it would be simpler to spread it across our team with specific todos depending on the role.
</aside>
</section>
<section>
<h1>Our Guiding <i>Principles</i></h1>
<asie class="notes">
We came up with some guiding principles to consider when thinking about accessibility:
</asie>
</section>
<section>
<h1>People want to access our content and use our tools; let’s make it easy for them.</h1>
</section>
<section>
<h1>We don’t make assumptions about our users.</h1>
<aside class="notes">
As I mentioned before it’s really difficult to tell what disabilities may be affecting your users.
</aside>
</section>
<section>
<h1>This is where the industry is going. Get on board or get left behind.</h1>
</section>
<section>
<h1>Accessibility is everyone’s responsibility.</h1>
<aside class="notes">
We didn’t want to be known as the “accessibility police” so we wanted to ensure that while reading these documents, everyone understood the importance.
</aside>
</section>
<section>
<h1>We shared internal guidelines</h1>
<img src="images/fieldguide.png" alt="screenshot of our internal documentation site">
<aside class="notes">
This turned out to be super successful! We spread them around to our teams and people read them and loved them.
<br><br>
We wrote articles on our editorials internal documentation website
</aside>
</section>
<section>
<h1>We ran knowledge shares</h1>
<img src="images/storytellingblog.png" alt="screenshot of our Storytelling Studio blogpost">
<aside class="notes">
We began giving presentations to any team tha would let us
</aside>
</section>
<section>
<h1>We began to incorporate it into <i>every</i> project</h1>
<img src="images/verge.png" alt="screenshot of our Verge contrast tests">
</section>
<section>
<h1>Keeping people accountable</h1>
<ul>
<li class="fragment" data-fragment-index="1">Integrating accessibility into QA process</li>
<li class="fragment" data-fragment-index="2">Treating it as any other feature in a project</li>
<li class="fragment" data-fragment-index="3">Celebrating wins!</li>
</ul>
<aside class="notes">
And we started some practices to keep people accountable like including a11y into our QAing process, treating it just as any other feature in a project and trying to celebrate wins where we could.
</aside>
</section>
<section>
<h1>How can we share them with the world?</h1>
<aside class="notes">
When we first wrote all of these docs, we had talked about open sourcing them however it was out of scope for the two day hackathon. Because of our successes with sharing it within the company, we really wanted to figure out how to share it with the world.
<br><br>
Lucky for us, it was nearing our yearly hackathon in July, Vax.
</aside>
</section>
<section data-background-image="images/vax.png" data-background-size="50% auto" data-background-position="right">
<div class="left">
<h1>Vax 2016!</h1>
<p>2.5 days figuring out the best way to open source our documentation</p>
</div>
<aside class="notes">
We spent two days in Chicago fleshing out our guidelines and figuring out what kind of way we wanted to share it. We considered just releasing documentation as is on a small stie but started brainstorming how we truly used these documents.
</aside>
</section>
<section>
<h1><center><i><a href="http://accessibility.voxmedia.com">accessibility.voxmedia.com</a></i></center></h1>
<aside class="notes">
Our docs had been working out well for us, and we wanted to share them. Better yet -- we wanted people to contribute to them
</aside>
</section>
<section>
<img src="images/a11y.gif" alt="gif of user using accessibility.voxmedia.com">
<aside class="notes">
One of my teammates, a designer, Sanette, had started including an accessibility check list when working on projects.
<br><br>
Because of how she was using these docs, we thought that a checklist builder might be useful for everyone.
<br><br>
So after two days — we launched acccessibility.voxmedia.com
<br><br>
We have the site divided into the same sections we created documentation for — designers, engineers, projects managers, qa, and editorial, and it allows you to select the items relevant to your projects and outputs a list for you to copy out at the end. It also includes tons of links to resources and tools.
<br><br>
We got a lot of love for it on the internet! And even a few open source contributions. This was exciting for us!!
</aside>
</section>
<section>
<h1><i>Accessibility</i> best practices* for designers & developers</h1>
<p>*Not all, but some good ones.</p>
<aside class="notes">
Okay, so enough of that. I’m going to teach you something you can start using immediately.
</aside>
</section>
<section>
<h1>Make sure there is enough contrast between text and its background color.</h1>
<center>
<img src="images/button.png" alt="examples of button contrast">
</center>
</section>
<section>
<h1>Don't indicate important information using color alone</h1>
<center>
<img src="images/link.png" alt="examples of links, one with only color, one has an underline">
</center>
</section>
<section>
<h1>Pair values of colors together (not only hues) to increase contrast</h1>
<center>
<img src="images/color.png" alt="examples of colors">
</center>
</section>
<section>
<h1>Design accessible forms</h1>
<p>Fields should have labels that are always present, error messages should be clear</p>
<center>
<img src="images/form.png" alt="examples of forms">
</center>
</section>
<section>
<h1>Build accessible forms</h1>
<ul>
<li class="fragment" data-fragment-index="1">Always have labels, don’t rely on placeholder text</li>
<li class="fragment" data-fragment-index="2">Labels should not disappear on form focus</li>
<li class="fragment" data-fragment-index="3">Use fieldset and legend for larger forms like a checklist</li>
</ul>
<pre><code class="html" data-trim data-escape>
<label for="name">Name:</label>
<input id="name" type="text" name="name">
<fieldset>
<legend>Select your pizza toppings:</legend>
<input id="ham" type="checkbox" name="toppings" value="ham">
<label for="ham">Ham</label>
<input id="pepperoni" type="checkbox" name="toppings" value="pepperoni">
<label for="pepperoni">Pepperoni</label>
</fieldset>
</code></pre>
</section>
<section>
<h1>Use semantic HTML</h1>
<div class="left">
<ul>
<li class="fragment" data-fragment-index="1">Limit div soup, strip unnecessary HTML elements</li>
<li class="fragment" data-fragment-index="2">Use headings <code class="html">h1-h6</code> for content structure</li>
<li class="fragment" data-fragment-index="3">Avoid skipping headings in the same sections</li>
<li class="fragment" data-fragment-index="4">It’s okay to have multiple of the same heading on a page.</li>
</ul>
</div>
<div class="right">
<pre><code class="html" data-trim data-escape>
<html lang="en">
<head>
<title></title>
</head>
<body>
<header></header>
<nav></nav>
<section></section>
<article></article>
<aside></aside>
<footer></footer>
</body>
</html>
</code></pre>
</div>
<cite><a href="http://www.w3schools.com/html/html5_semantic_elements.asp">W3C HTML5 Semantic Elements</a></cite>
</section>
<section>
<h1>HTML Landmarks</h1>
<ul>
<li class="fragment" data-fragment-index="1">These landmarks help define specific areas that a user might want to seek out and can save them a lot of time.</li>
<li class="fragment" data-fragment-index="2"><code class="html"><header></code> for role="banner"</li>
<li class="fragment" data-fragment-index="3"><code class="html"><main></code> for role="main"</li>
<li class="fragment" data-fragment-index="4"><code class="html"><nav></code> for role="navigation"</li>
<li class="fragment" data-fragment-index="5"><code class="html"><footer></code> for role="contentinfo"</li>
<li class="fragment" data-fragment-index="6 class="fragment" data-fragment-index="1""><code class="html"><aside></code> for role="complementary"</li>
</ul>
</section>
<section>
<h1>HTML document should have a language attribute</h1>
<pre><code class="html" data-trim data-escape>
<html lang="en"> </html>
</code></pre>
</section>
<section>
<h1>Focus States</h1>
<div class="left">
<ul>
<li class="fragment" data-fragment-index="1">NEVER remove focus states from elements</li>
<li class="fragment" data-fragment-index="2">Design better ones or leave them as-is</li>
<li class="fragment" data-fragment-index="3">These should not be subtle – they should stand out so users can tell what item they are tabbing to</li>
</ul>
</div>
<div class="right">
<pre class="fragment" data-fragment-index="1"><code class="css" data-trim data-escape>
*:focus {
outline: none; //BAD!!!
}
</code></pre>
<img class="fragment" data-fragment-index="2" src="images/focus-good.png">
<img class="fragment" data-fragment-index="3" src="images/focus-subtle.png">
</div>
</section>
<section>
<h1>Know when to use buttons vs. links</h1>
<div class="left">
<ul>
<li class="fragment" data-fragment-index="1">Linking to something outside the page? Use an anchor tag.</li>
<li class="fragment" data-fragment-index="2">Performing an action on the page? Use a button.</li>
</ul>
</div>
<div class="right">
<pre><code class="html" data-trim data-escape>
<a href="https://google.com">Search it here</a>
<button type="button">Submit this form</button>
</code></pre>
</div>
</section>
<section>
<h1>Make links descriptive</h1>
<ul>
<li class="fragment" data-fragment-index="1">“click here” vs. “click here to read more about Vox Media”</li>
<li class="fragment" data-fragment-index="2">This is also helpful for SEO!</li>
</ul>
</section>
<section>
<h1>Write good alt text for your images, hide decorative images</h1>
<pre><code class="html" data-trim data-escape>
<img src="catomg.jpg" alt="cute fluffy cat">
<img src="border.png" aria-hidden="true">
</code></pre>
</section>
<section>
<h1>Accessible Inline SVGs</h1>
<p>SVGs are often used as icons on interactive elements in sites. The SVG should have a title or description, then you can use the aria-labelledby attribute to tell the screen reader what element to use to describe the SVG.</p>
<pre><code class="html" data-trim data-escape>
<svg aria-labelledby="title">
<title id="title">Green rectangle</title>
<rect width="75" height="50" rx="20" ry="20" fill="#90ee90" stroke="#228b22" stroke-fill="1" />
</svg>
</pre></code>
<cite><a href="https://www.sitepoint.com/tips-accessible-svg/">Sitepoint Tips for Creating Accessible SVG</a>
</section>
<section>
<h1>If an experience cannot be made accessible, create another route for assistive tech.</h1>
<p>Maps, charts, graphs might be more accessible as HTML tables.</p>
</section>
<section>
<h1>Allow viewport zooming</h1>
<pre><code class="html" data-trim data-escape>
<!-- DON'T U DO THIS -->
<meta name="viewport" content="maximum-scale=1">
</code></pre>
</section>
<section>
<h1>Support keyboard navigation</h1>
<ul>
<li class="fragment" data-fragment-index="1">Users should be able to tab through the entire page</li>
<li class="fragment" data-fragment-index="2">Don’t allow “keyboard traps”</li>
</ul>
</section>
<section>
<h1>Accessibility is <i>everyone’s</i> responsibility</h1>
<ul>
<li class="fragment" data-fragment-index="1">Don’t hesitate to push back on inaccessible designs</li>
<li class="fragment" data-fragment-index="2">Semantic html goes a long way</li>
<li class="fragment" data-fragment-index="3">Don’t change default semantics</li>
</ul>
</section>
<section>
<h1>Okay this sounds like a lot. How do I <i>test</i> it?</h1>
</section>
<section>
<h1>Testing best practices</h1>
<ul>
<li class="fragment" data-fragment-index="1">Navigate the page with your keyboard</li>
<li class="fragment" data-fragment-index="2">Add accessibility to your project checklist just as you would any other function or feature.</li>
<li class="fragment" data-fragment-index="3">Include a11y in your device/browser QA process</li>
<li class="fragment" data-fragment-index="4">Test early and often!</li>
</ul>
</section>
<section>
<h1><a href="http://khan.github.io/tota11y/">Tota11y bookmarklet</a></h1>
<img src="images/tota11y.png" alt="screenshot of tota11y bookmarklet on Curbed">
</section>
<section>
<h1><a href="https://www.paciellogroup.com/resources/contrastanalyser/">Colour Contrast Analyser</a>
<img src="images/colour.png" alt="screenshot of colour contrast analyser">
</section>
<section>
<h1>RECAP!</h1>
</section>
<section>
<h1>Disability affects <i>everyone</i>.</h1>
</section>
<section>
<h1>Trouble getting buy in?<br>
Ask for <i>forgiveness</i> later.</h1>
</section>
<section>
<h1>Baby steps count, it’s not going to happen all at once.</h1>
</section>
<section>
<h1>Think about accessibility<br>
<i>early & often</i>.</h1>
</section>
<section>
<h1>Semantic HTML + browser defaults go a long way.</h1>
</section>
<section>
<h1>Let’s make our work <i>better</i>!</h1>
</section>
<section>
<h1>Tools & Resources:</h1>
<ul>
<li><a href="http://accessibility.voxmedia.com/">Vox Product Accessibility Guidelines</a></li>
<li><a href="https://chrome.google.com/webstore/detail/wave-evaluation-tool/jbbplnpkjmmeebjpijfedlgcdilocofh?hl=en-US">WAVE Chrome extension</a></li>
<li><a href="http://colorsafe.co/">Colorsafe: To make accessible palettes</a></li>
<li><a href="http://colororacle.org/index.html">Color Oracle: To simulate color blindness</a></li>
<li><a href="https://www.microsoft.com/en-us/design/practice#toolkit">Microsoft Inclusive Design Toolkit</a></li>
<li><a href="http://code.viget.com/interactive-wcag/#responsibility=&level=aa">Interactive WCAG</a></li>
<li><a href="http://www.508checker.com/">508 Compliance Checker</a></li>
<li><a href="https://www.w3.org/TR/WCAG20/">Web Content Accessibility Guidelines</a></li>
<li><a href="https://validator.w3.org/">W3C Markup Validation</a></li>
</ul>
</section>
<section>
<h1>Thank <i>you</i>!</h1>
<p><a href="https://www.twitter.com/mylifeasalllly">@mylifeasalllly</a></p>
</section>
<div class="credits">
<p>#cssconfau16</p>
<p><a href="https://www.twitter.com/mylifeasalllly">@mylifeasalllly</a></p>
</div>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// More info https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
history: true,
// More info https://github.com/hakimel/reveal.js#dependencies
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
</body>
</html>