10 Simple Rules for Making my Site Accessible @Accessibots - PowerPoint PPT Presentation

10 ¡Simple ¡Rules for Making my Site Accessible @Accessibots @AccessibotLilly @misshelenasue @ChrisAlbrecht

2 The Accessibots 10 Simple Rules for Making Your Site Accessible Accessibility ¡tends ¡to ¡be ¡an ¡a<erthought ¡for ¡most ¡of ¡us. ¡We ¡make ¡ excuses ¡like ¡"it ¡will ¡add ¡too ¡much ¡cost ¡to ¡the ¡project," ¡or ¡"I ¡can't ¡ make ¡Drupal ¡do ¡that," ¡or ¡it ¡may ¡be ¡that ¡we ¡simply ¡don't ¡know. ¡ That's ¡where ¡we ¡come ¡in.

3 -Chris Albrecht- Developer LULLABOT // ACCESSIBOT MOUNTAIN CLIMBER // BEER DRINKER LOVER // DREAMER � “WHEN LIFE GETS YOU DOWN…MAKE A COMFORTER.” - BO BURNHAM

4 -Helena Zubkow- Front-­‑end ¡Developer LULLABOT // ACCESSIBOT CODER // GAMER GOLDEN HEART // TECHNICOLOR SOUL

5 Strategy ¡// ¡Design ¡// ¡Development We’re an interactive strategy, design, and development company. We create delightful experiences using Drupal and open source technologies.

6 What Awaits You (probably not deadly neurotoxin) Why? When? Who? How? Why ¡make ¡websites ¡accessible? PrioriVzing ¡web ¡accessibility ¡to ¡ Beneficiaries ¡and ¡proponents ¡of ¡ Including ¡everyone: ¡ ¡ make ¡it ¡happen web ¡accessibility it’s ¡so ¡easy! Live Demo Amazing Tools Resources Fabulous Prizes Taking ¡web ¡accessibility ¡off ¡some ¡ Accessibility ¡tools ¡and ¡how ¡to ¡ Code ¡snippets ¡and ¡resources ¡ mumble ¡mumble ¡some ¡exclusions ¡ sweet ¡jumps use ¡them that ¡you ¡can ¡use apply ¡mumble

Why ¡does ¡web ¡accessibility ¡ma]er ¡anyway? Lesson ¡1

8 What’s the Point? [need ¡numbers] ¡ Protect ¡against ¡lost ¡sales. ¡ It’s ¡the ¡law. If There’s Time… The ¡longer ¡you ¡wait, ¡the ¡harder ¡it ¡will ¡be ¡ to ¡implement. ¡ ¡Some ¡secVons ¡may ¡need ¡ complete ¡overhauls. The Client Doesn’t Care Doesn’t ¡care ¡or ¡doesn’t ¡know. ¡ ¡As ¡a ¡ developer ¡or ¡project ¡manager ¡it’s ¡your ¡ responsibility. Who’s it Really For? Color ¡blind, ¡Visually ¡Impaired, ¡Hearing ¡ Impaired, ¡CogniVve ¡differences, ¡Motor ¡ impaired

9 Alts, ¡Titles ¡and ¡ Bare ¡Text ¡ Painless ¡Page ¡ ¡ Skip ¡it! � Titles Oh ¡My! You're ¡Out ¡of ¡ Order! ¡ Hover ¡States ¡ Put ¡it ¡on ¡ � & ¡Focus My ¡Tab This ¡Whole ¡Page ¡is ¡ Out ¡of ¡Order! Are ¡You ¡There, ¡ Blog? ¡ NO ¡CAPTCHAS ¡ Keep ¡Your ¡ � If ¡You ¡Can Focus It's ¡Me, ¡Markup.

10 Alts, Titles and Bare Text! Oh My! Provide a Textual Alternative to Non-Text Content What’s the Issue? Images ¡are ¡missing ¡or ¡have ¡bad ¡ALT ¡a]ributes ¡ Icons ¡are ¡used ¡instead ¡of ¡text ¡links ¡ Vague ¡links ¡are ¡missing ¡valuable ¡context Why is it Important? Screen ¡readers ¡can’t ¡see ¡images ¡ Icons ¡infer ¡context ¡for ¡sighted ¡users ¡ Images ¡with ¡text ¡can’t ¡be ¡read

