good karma web accessibility -...
TRANSCRIPT
![Page 1: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/1.jpg)
GoodKarma&
WebAccessibility
Helpmakethewebbe9erforallpeopleeverywhere,andreaptheSEO,UX,andDIbenefits.
JoelHCrawford-SmithDukeWebServices,ITAnalystCerLfiedUsabilityAnalyst–HumanFactorsInt’[email protected]
![Page 2: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/2.jpg)
GoodKarma&WebAccessibility
TheWebisfundamentallydesignedtoworkforallpeople,whatevertheirhardware,soUware,language,culture,locaLon,orphysicalormentalability.
![Page 3: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/3.jpg)
hardware
![Page 4: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/4.jpg)
soUware
![Page 5: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/5.jpg)
language,culture
![Page 6: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/6.jpg)
locaLon
![Page 7: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/7.jpg)
physicalormentalability
• Deaf• Blind/LimitedSight• AmputaLon• ArthriLs• Spinalcordinjury• CoordinaLon
• Dyslexia• AuLsm• A.D.D./A.D.H.D.• Memory&Recall• LiteracyLevel• LanguageBarriers
![Page 8: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/8.jpg)
GoodKarma
• WhentheWebmeetsthisaccessibilitygoal,itisaccessibletopeoplewithadiverserangeofhearing,movement,sight,andcogniLveability.
![Page 9: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/9.jpg)
ReaptheUnexpectedBenefits!
• SearchEngineOpLmizaLon(SEO)• Be9eruserexperience(UX)• Mobile/deviceindependence• Avoidcostlyandembarrassinglegalissues• A9ractanewuntappedaudience!• Goodkarma!
![Page 10: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/10.jpg)
SimulatedDisabiliLes
• YouandyourvisitorsexperiencetemporaryarLficialdisabiliLesonadailybasis.– DistracLons–A.D.D.?– Sunlight-ImpairedVision?– Movement-Tremors/ArthriLs?– Noisyrooms-Hearingloss?
![Page 11: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/11.jpg)
DEMOS!
• Hearingimpairment– h9ps://youtu.be/5Krz-dyD-UQ?t=3m50s
• Visualimpairments– Goggles
• Motorskillimperilments(tremors)
![Page 12: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/12.jpg)
MacularDegenera,on
Glaucoma Re,ni,sPigmentosa
Cataracts
![Page 13: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/13.jpg)
TheevoluLonofaccessibilitystandards:1. GeneralAccessibility2. 508Compliance3. WCAG1.04. WCAG2.0• WAI-ARIA
AccessibilityLevels
![Page 14: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/14.jpg)
Accessible
Tomakeasitemoreaccessibleyoudonotneedtomeetaspecificlevelofcompliance.
• Trytoreducebarriers• Makewhateverimprovementsyoucan• Makelifeeasierforyourvisitors
It’ssLllgoodkarma.
![Page 15: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/15.jpg)
508Compliance
• SecLon508oftheRehabilitaLonActof1973.• Itwasamendedin1998toincludewebsites.• ItrequiresFederalagenciestopurchasetechnologythatisaccessibletopeoplewithdisabiliLes.
• Itdoesnotapplytotheprivatesector,nordoesitimposerequirementsontherecipientsoffederalfunding.
• MeeLngWCAG1.0basicallymakesyou508compliant.
![Page 16: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/16.jpg)
WCAG1.0
Organizedbyaccessibilityguidelines• 14guidelinesand65checkpoints• Eachcheckpointhasbeenassignedaprioritylevel(1-3):– Priority1(A)must– Priority2(AA)should– Priority3(AAA)may
![Page 17: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/17.jpg)
Guideline 508 WCAG1.0
TextEquivalent x x
ImageMaps(client&server-side) x x
Auditorydescrip,on x
Synchronizedmul,-media x x
Color x x
NaturalLanguage x
ComplexTables x x
StyleSheets x x
DynamicContent x
Scrip,ng x x
ScreenFlicker x x
Textonlypagesaslastresort x x
Framesrequirements x x
ClearLanguage x
Forms x x
Skipnaviga,on x x
![Page 18: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/18.jpg)
WCAG1.0vs.WCAG2.0
• WCAG2.0isslightlymorestrict• Thebiggestdifferenceisemphasis• SomeitemsthatwerePriority2or3arenowPriority1(must)inWCAG2.0
• InWCAG2.0theyorganizedeachGuidelineintoaPrinciple.
![Page 19: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/19.jpg)
![Page 20: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/20.jpg)
WCAG2.0WebContentAccessibilityGuidelinesbyoverridingprinciples:
• Perceivable:Contentisavailabletothesenses(sight,hearing,and/ortouch)
• Operable:Interfaceforms,controls,andnavigaLonareoperable
• Understandable:Contentandinterfaceareunderstandable
• Robust:Contentcanbeusedreliablybyawidevarietyofuseragents,includingassisLvetechnologies
![Page 21: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/21.jpg)
![Page 22: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/22.jpg)
TheUseofColor
• Colorcannotberequiredtounderstand:– theinformaLononyourpage,– indicaLnganacLon,– prompLngaresponse,– ordisLnguishingavisualelement.
• However,colormustbeperceivable.
![Page 23: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/23.jpg)
Why?DesigningforColor-blindness
Monochromacy(veryrare)
Normal Protanopia(red-green)
![Page 24: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/24.jpg)
ContrastRaLo
• Defini,on:ameasurementofthevisualdifferencebetweentwocolors,expressedmathema,cally(notsubjec,vely).
• Example:ForegroundtextvsBackgroundcolor
• GoodcolorcontrastdesignensuresvisibilityandlegibilityunderawiderangeoflighLngcondiLons,screens,deviceserngs,andvisualacuity.
![Page 25: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/25.jpg)
WCAGContrastRaLoRequirements
• Font-size17pxorlessrequires4.5:1raLo• Font-size18pxormorerequires3:1raLo• .Linktextvs.bodytextrequires3:1oruseanunderline
FAILFAIL
PASS
![Page 26: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/26.jpg)
SampleContrastRaLos
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 27: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/27.jpg)
InsideOutside
![Page 28: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/28.jpg)
![Page 29: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/29.jpg)
ConceptofAffordance
• DefiniLon:asituaLonwhereanobject’ssensorycharacterisLcsintuiLvelyimplyitsfuncLonalityanduse.
• Bu9onsandlinksaretheretohelppeopletakethecorrectstepstoaccomplishtheirgoal.
• Theirgoalisyourgoal…whymakeithardonyourvisitors?
![Page 30: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/30.jpg)
Skeuomorphicvs.FlatDesignTraps
iOS4(2010)
iOS7(2014)
![Page 31: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/31.jpg)
FlatDesign2.0
Skeuomorphic Flat Flat2.0
![Page 32: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/32.jpg)
LinksandtheUseofColor
Itisnotsafetousecoloralone.• Hoverstatesaredead• Linkcolorsandtheirhoverstatesshouldbeconsistentandpersistent
• Textshouldbeadifferentcolorthanlinks.• Thisisafailure.Thisisasuccess.• Underlineshelp
![Page 33: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/33.jpg)
FontSizes
Keepfontsizeslarger• Helpswithreadingcomprehension• Helpswithclickinglinks• Helpspeoplewithlimitedeyesight• Andyou…Haveyoueverusedyourphonewhilewalking?
![Page 34: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/34.jpg)
![Page 35: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/35.jpg)
![Page 36: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/36.jpg)
AmbiguousLinks(#3Complaint)
• Bad:– “More”– “Readmore”– “Learnmore”– “Clickhere”ßNEVERDOTHIS
• Good:– “Morenews”– “ReadfullarLcle”– “Learnmoreaboutcancer”– “ClickheretoreadmoreaboutCancer”
![Page 37: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/37.jpg)
MulLmedia
Providetextequivalents:• AudioandvideosrequireCCoratranscript• ImagesrequireAlta9ribute(#4Complaint)
• Flashrequirestextequivalent• iframesneedaLtlea9ribute
![Page 38: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/38.jpg)
LiveText
• Neverputtextinimageswhenitcouldbelivetext.Unlessitisameme.
• PeopledothisalotonrotaLngbanners.Theyarealreadyhardenoughtoread.
![Page 39: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/39.jpg)
Operable
![Page 40: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/40.jpg)
TouchScreens
• 40pxisroughlythesizeoftheLpofyourindexfinger.
• Makeyourmenuitems,bu9ons,andlinkslargeenoughtouse.– Improvesusabilityondesktopforeveryone– Helpspeoplewithoutfinemotorskills– Helpswhileyouarewalkingandbrowsingawebsite
![Page 41: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/41.jpg)
KeyboardAccessibility
• EveryinteracLononasiteshouldbepossiblewiththe“tab”,“spacebar”and“enter”bu9on
• “Skipover”navtomaincontent
![Page 42: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/42.jpg)
HelpUsersNavigateandFindContent
• InformaLonscent– Peoplemightnotenteryoursiteonthehomepage.– Onanydevicepeopleshouldalwaysbeabletoanswer:• WhereamI?• HowdidIgethere?• HowdoIgettowhereIwanttogo?
• GiveusersenoughLmetoreadandusecontent• AllowuserstoturnoffunnecessaryanimaLon• RemoveunexpectedScreenchanges
(#5complaint)
![Page 43: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/43.jpg)
![Page 44: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/44.jpg)
![Page 45: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/45.jpg)
![Page 46: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/46.jpg)
Don’tMakeMeThink.• Text– Writeitsimple.– ProvidesummariesforlargesecLonsoftext.
– E.S.L.
• Visuals– Designitsimple.– Beconsistent.– Followdesignpa9erns,don’tinventnewones.
![Page 47: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/47.jpg)
Don’tMakeMeThink.
• Makeformseasytounderstand– Providelabelsforformelements– Providehelptext
• “Toerrishuman”– FormErrorPrevenLon– Helppeoplerecoverfromerrors
![Page 48: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/48.jpg)
WAI-ARIAWebAccessibilityIniLaLve-AccessibleRichInternetApplicaLons
WAI-ARIARoles• role="banner"–nameofthesite,Ltleand/orlogo• role="navigaLon"or<nav>tag• role="main"–maincontent• role="search"–assigntotheelementcontainingthesitesearch• role="applicaLon"
• UserinterfacecomponentsdevelopedwithAjax,JavaScript,andrelatedtechnologies
![Page 49: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/49.jpg)
Robust
![Page 50: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/50.jpg)
<p>isforParagraphs
SearchenginesandscreenreadersuseHTMLtounderstandyourcontent.
• <p>forparagraphs• <ol><ul>forlists• <h1><h2><h3>isforheadings
• TablesONLYfordata.NoexcepLons
![Page 51: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/51.jpg)
HTML5PageStructure
HTML5elementtags• <nav>–navigaLon• <arLcle>–maincontent• <aside>–supporLngcontent• <secLon>–contentthatgoestogether• <div>–everythingelse
![Page 52: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/52.jpg)
Styles
• Verifythatzoominginandoutonapagedoesnotbreakthelayout.
• IfyoudisableCSS,thesiteshouldsLllmakesense.
![Page 53: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/53.jpg)
BestPracLces=FutureProofing
• MaximizecompaLbilitywithcurrentandfutureusertools
• GoogleTranslate/MulLlingualSites• Screenreaders• Webservicesandfeeds• SiteMigraLon
![Page 54: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/54.jpg)
![Page 55: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/55.jpg)
6ofthetop12ComplaintsfrompeopleusingassisLvetechnologies
haveVeryEasyFixes1. Flash-ThepresenceofinaccessibleFlashcontent2. CAPTCHA3. AmbiguousLinks-orbu\onsthatdonotmakesense4. Imageswithmissingorimproperdescrip,ons(alttext)5. Screensorpartsofscreensthatchangeunexpectedly6. Complexordifficultforms7. PoororLackofkeyboardaccessibility8. Missingorimproperheadings9. ToomanylinksornavigaLonitems10. Complexdatatables11. InaccessibleormissingsearchfuncLonality12. Lackof"skiptomaincontent"or"skipnavigaLon"links
![Page 56: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/56.jpg)
DEMOS!
![Page 57: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/57.jpg)
MouselessNavigaLonDemo
![Page 58: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/58.jpg)
WAVETesLngDemo
• Howtoreadresults– h9p://wave.webaim.org/report#/h9p%3A%2F%2Fwww.unc.edu%2F
– h9p://wave.webaim.org/report#/h9p://joelcrawfordsmith.com/
• Errorsvs.falseposiLves
![Page 59: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/59.jpg)
FalseposiLve?
3:1
![Page 60: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/60.jpg)
ScreenReaderDemo
ScreenreaderscomewitheverymajorOperaLngsystemnow.• VoiceOver-OSX• NVDA-Windows• TalkBack-Android• VoiceOver-iOS
ItsnotjustJAWSanymore!
![Page 61: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/61.jpg)
ReaptheGoodKarmaofWebAccessibility!
• SearchEngineOpLmizaLon(SEO)• Be9eruserexperience(UX)• Mobile/deviceindependence• Avoidinglegalissues• A9racLnganuntappedaudience• Goodkarma!
![Page 62: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/62.jpg)
FinalRemarks
• Earlyintheproject,requirethedesigntomeetrequiredContrastRaLos.
• RequestthattheymeetaWCAGlevel
• RequestthattheydoaWAVEtestasproof.
• AskthemtoprovideashortsummaryofthereportthatexplainswhichWAVEerrorsareactuallyfalseposiLves.
![Page 63: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/63.jpg)
Checklists&QuickReferencesChecklists:• h9p://webaim.org/resources/evalquickref/• h9p://webaim.org/resources/designers/• h9p://alistapart.com/blog/post/easy-color-contrast-tesLngScreenReaders:• OSXandiOSusersalreadyhaveascreenreaderbundledwiththe
operaLngsystem:h9p://webaim.org/arLcles/voiceover/• OnlineTesLngh9p://webanywhere.cs.washington.edu/wa.php
MoreaboutAssisLveTechnologies• h9p://webaim.org/projects/screenreadersurvey4/• h9p://www.w3.org/WAI/intro/people-use-web/browsing
![Page 64: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/64.jpg)
![Page 65: Good Karma Web Accessibility - x86.cs.duke.edux86.cs.duke.edu/courses/spring17/compsci290.2/slides/Accessibility.pdf · CAPTCHA 3. Ambiguous Links - or bu\ons that do not make sense](https://reader031.vdocuments.mx/reader031/viewer/2022030419/5aa5ff277f8b9afa758df729/html5/thumbnails/65.jpg)
ThankYou
• ContactusatDukeWebServicesifyouhavequesLonsofneedhelp.
• Followusontwi9er:@DukeWebServices