Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good...
Transcript of Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good...
![Page 1: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/1.jpg)
AccessibilityFundamentals,Tes3ng,andGoodKarma
Helpmakethewebbe-erforallpeopleeverywhere,
andreaptheSEO,UX,andDIbenefits.
JoelHCrawford-SmithDukeWebServices,ITAnalystCerIfiedUsabilityAnalyst–HumanFactorsInt’[email protected]
![Page 2: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/2.jpg)
AccessibilityFundamentals,Tes3ng,andGoodKarma
TheWebisfundamentallydesignedtoworkforallpeople,whatevertheirhardware,soRware,language,culture,locaIon,orphysicalormentalability.
![Page 3: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/3.jpg)
hardware
![Page 4: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/4.jpg)
soRware
![Page 5: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/5.jpg)
language,culture
![Page 6: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/6.jpg)
locaIon
![Page 7: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/7.jpg)
physicalormentalability
• Deaf• Blind/LimitedSight• AmputaIon• ArthriIs• Spinalcordinjury• CoordinaIon
• Dyslexia• AuIsm• A.D.D./A.D.H.D.• Memory&Recall• LiteracyLevel• LanguageBarriers
![Page 8: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/8.jpg)
WhoareyoutesIngfor?
![Page 9: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/9.jpg)
Everyone
• YouandyourvisitorsexperiencetemporarysimulatedarIficialdisabiliIesonadailybasis.– DistracIons–A.D.D.?– Sunlight-ImpairedVision?– Movement-Tremors/ArthriIs?– Noisyrooms-Hearingloss?
![Page 10: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/10.jpg)
DEMOS!
• Hearingimpairment– h-ps://youtu.be/5Krz-dyD-UQ?t=3m50s
• Visualimpairments– Goggles
• Motorskillimperilments(tremors)
![Page 11: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/11.jpg)
MacularDegenera3on
Glaucoma Re3ni3sPigmentosa
Cataracts
![Page 12: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/12.jpg)
GoodKarma
• WhentheWebmeetsthisaccessibilitygoal,itisaccessibletopeoplewithadiverserangeofhearing,movement,sight,andcogniIveability.
![Page 13: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/13.jpg)
ReaptheUnexpectedBenefits!
• SearchEngineOpImizaIon(SEO)• Be-eruserexperience(UX)• Mobile/deviceindependence• Avoidcostlyandembarrassinglegalissues• A-ractanewuntappedaudience!• Goodkarma!
![Page 14: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/14.jpg)
WhatareyoutesIngfor?
![Page 15: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/15.jpg)
TheevoluIonofaccessibilitystandards:1. GeneralAccessibility2. 508Compliance3. WCAG1.04. WCAG2.0• WAI-ARIA
AccessibilityLevels
![Page 16: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/16.jpg)
Accessible
TomakeasiteorapplicaIonmoreaccessibleyoudonotneedtomeetaspecificlevelofcompliance.
• Trytoreducebarriers• Makewhateverimprovementsyoucan• Makelifeeasierforyourusers
It’ssIllgoodkarma.
![Page 17: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/17.jpg)
508Compliance
• SecIon508oftheRehabilitaIonActof1973.• Itwasamendedin1998toincludewebsites.• ItrequiresFederalagenciestopurchasetechnologythatisaccessibletopeoplewithdisabiliIes.
• Itdoesnotapplytotheprivatesector,nordoesitimposerequirementsontherecipientsoffederalfunding.
• MeeIngWCAG1.0basicallymakesyou508compliant.
![Page 18: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/18.jpg)
WCAG1.0
Organizedbyaccessibilityguidelines• 14guidelinesand65checkpoints• Eachcheckpointhasbeenassignedaprioritylevel(1-3):– Priority1(A)must– Priority2(AA)should– Priority3(AAA)may
![Page 19: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/19.jpg)
Guideline 508 WCAG1.0
TextEquivalent x x
ImageMaps(client&server-side) x x
Auditorydescrip3on x
Synchronizedmul3-media x x
Color x x
NaturalLanguage x
ComplexTables x x
StyleSheets x x
DynamicContent x
Scrip3ng x x
ScreenFlicker x x
Textonlypagesaslastresort x x
Framesrequirements x x
ClearLanguage x
Forms x x
Skipnaviga3on x x
![Page 20: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/20.jpg)
WCAG1.0vs.WCAG2.0
• WCAG2.0isslightlymorestrict• Thebiggestdifferenceisemphasis• SomeitemsthatwerePriority2or3arenowPriority1(must)inWCAG2.0
• InWCAG2.0theyorganizedeachGuidelineintoaPrinciple.
![Page 21: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/21.jpg)
![Page 22: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/22.jpg)
WCAG2.0WebContentAccessibilityGuidelinesbyoverridingprinciples:
• Perceivable:Contentisavailabletothesenses(sight,hearing,and/ortouch)
• Operable:Interfaceforms,controls,andnavigaIonfuncIonwell
• Understandable:Contentandinterfacecanbecomprehended
• Robust:Contentcanbeusedreliablybyawidevarietyofuseragents,includingassisIvetechnologies
![Page 23: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/23.jpg)
![Page 24: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/24.jpg)
TheUseofColor
• Colorcannotberequiredtounderstand:– theinformaIononyourpage,– indicaInganacIon,– prompIngaresponse,– ordisInguishingavisualelement.
• However,colormustbeperceivable.
![Page 25: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/25.jpg)
Why?DesigningforColor-blindness
Monochromacy(veryrare)
Normal Protanopia(red-green)
![Page 26: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/26.jpg)
ContrastRaIo
• Defini3on:ameasurementofthevisualdifferencebetweentwocolors,expressedmathema3cally(notsubjec3vely).
• Example:ForegroundtextvsBackgroundcolor
• GoodcolorcontrastdesignensuresvisibilityandlegibilityunderawiderangeoflighIngcondiIons,screens,deviceserngs,andvisualacuity.
![Page 27: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/27.jpg)
WCAGContrastRaIoRequirements
• Font-size17pxorlessrequires4.5:1raIo• Font-size18pxormorerequires3:1raIo• .Linktextvs.bodytextrequires3:1oruseanunderline
FAILFAIL
PASS
![Page 28: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/28.jpg)
SampleContrastRaIos
1. Canyoureadmenow?1.5:1#D4D4D42. Canyoureadmenow?2.0:1#B3B3B33. Canyoureadmenow?2.5:1#B3B3B34. Canyoureadmenow?3.0:1#9494945. Canyoureadmenow?3.5:1#8888886. Canyoureadmenow?4.0:1#8080807. Canyoureadmenow?4.5:1#7777778. Canyoureadmenow?7.0:1#5A5A5A9. Canyoureadmenow?20:1#000000
![Page 29: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/29.jpg)
InsideOutside
![Page 30: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/30.jpg)
![Page 31: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/31.jpg)
ConceptofAffordance
• DefiniIon:asituaIonwhereanobject’ssensorycharacterisIcsintuiIvelyimplyitsfuncIonalityanduse.
• Bu-onsandlinksaretheretohelppeopletakethecorrectstepstoaccomplishtheirgoal.
• Theirgoalisyourgoal…whymakeithardonyourusers?
![Page 32: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/32.jpg)
Skeuomorphicvs.FlatDesignTraps
iOS4(2010)
iOS7(2014)
![Page 33: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/33.jpg)
FlatDesign2.0
Skeuomorphic Flat Flat2.0
![Page 34: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/34.jpg)
LinksandtheUseofColor
Itisnotsafetousecoloralone.• Hoverstatesaredeadonmobiledevices• Linkcolorsandtheirhoverstatesshouldbeconsistentandpersistenttheexperience
• Textshouldbeadifferentcolorthanlinks.• Thisisafailure.Thisisasuccess.• Underlineshelp
![Page 35: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/35.jpg)
FontSizes
Keepfontsizeslarger• Helpswithreadingcomprehension• Helpswithclickinglinks• Helpspeoplewithlimitedeyesight• Andyou…Haveyoueverusedyourphonewhilewalking?
![Page 36: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/36.jpg)
![Page 37: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/37.jpg)
![Page 38: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/38.jpg)
AmbiguousLinks(#3Complaint)
• Bad:– “More”– “Readmore”– “Learnmore”– “Clickhere”ßNEVERDOTHIS
• Good:– “Morenews”– “ReadfullarIcle”– “Learnmoreaboutcancer”– “ClickheretoreadmoreaboutCancer”
![Page 39: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/39.jpg)
MulImedia
Providetextequivalents:• AudioandvideosrequireCCoratranscript• ImagesrequireAlta-ribute(#4Complaint)
• Flashrequirestextequivalent• iframesneedaItlea-ribute
![Page 40: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/40.jpg)
LiveText
• Neverputtextinimageswhenitcouldbelivetext.Unlessitisameme.
• PeopledothisalotonrotaIngbanners.Theyarealreadyhardenoughtoread.
![Page 41: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/41.jpg)
Operable
![Page 42: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/42.jpg)
TouchScreens
• 40pxisroughlythesizeoftheIpofyourindexfinger.
• Makeyourmenuitems,bu-ons,andlinkslargeenoughtouse.– Improvesusabilityondesktopforeveryone– Helpspeoplewithoutfinemotorskills– Helpswhileyouarewalkingandbrowsingawebsite
![Page 43: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/43.jpg)
KeyboardAccessibility
• EveryinteracIononasiteshouldbepossiblewiththe“tab”,“spacebar”and“enter”bu-on
• “Skipover”navtomaincontent
![Page 44: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/44.jpg)
HelpUsersNavigateandFindContent
• InformaIonscent– Peoplemightnotenteryoursiteonthehomepage.– Onanydevicepeopleshouldalwaysbeabletoanswer:• WhereamI?• HowdidIgethere?• HowdoIgettowhereIwanttogo?
• GiveusersenoughImetoreadandusecontent• AllowuserstoturnoffunnecessaryanimaIon• RemoveunexpectedScreenchanges
(#5complaint)
![Page 45: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/45.jpg)
![Page 46: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/46.jpg)
![Page 47: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/47.jpg)
![Page 48: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/48.jpg)
Don’tMakeMeThink.• Text– Writeitsimple.– ProvidesummariesforlargesecIonsoftext.
– E.S.L.
• Visuals– Designitsimple.– Beconsistent.– Followdesignpa-erns,don’tinventnewones.
![Page 49: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/49.jpg)
Don’tMakeMeThink.
• Makeformseasytounderstand– Providelabelsforformelements– Providehelptext
• “Toerrishuman”– FormErrorPrevenIon– Helppeoplerecoverfromerrors
![Page 50: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/50.jpg)
WAI-ARIAWebAccessibilityIniIaIve-AccessibleRichInternetApplicaIons
WAI-ARIARoles• role="banner"–nameofthesite,Itleand/orlogo• role="navigaIon"or<nav>tag• role="main"–maincontent• role="search"–assigntotheelementcontainingthesitesearch• role="applicaIon"
• UserinterfacecomponentsdevelopedwithAjax,JavaScript,andrelatedtechnologies
![Page 51: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/51.jpg)
Robust
![Page 52: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/52.jpg)
<p>isforParagraphs
SearchenginesandscreenreadersuseHTMLtounderstandyourcontent.
• <p>forparagraphs• <ol><ul>forlists• <h1><h2><h3>isforheadings
• TablesONLYfordata.NoexcepIons
![Page 53: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/53.jpg)
HTML5PageStructure
HTML5elementtags• <nav>–navigaIon• <arIcle>–maincontent• <aside>–supporIngcontent• <secIon>–contentthatgoestogether• <div>–everythingelse
![Page 54: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/54.jpg)
Styles
• Verifythatzoominginandoutonapagedoesnotbreakthelayout.
• IfyoudisableCSS,thesiteshouldsIllmakesense.
![Page 55: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/55.jpg)
BestPracIces=FutureProofing
• MaximizecompaIbilitywithcurrentandfutureusertools
• GoogleTranslate/MulIlingualSites• Screenreaders• Webservicesandfeeds• SiteMigraIon
![Page 56: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/56.jpg)
![Page 57: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/57.jpg)
6ofthetop12ComplaintsfrompeopleusingassisIvetechnologies
haveVeryEasyFixes1. Flash-ThepresenceofinaccessibleFlashcontent2. CAPTCHA3. AmbiguousLinks-orbu]onsthatdonotmakesense4. Imageswithmissingorimproperdescrip3ons(alttext)5. Screensorpartsofscreensthatchangeunexpectedly6. Complexordifficultforms7. PoororLackofkeyboardaccessibility8. Missingorimproperheadings9. ToomanylinksornavigaIonitems10. Complexdatatables11. InaccessibleormissingsearchfuncIonality12. Lackof"skiptomaincontent"or"skipnavigaIon"links
![Page 58: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/58.jpg)
Howtotestforcompliance.
![Page 59: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/59.jpg)
DEMOS!
![Page 60: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/60.jpg)
WAVETesIngDemo• Howtoreadresults– h-p://gradschool.sandbox:8888/– h-p://trustees.sandbox:8888/– h-p://wave.webaim.org/report#/h-p%3A%2F%2Fwww.unc.edu%2F
– h-p://wave.webaim.org/report#/h-p://joelcrawfordsmith.com/
• Errorsvs.falseposiIves
![Page 61: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/61.jpg)
FalseposiIve?
3:1
![Page 62: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/62.jpg)
MouselessNavigaIonDemo
![Page 63: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/63.jpg)
ScreenReaderDemoScreenreaderscomewitheverymajorOperaIngsystemnow.• VoiceOver-OSX• NVDA-Windows• TalkBack-Android• VoiceOver-iOS
ItsnotjustJAWSanymore!Example:h-p://diversity.sandbox:8888/
![Page 64: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/64.jpg)
CAPTCHAExample
![Page 65: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/65.jpg)
Homework
1. Testsiteonh-p://wave.webaim.org/
2. TrytonavigateyoursitewiththeTABandENTERkey.
3. ExtraCredit!Tryitonascreenreader.
4. ContactDukeWebServices!
![Page 66: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/66.jpg)
GoodKarmaDIYProjects• ContentEditors
– #3AmbiguousLinkTextFix:
Nomore“LearnMore”
– #4Imageswithmissingorimproperdescrip3ons(alttext)Addalt a-ributestoimages.
– #8Improperheadings:UsePtagsandH1,H2,H3tagsproperly
• Developers:
– #6ComplexorDifficultformsCheckthateveryforminputhasalabel.
– #7PoorkeyboardaccessibilityRemove:outline: none; Fixreadorder.
– #5ScreensorpartsofscreensthatchangeunexpectedlyRemovingrotaIngbannerswillhelp.
– TextContrastRa3os:• Adddarkdrop-shadowstospecifictext(alwaysusergba)
text-shadow: 0 1px 5px rgba(0, 0, 0, 0.7), 0 1px 0px rgba(0, 0, 0, 0.5);
• Changingbodytextto#77777willpass.
![Page 67: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/67.jpg)
ReaptheGoodKarmaofWebAccessibility!
• SearchEngineOpImizaIon(SEO)• Be-eruserexperience(UX)• Mobile/deviceindependence• Avoidinglegalissues• A-racInganuntappedaudience• Goodkarma!
![Page 68: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/68.jpg)
FinalRemarks• Earlyintheproject,requirethedesigntomeetrequired
ContrastRaIos.
• RequestthattheymeetaWCAGlevel
• RequestthattheydoaWAVEtestasproof.
• Tellthemwhataproyouare.AndyouunderstandtherearefalseposiIvesonaWAVEtest.
• AskthemtoprovideashortsummaryofthereportthatexplainswhicherrorsareactuallyfalseposiIves.
![Page 69: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/69.jpg)
Checklists&QuickReferencesChecklists:• h-p://webaim.org/resources/evalquickref/• h-p://webaim.org/resources/designers/• h-p://alistapart.com/blog/post/easy-color-contrast-tesIngScreenReaders:• OSXandiOSusersalreadyhaveascreenreaderbundledwiththe
operaIngsystem:h-p://webaim.org/arIcles/voiceover/• OnlineTesIngh-p://webanywhere.cs.washington.edu/wa.php
MoreaboutAssisIveTechnologies• h-p://webaim.org/projects/screenreadersurvey4/• h-p://www.w3.org/WAI/intro/people-use-web/browsing
![Page 70: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/70.jpg)
![Page 71: Accessibility Fundamentals, Tesng, and Good Karma · Accessibility Fundamentals, Tesng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and](https://reader034.fdocuments.us/reader034/viewer/2022052012/60287f62b1706a71237713bc/html5/thumbnails/71.jpg)
ThankYou
• ContactusatDukeWebServicesifyouhavequesIonsofneedhelp.
• Followusontwi-er:@DukeWebServices
• @HeartCooksMind