-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
639 lines (601 loc) · 24.6 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
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Web Accessibility for Javascript Developers</title>
<meta name="description" content="A framework for easily creating beautiful presentations using HTML">
<meta name="author" content="Hakim El Hattab">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/theme/black.css" id="theme">
<!-- Code syntax highlighting -->
<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>
<!--[if lt IE 9]>
<script src="lib/js/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<div class="reveal">
<!-- Any section element inside of this container is displayed as a slide -->
<div class="slides">
<!-- Slide set: Introduce-the-speaker -->
<section>
<section>
<h1>Web Accessibility for Javascript Developers</h1>
</section>
<section>
<h2>Who am I?</h2>
<h3>Andrew Macpherson</h3>
<p>Backend developer at <a href="http://www.annertech.com">Annertech</a></p>
<p>Contributor at <a href="https://www.drupal.org">Drupal</a> project</p>
<p><small>Twitter: <a href="http://twitter.com/martianwebdev">@martianwebdev</a><br />
Github: <a href="https://github.com/fuzzbomb">fuzzbomb</a></small></p>
</section>
</section>
<section>
<h2>Why accessibility</h2>
</section>
<!-- Slide set: Accessibility Principles -->
<section>
<section>
<h2>Accessibility Principles</h2>
<p><a href="">W3C Web Acessibility Initiative</a> (WAI)</p>
<p><a href="https://www.w3.org/WAI/intro/wcag.php">Web Content Accessibility Guidelines 2.0</a> (WCAG)</p>
<ul>
<li>Perceivable</li>
<li>Operable</li>
<li>Understandable</li>
<li>Robust</li>
</ul>
<p><em>"POUR"</em><p/>
</section>
<section>
<h2>WCAG Success Criteria</h2>
<p>WCAG is organized as a set of <em>success criteria</em>, each describing an accessibility practice in terms of:</p>
<ul>
<li>Intent & Benefits</li>
<li>Priority level (A, AA, AAA)</li>
<li>Examples</li>
<li>Sufficient techniques</li>
<li>Common failures</li>
</ul>
<p>Example: <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html">SC 1.3.1 Info and Relationships</a> describes the use of headings and labels to indicate the structure of a page.</p>
</section>
</section>
<!-- Topics NOT covered -->
<section>
<section>
<h2>Things I <em>don't</em> want to cover in depth today</h2>
<p>... because this talk is for JS developers!</p>
<p>... because there isn't time,</p>
<p>... but these things are still important topics.</p>
</section>
<section>
<h3>Automated a11y testing</h3>
<ul>
<li>It's a HUGE topic.</li>
<li>Lots of exciting recent developments, including DOM and headless browser testing.</li>
<li>Many things <em>can't</em> be tested easily or reliably. Automated testing is a adjunct to human review.</li>
<li>Tons of reports - sometimes this doesn't really help you understand the whole accessible experience.</li>
</ul>
</section>
<section>
<h3>Content Author's Contribution</h3>
<p>Note: content authors/editor's decisions are just as important as designers and developers.</p>
<ul>
<li>Document outline, headings, sections, etc.</li>
<li>Organising content, writing styles, use of diagrams, plain English, etc.</li>
<li>Context - choice of text alternatives for images.</li>
<li>Audio/Video content, captioning, etc.</li>
</ul>
</section>
<section>
<h3>"Compliance"</h3>
<ul>
<li>TL;DR - 2010 Equality Act basically says "don't discriminate".</li>
<li>When focusing on compliance, sometimes you're being bureaurocratic instead of thinking about the accessible experience practically/holistically.</li>
<li>Commissioning guides, and thinking about accessibility at organizational level - see BS 8878</li>
</ul>
</section>
<section>
<h3>Role of Design, IA, and MAinstream UX</h3>
<p>Actually, I love talking about this. Just not today.</p>
<ul>
<Li>Colour Contrast</li>
<li>Colour Blindness affects ~4% of population!</li>
<li>Windows high-contrast mode.</li>
</ul>
</section>
</section>
<!-- Slide set: inaccessible widget, works with a mouse -->
<section>
<section>
<h2>Example UI widget</h2>
<p>Let's start with an <em>inaccessible</em> example,<br />
then see how we can improve it.</p>
<p><img src="img/burger-menu-icon.png" alt="Screenshot of a mobile menu icon." /></p>
<p>We'll make a mobile menu button - <em>a.k.a "Burger Menu"</em></p>
</section>
<section>
<h3>Sample Code</h3>
<p>Git repo: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo">fuzzbomb/mobile-menu-a11y-demo</a></p>
<p>Improvements made during these slides are marked as git tags, which we'll refer to as we go along.</p>
<p>A <a href="http://fuzzbomb.github.io/mobile-menu-a11y-demo/">working demo</a> of the finished menu widget is also available.</p>
</section>
<section>
<h3>HTML markup</h3>
<p>Our button is a <div>, and our menu is a list of links.</p>
<pre><code class="html">
<div id="main-menu">
<div id="main-menu-button">
<i class="fa fa-bars"></i>
<span>Main Menu</span>
</div>
<nav>
<ul>
<li><a href="http://example.com/tech">Technology</a></li>
<li><a href="http://example.com/science">Science</a></li>
<li><a href="http://example.com/arts">Arts</a></li>
</ul>
</nav>
</div>
</code></pre>
</section>
<section>
<h3>Javascript Behaviour</h3>
<p>Bind a click handler to our <div> to toggle menu visibility.</p>
<pre><code class="javascript"> $(document).ready(function() {
// Initialize.
var menuDisplayed = false;
$('#main-menu nav').hide();
// Add the open/close behaviour.
$('#main-menu-button').click(function(event) {
if (menuDisplayed === true) {
$('#main-menu nav').hide();
menuDisplayed = false;
}
else {
$('#main-menu nav').show();
menuDisplayed = true;
}
});
}); </code></pre>
</section>
<section>
<h3>DEMO 1</h3>
<p><em>"Works with a mouse"</em></p>
<p><small>Git tag: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo/releases/tag/milestone-start-works-with-mouse">milestone-start-works-with-mouse (dbd95a5)</a></small></p>
</section>
</section>
<!-- Slide set: introducing the keyboard-only experience -->
<section>
<section>
<h2>The Keyboard-only Experience</h2>
<p>Just a few simple controls.</p>
<p>Not necessarily using assistive-technology<br />Might be a plain-old QWERTY keyboard.</p>
</section>
<section>
<h3>Basic keyboard controls</h3>
<ul>
<li>TAB to move between <em>interactive</em> elements.<br />
(SHIFT + TAB moves backwards among them.)</li>
<li>ENTER and/or SPACE to <em>operate</em> interactive elements.</li>
<li>Arrow keys help in some places (radios, select, slider)</li>
<li>ESCAPE cancels things (e.g. dialogs).</li>
<li>Navigate viewport with SPACE, PgUp, PgDn, Home, End</li>
<li>Browser Menu Bar + Context menus</li>
<li>Caret browsing, spatial navigation - some browsers only.</li>
</ul>
</section>
<section>
<h3>Focus styles</h3>
<p>Sighted keyboard users <em>really</em> need to be sure what element has focus, before they press enter.</p>
<p>Subtle focus styles <em>don't work</em> - they need to be clear. Beware of re-using mouse hover styles.</p>
<p>This doesn't limit your creativity - take inspiration from games consoles and Smart TV.</p>
</section>
<section>
<h3>Bypass Blocks - part 1</h3>
<h4>"skip to main content" links</h4>
<p>Allows quick access to interact with the page's main content, <em>without</em> traversing lots of sidebar links, or a header menu.</p>
<p>Who benefits? <em>Primarily</em> sighted keyboard users. (Screen-readers offer other ways to get around a page.)</p>
<p><a href="https://www.w3.org/WAI/GL/UNDERSTANDING-WCAG20/navigation-mechanisms-skip.html">WCAG Success Criterion 2.4.1 - Bypass Blocks</a></p>
</section>
<section>
<h3>DEMO</h3>
<!-- BBC homepage, volunteer? -->
</section>
</section>
<!-- Mythbusting 1 -->
<section>
<h2>Myth-busting - <em>"Off-Canvas"</em></h2>
<p>Off-canvas != Off-viewport</p>
<p>Be careful. Elements rendered off-viewport can be<br /> a help <em>or</em> a hindrance...</p>
<p><em>Good:</em><br />"Invisible" labels are still accessible to screen-readers.</p>
<p><em>Bad:</em><br />Focusable elements are traversed by sighted keybpoard users, who can't tell what is in focus.</p>
</section>
<!-- Slide set: Fixing the keyboard experience -->
<section>
<section>
<h2>Fixing the keyboard-only experience</h2>
<p>The menu widget we have built does not work for keyboard users at all. The <em>expected</em> behaviour is:</p>
<ol>
<li>Press TAB until I can see the button has focus.</li>
<li>Press space or enter to activate the button.</li>
</ol>
</section>
<section>
<h3><em>Allow</em> keyboard focus</h3>
<pre><code class="html">
<div id="main-menu">
<div id="main-menu-button" tabindex=0>
<i class="fa fa-bars"></i>
<span>Main Menu</span>
</div>
// ... list of menu links
</div>
</code></pre>
<p>Add a <code>tabindex=0</code> attribute to our <div>.</p>
<p>Keyboard focus is now possible, but the button<br /> does not yet respond to keypress.</p>
</section>
<section>
<h3><em>Indicate</em> the focus</h3>
<pre><code class="css">
#main-menu-button {
background-color: #444444;
color: #ffffff;
}
#main-menu-button:focus {
background-color: #ffffff;
color: #444444;
}
</code></pre>
<p>Use CSS to make it <em>very obvious</em> that the button has focus.</p>
<p>In this example, we invert the colour contrast.<br />Avoid styles which are too subtle.</p>
</section>
<section>
<h3><em>Respond</em> to keypress</h3>
<pre><code class="javascript">
$('#main-menu-button')
.keypress( function(event) {
// Only respond to enter or spacebar keys
if (event.which == 13 || event.which == 32) {
// Spacebar usually triggers page scrolling.
event.preventDefault();
$(this).trigger('click');
}
})
.click(function(event) {
// The open/close behaviour
// ...
});
</code></pre>
<p>Listen for keypress event, confirm which button was pressed, and trigger a click() event.</p>
</section>
<section>
<h3>DEMO 2</h3>
<p><em>"Works with a keyboard"</em></p>
<p><small>Git tag: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo/releases/tag/milestone-works-with-mouse-and-keyboard">milestone-works-with-mouse-and-keyboard (3b8622c)</a></small></p>
</section>
</section>
<!-- Slide set: introducing the screen-reader experience -->
<section>
<section>
<h2>The Screen-reader Experience</h2>
<p><em>Whoah. Learning curve.</em></p>
</section>
<section>
<h3>Two Crucial Tools</h3>
<ol>
<li>Headphones!</li>
<li>The <em>stop-talking</em> key command.</li>
</ol>
<p>Be kind to your colleagues :-)</p>
</section>
<section>
<h3>Slice & Dice</h3>
<p>Many ways to navigate or inspect a page...</p>
<ul>
<li>Document outline: sensible heading levels!</li>
<li>ARIA Landmark Roles: header, footer, nav-bar, search box.</li>
<li>Focus via TAB key, like a sighted keyboard user.</li>
<li>Forms mode (some screenreaders offer extra forms tools).</li>
<li>Browse a list of links.</li>
</ul>
</section>
<section>
<h3>Screenreader User habits</h3>
<p>WebAIM Screenreader user survey</p>
<ul>
<li>What technology do you use?</li>
<li>Preferred navigation methods?</li>
<li>Dealing with images, frames, PDF, multimedia, ...</li>
</ul>
</section>
<section>
<h3>Bypass Blocks - Part 2</h3>
<h4>ARIA Landmark Roles</h4>
<p><ul role=navigation></p>
<p>main, banner, contentinfo, navigation,<br />complementary, search, ...</p>
<p>New HTML5 elements - main, header, footer, nav, aside.</p>
</section>
<section>
<h3>DEMO</h3>
<!-- BBC homepage, volunteer? -->
</section>
</section>
<!-- Slide set: HTML semantics -->
<section>
<section>
<h2>Semantics Revisited</h2>
<p>Re-cap. We already know this stuff...</p>
</section>
<section>
<h3>HTML Elements</h3>
<ul>
<li><div> means <em>nothing</em>></li>
<li><span> means <em>nothing</em>></li>
<li><button> - press it, makes something <em>happen</em>.</li>
<li><a href> - hyperlinks direct you <em>elsewhere</em>.</li>
<li>Button vs Link. We'll run into that a lot.</li>
</ul>
</section>
<section>
<h3>Human-readable semantics</h3>
<p>Attributes which often contain rich semantics, but are really only useful to a human audience: developers!</p>
<ul>
<li>class attribute</li>
<li>data-* attributes</li>
<li>ng-* attributes</li>
<li>Others?</li>
</ul>
<p>None are understood by screen-readers.</p>
</section>
<section>
<h3>Semantics for screen-readers</h3>
<p>We want machine-readable semantics</p>
<ul>
<li>HTML Elements: headings, tables, forms, ...</li>
<li>HTML attributes: disabled, required, checked, ...</li>
<li>aria-* attributes</li>
<li>SVG, MathML.</li>
</ul>
</section>
</section>
<!-- Slide set: WAI-ARIA intro -->
<section>
<section>
<h2>Introducing WAI-ARIA</h2>
<p>HTML is NOT a user interface language.</p>
<p>ARIA provides vocabulary of UI roles, states, and properties.</p>
<p>They express the range of interaction found in native Desktop and Mobile UI widget APIs.</p>
<p>Formal, machine-readable semantics.</p>
</section>
<section>
<h3>An ARIA buffet</h3>
<ul>
<li>Roles: navigation, menubar, spinbutton, tablist, ...</li>
<li>States: expanded, pressed, invalid, grabbed, ...</li>
<li>Relationships: labelled-by, described-by, controls, ...</li>
<li>Properties: haspopup, dropeffect, readonly, ...</li>
</ul>
</section>
<section>
<h3>The Golden Rules of ARIA</h3>
</p>Do NOT use an aria-* role or property,<br />if an equiavlent one already exists in HTML.</p>
<p>Host-language semantics are preferred.</p>
<p>Use sparingly!</p>
</section>
<section>
<h3>Other Uses of ARIA</h3>
<ul>
<li>Use in other languages: SVG, MathML, ...</li>
<li>Sometimes <em>safer</em> to over-ride a HTML native role.<br />
Avoids breaking CSS or JS which deals with elements by tag names.</li>
<li>Complex relationships: text inputs in a table can be labelled by both Column and Row headers.</li>
<li>ASCII art!<br />
<pre role="image" aria-label="ASCII art picture of a fish"><br />
equivalent to <img alt="ASCII art fish"/></li>
</ul>
</section>
</section>
<!-- Slide set: Improving the screen-reader experience -->
<section>
<section>
<h2>Improving the screen-reader experience</h2>
<p>Aim to provide a screenreader user with an idea of<br /> what the button can be <em>used for</em>.</p>
<ol>
<li>Describe the button:
<ul>
<li>Announce the <em>name</em> of the button</li>
<li>Indicate it is a <em>button</em></li>
</ul>
</li>
<li>Describe the <em>behaviour</em> of the button:
<ul>
<li>Expanded</li>
<li>Collapsed</li>
</ul>
</li>
</ol>
</section>
<section>
<h3>Announce the <em>name</em> of the button</h3>
<p>We were hiding the text label with CSS display:none (which prevents screenreaders from finding it) so we'll remove this.</p>
<pre><code class="css">-#main-menu-button span {
- display: none;
-} </code></pre>
<p>The visuallyhidden class (from HTML5 Boilerplate) uses clip and overflow properties to hide the text in a 1px square box.</p>
<pre><code class="html"><div id="main-menu-button" tabindex=0>
<i class="fa fa-bars"></i>
<span class="visuallyhidden">Main Menu</span>
</div> </code></pre>
<p>Now a screenreader can announce the button name.</p>
</section>
<section>
<h3>Indicate it is a <em>button</em></h3>
<pre><code class="html"><div role="button" id="main-menu-button" tabindex=0>
<i class="fa fa-bars"></i>
<span class="visuallyhidden">Main Menu</span>
</div>
</code></pre>
<p>Adding <code>role=button</code> to the <div> overrides the default HTML semantic, so screenreaders can announce it as a "button" (or sometimes "clickable").</p>
</section>
<section>
<h3>Describe the <em>behaviour</em> of the button</h3>
<p>We'll use two ARIA attributes in tandem. Note that both of these attributes need to go on the button element itself.</p>
<ul>
<li><code>aria-controls</code> indicates a <em>relationship</em> between<br />two elements (the button controls the list of links).</li>
<li><code>aria-expanded</code> indicates whether the list is<br />currently shown.</li>
</ul>
</section>
<section>
<h3><code>aria-controls</code> property</h3>
<p>aria-controls needs an ID to refer to.</p>
<pre><code class="html"><div role="button" id="main-menu-button" tabindex=0>
<i class="fa fa-bars"></i>
<span class="visuallyhidden">Main Menu</span>
</div>
<nav id="main-menu-nav">
<ul> ... list of links ... </ul>
</nav>
</code></pre>
<pre><code class="javascript">$('#main-menu-button')
.attr('aria-controls', 'main-menu-nav')
.keypress( function(event) {
/* Handle keypress */
})
.click(function(event) {
/* The open/close behaviour acts on '#main-menu nav' */
});</code></pre>
</section>
<section>
<h3><code>aria-expanded</code> state</h3>
<pre><code class="javascript">$('#main-menu-button')
.attr('aria-controls', 'main-menu-nav')
.attr('aria-expanded', false) // NEW, initialize
.keypress( function(event) { /* Handle keypress */ })
.click(function(event) {
if (menuDisplayed === true) {
$('#main-menu nav').hide();
$(this).attr('aria-expanded', false) // NEW
menuDisplayed = false;
} else {
$('#main-menu nav').show();
$(this).attr('aria-expanded', true) // NEW
menuDisplayed = true;
}
});</code></pre>
<p>We initialize aria-expanded as false, to match the initial appearance of the menu, and update it whenever we show or hide the menu.</p>
</section>
<section>
<h3>Notes about aria-expanded</h3>
<ul>
<li>aria-expanded doesn't actually hide the list of links - it just provides a way to indicate the state to a screenreader.</li>
<li>CSS display:none is doing the real work of hiding content - this comes via jQuery.hide().</li>
<li>DO NOT initialize aria-expanded in the HTML source. Always do this in the JS, in case the JS doesn't load for some reason.</li>
</ul>
</section>
<section>
<h3>Demo</h3>
<p><em>"Works with a screenreader"</em></p>
<p><small>Git tag: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo/releases/tag/milestone-works-with-mouse-keyboard-screenreader">milestone-works-with-mouse-keyboard-screenreader (ad3fa57)</a></small></p>
</section>
</section>
<!-- Slide-set: refactor -->
<section>
<section>
<h2>Code improvements</h2>
<p>We actually <em>broke</em> the golden rule of ARIA. Avoid using ARIA semantics to provide a role, where HTML already provides the role with an equivalent element.</p>
<p>In our case we used:</p>
<pre><code class="html">
<div role=button></div>
</code></pre>
<p>When we ought to have used:</p>
<pre><code class="html">
<button></button>
</code></pre>
</section>
<section>
<h3>More improvements</h3>
<p>After replacing the <div role=button> with a <em>real</em> HTML <button>, we can remove a few things to simplify the code...</p>
<ul>
<li>tabindex=0 is no longer needed - a <button> is focusable.</li>
<li>The jQuery.keypress() handler isn't needed either! The browser handles a keypress for <button>.</li>
<li>In fact, we <em>must</em> now remove the jQuery.keypress() handler, because the <button> will now have <em>two</em> keypress handlers, and the menu will be toggled twice from one keypress. Beware of introducing this bug!</li>
</ul>
</section>
</section>
<!-- Slide-set: reading list -->
<section>
<section>
<h2>Web Accessibility Reading List</h2>
<p>TL;DR... <a href="http://a11yproject.com/">a11yproject.com</a></p>
<p>A community-reviewed set of practical tips, with a gentle learning curve. If you only read one thing from my reading list, make it this website.</p>
<p>In fact, you might do better perusing <em>their</em> <a href="http://a11yproject.com/resources.html">resources</a> list ;-)</p>
</section>
<section>
<h3>Using Personas</h3>
<p><a href="http://diveintoaccessibility.info/">Dive Into Accessibility</a></p>
<p>A short open-source book which gives a great introduction to thinking about accessibility, along with techiniques.</p>
<p>Particularly useful for introducing <em>personas</em> when considering accessibility. For every technique, it has a discussion of who benefits, and how.</p>
<p>It's starting to look a little dated (19" is a <em>large</em> monitor!), and a few techniques have changed, but few books match this one as an introduction to the topic.</p>
</section>
<section>
<h3>More about WAI-ARIA</h3>
<ul>
<li><a href="http://heydonworks.com/practical_aria_examples/">HeydonWorks' Practical ARIA Examples</a><br />A great intro, several re-usable patterns.</li>
<li><a href="https://www.marcozehe.de/category/aria/">Marco's ARIA Tips</a><br />More example patterns.</li>
<li><a href="https://www.w3.org/TR/wai-aria-practices/">WAI-ARIA 1.0 Authoring Practices</a><br />In-depth W3C guide, try it after the introductory articles.</li>
<li><a href="http://pauljadam.com/#/demos">PaulJAdam's Modern Web Accessibility Demos</a><br />A long list of working demos. Not fully documented, but <em>lots</em> to study under the hood.</li>
</ul>
</section>
<section>
<h3>Misc</h3>
<ul>
<li><a href="https://www.marcozehe.de/articles/how-to-use-nvda-and-firefox-to-test-your-web-pages-for-accessibility/">Testing accessibility with NVDA screen-reader and Firefox</a></li>
<li><a href="http://getbootstrap.com/components/">Twitter Bootstrap Components</a><br />Well documented, plenty detail about steps you need to take to make best use of Bootstrap's accessibility.</li>
<li>Twitter hashtags - #a11y #aria</li>
</ul>
</section>
</section>
<section>
<h2>Any Questions?</h2>
<p>The End</p>
<p><small>Slides: <a href="http://fuzzbomb.github.io/js-a11y-intro-slideshow/">fuzzbomb.github.io/js-a11y-intro-slideshow</a><br />Demo code: <a href="https://github.com/fuzzbomb/mobile-menu-a11y-demo">github.com/fuzzbomb/mobile-menu-a11y-demo</a></small></p>
</section>
</div>
</div>
<script src="lib/js/head.min.js"></script>
<script src="js/reveal.js"></script>
<script>
// Full list of configuration options available at:
// https://github.com/hakimel/reveal.js#configuration
Reveal.initialize({
controls: true,
progress: true,
history: true,
center: true,
transition: 'fade', // none/fade/slide/convex/concave/zoom
// Optional reveal.js plugins
dependencies: [
{ src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
{ src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
{ src: 'plugin/zoom-js/zoom.js', async: true },
{ src: 'plugin/notes/notes.js', async: true }
]
});
</script>
</body>
</html>