11 Alts, Titles and Bare Text! Oh My! Provide a Textual Alternative to Non-Text Content Common Oversights We’ll ¡go ¡back ¡and ¡fill ¡in ¡the ¡ALT ¡text ¡later. ¡ Leave ¡the ¡ALT ¡text ¡field ¡off. ¡ ¡It ¡makes ¡the ¡form ¡too ¡ clu]ered. ¡ Tell ¡users ¡the ¡image ¡is ¡an ¡image. ¡ Don’t ¡tell ¡users ¡where ¡a ¡link ¡is ¡taking ¡them. ¡ Just ¡going ¡with ¡the ¡Drupal ¡defaults.

12 Alts, Titles and Bare Text! Oh My! Provide a Textual Alternative to Non-Text Content Do It in Drupal! Make ¡the ¡alt ¡and ¡Vtle ¡text ¡fields ¡required. ¡This ¡way ¡no ¡ one ¡can ¡‘forget’ ¡to ¡fill ¡them ¡in.

13 Alts, Titles and Bare Text! Oh My! Provide a Textual Alternative to Non-Text Content Examples Bad ¡ <a ¡href="/about-­‑us"> ¡ ¡ ¡ ¡<img ¡src="images/accessibots.png" ¡alt=“The ¡Accessibots" ¡/> ¡ </a> ¡ � <a ¡href=“http://www.awesome.com/article359395” ¡“ ¡title="The ¡Most ¡ Amazing ¡Article ¡Ever”> ¡ ¡ ¡ ¡The ¡Most ¡Amazing ¡Article ¡Ever ¡ </a> ¡ �

14 Alts, Titles and Bare Text! Oh My! Provide a Textual Alternative to Non-Text Content Examples Good ¡ <a ¡href="/about-­‑us" ¡title="Read ¡about ¡Helena ¡& ¡Chris”> ¡ ¡ ¡ ¡<img ¡src="images/accessibots.png" ¡alt=“The ¡Accessibots" ¡/> ¡ </a> ¡ � <a ¡href=“http://www.awesome.com/article359395” ¡“ ¡title="Read ¡this ¡ article ¡at ¡Awesome.com”> ¡ ¡ ¡ ¡The ¡Most ¡Amazing ¡Article ¡Ever ¡ </a> ¡ � <a ¡href=“http://www.awesome.com/article359395”> ¡ ¡ ¡ ¡Read ¡The ¡Most ¡Amazing ¡Article ¡Ever ¡Here ¡ </a> ¡ �

15 Painless Page Titles Page titles that get to the point What’s the Issue? Page ¡Vtles ¡someVmes ¡appear ¡a<er ¡the ¡site ¡Vtle ¡ Pages ¡don’t ¡have ¡Vtles Why is it Important? That’s ¡really ¡annoying ¡when ¡using ¡a ¡screen ¡reader, ¡ because ¡they ¡have ¡to ¡listen ¡to ¡the ¡Vtle ¡of ¡your ¡website ¡ before ¡they ¡can ¡page ¡through ¡to ¡hear ¡the ¡page ¡Vtle.

16 Painless Page Titles Page titles that get to the point Common Oversights Punng ¡the ¡Vtle ¡of ¡the ¡website ¡before ¡the ¡Vtle ¡of ¡the ¡page. ¡ Forgenng ¡to ¡provide ¡a ¡page ¡Vtle.

17 Painless Page Titles Page titles that get to the point Do It in Drupal! Drupal ¡is ¡nice ¡and ¡does ¡this ¡properly ¡for ¡you! ¡Hooray. ¡ Just ¡don’t ¡change ¡it.

18 Painless Page Titles Page titles that get to the point Examples � Bad ¡ My ¡Awesome ¡Site ¡| ¡Home ¡ My ¡Awesome ¡Site ¡| ¡About ¡ My ¡Awesome ¡Site ¡| ¡Buy ¡Stuff ¡ � My ¡Awesome ¡Site ¡ My ¡Awesome ¡Site ¡ My ¡Awesome ¡Site ¡ �

19 Painless Page Titles Page titles that get to the point Examples Good ¡ Home ¡| ¡My ¡Awesome ¡Site ¡ About ¡| ¡My ¡Awesome ¡Site ¡ Buy ¡Stuff ¡| ¡My ¡Awesome ¡Site ¡ �

