grwebdev, october 28, 2019 html + a11y · a11y style guide lots of card types and navigation...
TRANSCRIPT
![Page 1: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/1.jpg)
HTML + A11yGRWebDev, October 28, 2019
1
![Page 2: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/2.jpg)
2
Ellen DoornbosCertified Professional of Accessibility Core Competencies
Web Developer
drupal.org/u/ellenoise
linkedin.com/in/edoorn
![Page 3: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/3.jpg)
Digital Accessibility
def., Ensuring equal access to websites, mobile apps, and electronic documents for people with disabilities
3
![Page 4: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/4.jpg)
“Disability is something we need
to view as just a natural part of the
human experience.”Gaelynn Lea
Photograph by Mark Brown, for The Guardian
![Page 5: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/5.jpg)
Not just one experience
Visual
Auditory
Cognitive
Neurological
Physical
Speech
… or any combination5
![Page 6: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/6.jpg)
6
What does inaccessibility feel like?
![Page 7: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/7.jpg)
What does inaccessibility feel like?
75224759_495198764657193_5233403871920914432_n.jpg
7
![Page 8: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/8.jpg)
What does inaccessibility feel like?
75224759_495198764657193_5233403871920914432_n.jpg
8
![Page 9: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/9.jpg)
Everything we do on the web.
Web Accessibility impacts...
→ Healthcare→ Insurance→ Banking→ Education→ Travel→ Finding employment→ Work→ News→ Government→ Transportation→ Social networking→ Grocery shopping
9
![Page 10: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/10.jpg)
85%of Facebook Video is watched without sound.
10Source: American Press Institute
![Page 11: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/11.jpg)
After stewing in his emotions, emo veg comes to the conclusion that the root of the world’s problems is that people don’t seem to carrot all...
11
![Page 12: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/12.jpg)
1. Learn about how real people use the web.
12
![Page 14: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/14.jpg)
14
![Page 15: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/15.jpg)
Switch controlBinary input device
15
![Page 16: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/16.jpg)
16
![Page 17: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/17.jpg)
17Image: CNET
![Page 18: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/18.jpg)
2. Poke at your device’s accessibility settings.
18
![Page 20: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/20.jpg)
→ Narrator (Windows)→ TalkBack (Android)→ Orca (Ubuntu)→ Screen magnification→ Font adjustments→ High contrast mode→ Voice control (macOS
Catalina only)→ Captions→ Switch control
macOS + iPhone Voiceover ⌘ + fn + F5
20
![Page 21: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/21.jpg)
3. Create text for everything.
21
![Page 22: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/22.jpg)
<img src="/img/cake_food_dessert_carrot_cake_cupcake-1239463.jpg">
“Cake underscore food underscore dessert underscore carrot underscore cake underscore cupcake underscore dash one two three nine four six three dot jpg”
What are you showing me?1/5
![Page 23: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/23.jpg)
<img src="/img/cake_food_dessert_carrot_cake_cupcake-1239463.jpg"alt="">
What are you showing me?2/5
![Page 24: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/24.jpg)
<img src="/img/cake_food_dessert_carrot_cake_cupcake-1239463.jpg"alt="Photo of a cupcake">
?
What are you showing me?3/5
![Page 25: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/25.jpg)
<img src="/img/cake_food_dessert_carrot_cake_cupcake-1239463.jpg"alt="A single frosted carrot cake cupcake sits atop a rustic minimalist barnwood table">
What are you showing me?4/5
![Page 26: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/26.jpg)
<img src="/img/cake_food_dessert_carrot_cake_cupcake-1239463.jpg"alt="A frosted carrot cake cupcake">
What are you showing me?5/5
![Page 27: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/27.jpg)
4. Give context to every link
27
![Page 28: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/28.jpg)
<a href="/recipes/cupcakes/carrot-cake-cupcakes"> <img src="/img/cake_food_dessert_carrot_cake_cupcake-1239463.jpg" alt="Carrot Cake Cupcake Recipe" ></a>
Where are you taking me?1/2
![Page 29: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/29.jpg)
Carrot Cake Cupcake Recipe
<a href="/recipes/cupcakes/carrot-cake-cupcakes"> <img src="/img/cake_food_dessert_carrot_cake_cupcake-1239463.jpg" alt="" > Carrot Cake Cupcake Recipe</a>
Where are you taking me?2/2
![Page 30: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/30.jpg)
30
Learn More
![Page 31: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/31.jpg)
31
Learn More
![Page 32: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/32.jpg)
32
LEARN MORE
![Page 33: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/33.jpg)
33
Read More
![Page 34: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/34.jpg)
34
Learn More
![Page 35: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/35.jpg)
35
Click Here
![Page 36: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/36.jpg)
36
Carnivorous Arthropods
![Page 37: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/37.jpg)
5. Write clear, meaningful HTML.
37
![Page 38: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/38.jpg)
<div class="grid-wrapper"> <div class="grid"> <div class="grid-card" id=”grid-card-1”> <div>This card won’t display to assistive technology.</div> </div> <div class="grid-card" id=”grid-card-2”> <div>It also can’t be tabbed over, making it non-interactive.</div> </div> <div class="grid-card" id=”grid-card-3”> <div>Assistive technology needs semantic markup to work.</div> </div> </div></div>
![Page 39: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/39.jpg)
<div class="recipe-container"> <div class="recipe-card"> <h3>Carrot Cake Cupcakes</h3> <div class="ingredients"> <h5>Ingredients:</h5> <p>1 c. Milk</p> <p>4 Eggs</p> </div> <p>Instructions:</p> <p><span class="num">1. </span>Preheat oven to 375 degrees.</p> <p><span class="num">2. </span>Whisk eggs together in a bowl.</p> </div></div> 1/4
![Page 40: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/40.jpg)
<section class="recipe-container"> <article class="recipe-card"> <h3>Carrot Cake Cupcakes</h3> <div class="ingredients"> <h5>Ingredients:</h5> <p>1 c. Milk</p> <p>4 Eggs</p> </div> <p>Instructions:</p> <p><span class="num">1. </span>Preheat oven to 375 degrees.</p> <p><span class="num">2. </span>Whisk eggs together in a bowl.</p> </article></section> 2/4
![Page 41: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/41.jpg)
41
![Page 42: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/42.jpg)
42
![Page 43: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/43.jpg)
<section class="recipe-container"> <article class="recipe-card"> <h2>Carrot Cake Cupcakes</h2> <div class="ingredients"> <h3>Ingredients:</h3> <p>1 c. Milk</p> <p>4 Eggs</p> </div> <h3>Instructions:</h3> <p><span class="num">1. </span>Preheat oven to 375 degrees.</p> <p><span class="num">2. </span>Whisk eggs together in a bowl.</p> </article></section> 3/4
![Page 44: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/44.jpg)
![Page 45: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/45.jpg)
<section class="recipe-container"> <article class="recipe-card"> <h2>Carrot Cake Cupcakes</h2> <div class="ingredients"> <h3>Ingredients:</h3> <ul> <li>1 c. Milk</li> <li>4 Eggs</li> </ul> </div> <h3>Instructions:</h3> <ol> <li>Preheat oven to 375 degrees.</li> <li>Whisk eggs together in a bowl.</li> </ol> </article></section> 4/4
![Page 46: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/46.jpg)
6. Build robust form controls.
46
![Page 47: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/47.jpg)
<div class="newsletter-form"> <input type="text" name="email-address" placeholder="Sign Up"> <button onclick="submitEmail()">Go</button></div>
1/4
![Page 48: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/48.jpg)
<form class="newsletter-form" action="/my/submit/handler"> <input type="email" name="email-address" placeholder="Sign Up"> <button>Go</button></form>
2/4
![Page 49: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/49.jpg)
<form class="newsletter-form" action="/my/submit/handler"> <label for="email-address">Email</label> <input id="email-address" type="email" name="email-address" placeholder="Sign Up"> <button>Go</button></form>
3/4
![Page 50: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/50.jpg)
<form class="newsletter-form" action="/my/submit/handler"> <label for="email-address">Email</label> <input id="email-address" type="text" name="email-address" placeholder="Sign Up" aria-describedby="help-text"> <button>Go</button> <p id="help-text"><img src="/img/info.png" alt="">Sign up for our newsletter</p></form>
4/4
![Page 51: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/51.jpg)
![Page 52: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/52.jpg)
7. Support keyboard interaction.
52
![Page 53: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/53.jpg)
Device-independentmyElement.addEventListener(‘mouseover’, (event) => { console.log(‘I only work for a mouse’);});myElement.addEventListener(‘mouseout’, (event) => { console.log(‘Goodbye mouse’);});
myElement.addEventListener(‘focus’, (event) => { console.log(‘I work for mouse and keyboard’);});myElement.addEventListener(‘blur’, (event) => { console.log(‘Heckin swell’);});
![Page 54: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/54.jpg)
document.addEventListener('keyup', (event) => { switch (event.keyCode) { // escape case 27: // exit break; // enter || spacebar case 13 || 32: // submit or something break; // left arrow case 37: // move back / previous break; // right arrow case 39: // move forward break; }}
Source: Ben Robertson, How to Write Accessible JavaScript
![Page 55: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/55.jpg)
8. Follow WAI-ARIA patterns.
55
![Page 56: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/56.jpg)
Why? WAI!
56
![Page 57: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/57.jpg)
A.R.I.A.Accessible Rich Internet Applications
57
![Page 58: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/58.jpg)
Tabs“A set of layered sections of content... that display one panel of content at a time.”
58
Source: WAI-ARIA Authoring Practices
![Page 59: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/59.jpg)
→ Choosing HTML elements→ Setting HTML properties→ Expected keyboard behavior→ Specific key controls→ Demos→ Code samples
59
There’s a spec for that
![Page 60: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/60.jpg)
What do you need to build?
● Feed
● Grid
● Menu
● Slider
● Toolbar
● Tooltip
● … and a whole lot more!
● Accordion
● Alert
● Breadcrumb
● Button
● Carousel
● Dialog (Modal)
● Disclosure (Show/Hide)
60
![Page 61: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/61.jpg)
9. Choose third party libraries carefully.
61
![Page 62: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/62.jpg)
62
⚠
![Page 63: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/63.jpg)
63
![Page 64: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/64.jpg)
10. Build your SPA’s with a grain of salt.
64
![Page 65: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/65.jpg)
65
![Page 66: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/66.jpg)
66
Keep learning
![Page 67: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/67.jpg)
Pattern Libraries
➔ A11y Style Guide◆ Lots of card types and navigation patterns
➔ Deque Cauldron◆ Built by industry leader Deque Systems
➔ The A11y Project◆ Community-driven, links to lots of additional resources
67
![Page 68: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/68.jpg)
WCAG 2.0 & 2.1 👾 🖥Web Content Accessibility Guidelines
This is a testable body of web standards61 & 78 success criteria, respectively
68
![Page 69: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/69.jpg)
W3C’s Web Accessibility Initiative (WAI)
➔ Tips for Getting Started Developing for Web Accessibility◆ Practical ways to write better code
➔ Web Accessibility Perspectives (YouTube Playlist)◆ Video series that illustrates how accessibility is “essential for some, useful for all”
➔ WCAG 2.1 - Official◆ A body of technical standards to evaluate web accessibility.
◆ I recommend beginners start by reading about WCAG guidelines. WCAG itself can
be overwhelming at first to navigate, and staggering to read from end to end.
➔ How to Meet WCAG (Quick Reference)
69
![Page 70: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/70.jpg)
YouTube
➔ A11ycasts with Rob Dodson ◆ Tutorials from beginner to advanced
➔ Deque Systems◆ Industry leader in web accessibility
➔ A11y Talks◆ Monthly live webinar
➔ Inclusive Design 24 (#id24)◆ 24-hour live stream event
◆ YouTube Playlist 2019
70
![Page 71: GRWebDev, October 28, 2019 HTML + A11y · A11y Style Guide Lots of card types and navigation patterns ... I recommend beginners start by reading about WCAG guidelines. WCAG itself](https://reader034.vdocuments.mx/reader034/viewer/2022051511/600fb04ccb159d3dab025f91/html5/thumbnails/71.jpg)
71
Q&A