20 Skip it! ‘Get out of Jail Free’ card for Keyboard Users What’s the Issue? NavigaVon ¡o<en ¡remains ¡the ¡same ¡from ¡page ¡to ¡page ¡ This ¡is ¡annoying ¡and ¡repeVVve ¡for ¡screen ¡readers ¡ Something ¡nice ¡we ¡can ¡do ¡is ¡to ¡provide ¡a ¡skip ¡link Why is it Important? No ¡one ¡wants ¡to ¡hear ¡the ¡same ¡links ¡read ¡over ¡and ¡over ¡ It ¡takes ¡a ¡long ¡Vme ¡to ¡page ¡through ¡to ¡get ¡to ¡the ¡content

21 Skip it! ‘Get out of Jail Free’ card for Keyboard Users Common Oversights Who’s ¡skip? ¡Why ¡am ¡I ¡linking ¡to ¡his ¡page? ¡ Assume ¡Drupal ¡‘got ¡it’ ¡without ¡checking. ¡ Using ¡Panels ¡without ¡configuring ¡the ¡skip ¡link.

22 Skip it! ‘Get out of Jail Free’ card for Keyboard Users Do It in Drupal! First, ¡make ¡sure ¡that ¡it’s ¡linking ¡to ¡a ¡region ¡that ¡ actually ¡exists ¡and ¡is ¡lower ¡in ¡the ¡DOM ¡than ¡the ¡nav. ¡ ¡ Add ¡tabindex=“0” ¡to ¡your ¡main ¡region ¡if ¡it’s ¡not ¡a ¡ focusable ¡element. ¡ If ¡all ¡else ¡fails, ¡hack ¡it ¡and ¡use ¡jQuery ¡to ¡force ¡the ¡ focus ¡past ¡your ¡navigaVon.

23 Skip it! ‘Get out of Jail Free’ card for Keyboard Users Examples <a ¡href="#main-­‑content" ¡class="element-­‑invisible ¡ element-­‑focusable">Skip ¡to ¡main ¡content</a> ¡ � jQuery ¡focus ¡hack ¡ $( ¡"#target" ¡).focus();

24 Hovering around the Focus Issue Making interactive elements that don’t suck What’s the Issue? Hover ¡states ¡are ¡awesome! ¡ If ¡you ¡don’t ¡apply ¡the ¡styles ¡to ¡focus ¡as ¡well, ¡people ¡ who ¡aren’t ¡using ¡a ¡mouse ¡can’t ¡enjoy ¡them. ¡:( Why is it Important? Everyone ¡should ¡get ¡to ¡enjoy ¡the ¡same ¡experience. ¡ SomeVmes ¡hover ¡states ¡impart ¡valuable ¡informaVon.

25 Hovering around the Focus Issue Making interactive elements that don’t suck Common Oversights Aren’t ¡focus ¡styles ¡just ¡for ¡forms ¡and ¡stuff? ¡ Oops, ¡I ¡forgot.

26 Hovering around the Focus Issue Making interactive elements that don’t suck Examples Bad ¡ .myclass ¡{ ¡ ¡ ¡ ¡&:hover ¡{ ¡ ¡ ¡ ¡ ¡ ¡color: ¡red; ¡ ¡ ¡ ¡} ¡ ¡} ¡

27 Hovering around the Focus Issue Making interactive elements that don’t suck Examples Good ¡ .myclass ¡{ ¡ ¡ ¡ ¡&:hover, ¡ ¡ ¡ ¡&:focus ¡{ ¡ ¡ ¡ ¡ ¡ ¡color: ¡red; ¡ ¡ ¡ ¡} ¡ ¡} ¡

28 Put it on My Tab Everything clickable should be tab accessible What’s the Issue? Not ¡everyone ¡can ¡use ¡a ¡mouse. ¡If ¡your ¡interacVve ¡ elements ¡aren’t ¡focusable ¡elements, ¡not ¡everyone ¡can ¡ access ¡them. Why is it Important? If ¡users ¡can’t ¡interact ¡with ¡elements ¡on ¡your ¡site, ¡they ¡ may ¡not ¡be ¡able ¡to ¡use ¡it ¡at ¡all.