good karma web accessibility -...
TRANSCRIPT
GoodKarma&
WebAccessibility
Helpmakethewebbe9erforallpeopleeverywhere,andreaptheSEO,UX,andDIbenefits.
JoelHCrawford-SmithDukeWebServices,ITAnalystCerLfiedUsabilityAnalyst–HumanFactorsInt’[email protected]
GoodKarma&WebAccessibility
TheWebisfundamentallydesignedtoworkforallpeople,whatevertheirhardware,soUware,language,culture,locaLon,orphysicalormentalability.
hardware
soUware
language,culture
locaLon
physicalormentalability
• Deaf• Blind/LimitedSight• AmputaLon• ArthriLs• Spinalcordinjury• CoordinaLon
• Dyslexia• AuLsm• A.D.D./A.D.H.D.• Memory&Recall• LiteracyLevel• LanguageBarriers
GoodKarma
• WhentheWebmeetsthisaccessibilitygoal,itisaccessibletopeoplewithadiverserangeofhearing,movement,sight,andcogniLveability.
ReaptheUnexpectedBenefits!
• SearchEngineOpLmizaLon(SEO)• Be9eruserexperience(UX)• Mobile/deviceindependence• Avoidcostlyandembarrassinglegalissues• A9ractanewuntappedaudience!• Goodkarma!
SimulatedDisabiliLes
• YouandyourvisitorsexperiencetemporaryarLficialdisabiliLesonadailybasis.– DistracLons–A.D.D.?– Sunlight-ImpairedVision?– Movement-Tremors/ArthriLs?– Noisyrooms-Hearingloss?
DEMOS!
• Hearingimpairment– h9ps://youtu.be/5Krz-dyD-UQ?t=3m50s
• Visualimpairments– Goggles
• Motorskillimperilments(tremors)
MacularDegenera,on
Glaucoma Re,ni,sPigmentosa
Cataracts
TheevoluLonofaccessibilitystandards:1. GeneralAccessibility2. 508Compliance3. WCAG1.04. WCAG2.0• WAI-ARIA
AccessibilityLevels
Accessible
Tomakeasitemoreaccessibleyoudonotneedtomeetaspecificlevelofcompliance.
• Trytoreducebarriers• Makewhateverimprovementsyoucan• Makelifeeasierforyourvisitors
It’ssLllgoodkarma.
508Compliance
• SecLon508oftheRehabilitaLonActof1973.• Itwasamendedin1998toincludewebsites.• ItrequiresFederalagenciestopurchasetechnologythatisaccessibletopeoplewithdisabiliLes.
• Itdoesnotapplytotheprivatesector,nordoesitimposerequirementsontherecipientsoffederalfunding.
• MeeLngWCAG1.0basicallymakesyou508compliant.
WCAG1.0
Organizedbyaccessibilityguidelines• 14guidelinesand65checkpoints• Eachcheckpointhasbeenassignedaprioritylevel(1-3):– Priority1(A)must– Priority2(AA)should– Priority3(AAA)may
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
WCAG1.0vs.WCAG2.0
• WCAG2.0isslightlymorestrict• Thebiggestdifferenceisemphasis• SomeitemsthatwerePriority2or3arenowPriority1(must)inWCAG2.0
• InWCAG2.0theyorganizedeachGuidelineintoaPrinciple.
WCAG2.0WebContentAccessibilityGuidelinesbyoverridingprinciples:
• Perceivable:Contentisavailabletothesenses(sight,hearing,and/ortouch)
• Operable:Interfaceforms,controls,andnavigaLonareoperable
• Understandable:Contentandinterfaceareunderstandable
• Robust:Contentcanbeusedreliablybyawidevarietyofuseragents,includingassisLvetechnologies
TheUseofColor
• Colorcannotberequiredtounderstand:– theinformaLononyourpage,– indicaLnganacLon,– prompLngaresponse,– ordisLnguishingavisualelement.
• However,colormustbeperceivable.
Why?DesigningforColor-blindness
Monochromacy(veryrare)
Normal Protanopia(red-green)
ContrastRaLo
• Defini,on:ameasurementofthevisualdifferencebetweentwocolors,expressedmathema,cally(notsubjec,vely).
• Example:ForegroundtextvsBackgroundcolor
• GoodcolorcontrastdesignensuresvisibilityandlegibilityunderawiderangeoflighLngcondiLons,screens,deviceserngs,andvisualacuity.
WCAGContrastRaLoRequirements
• Font-size17pxorlessrequires4.5:1raLo• Font-size18pxormorerequires3:1raLo• .Linktextvs.bodytextrequires3:1oruseanunderline
FAILFAIL
PASS
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
InsideOutside
ConceptofAffordance
• DefiniLon:asituaLonwhereanobject’ssensorycharacterisLcsintuiLvelyimplyitsfuncLonalityanduse.
• Bu9onsandlinksaretheretohelppeopletakethecorrectstepstoaccomplishtheirgoal.
• Theirgoalisyourgoal…whymakeithardonyourvisitors?
Skeuomorphicvs.FlatDesignTraps
iOS4(2010)
iOS7(2014)
FlatDesign2.0
Skeuomorphic Flat Flat2.0
LinksandtheUseofColor
Itisnotsafetousecoloralone.• Hoverstatesaredead• Linkcolorsandtheirhoverstatesshouldbeconsistentandpersistent
• Textshouldbeadifferentcolorthanlinks.• Thisisafailure.Thisisasuccess.• Underlineshelp
FontSizes
Keepfontsizeslarger• Helpswithreadingcomprehension• Helpswithclickinglinks• Helpspeoplewithlimitedeyesight• Andyou…Haveyoueverusedyourphonewhilewalking?
AmbiguousLinks(#3Complaint)
• Bad:– “More”– “Readmore”– “Learnmore”– “Clickhere”ßNEVERDOTHIS
• Good:– “Morenews”– “ReadfullarLcle”– “Learnmoreaboutcancer”– “ClickheretoreadmoreaboutCancer”
MulLmedia
Providetextequivalents:• AudioandvideosrequireCCoratranscript• ImagesrequireAlta9ribute(#4Complaint)
• Flashrequirestextequivalent• iframesneedaLtlea9ribute
LiveText
• Neverputtextinimageswhenitcouldbelivetext.Unlessitisameme.
• PeopledothisalotonrotaLngbanners.Theyarealreadyhardenoughtoread.
Operable
TouchScreens
• 40pxisroughlythesizeoftheLpofyourindexfinger.
• Makeyourmenuitems,bu9ons,andlinkslargeenoughtouse.– Improvesusabilityondesktopforeveryone– Helpspeoplewithoutfinemotorskills– Helpswhileyouarewalkingandbrowsingawebsite
KeyboardAccessibility
• EveryinteracLononasiteshouldbepossiblewiththe“tab”,“spacebar”and“enter”bu9on
• “Skipover”navtomaincontent
HelpUsersNavigateandFindContent
• InformaLonscent– Peoplemightnotenteryoursiteonthehomepage.– Onanydevicepeopleshouldalwaysbeabletoanswer:• WhereamI?• HowdidIgethere?• HowdoIgettowhereIwanttogo?
• GiveusersenoughLmetoreadandusecontent• AllowuserstoturnoffunnecessaryanimaLon• RemoveunexpectedScreenchanges
(#5complaint)
Don’tMakeMeThink.• Text– Writeitsimple.– ProvidesummariesforlargesecLonsoftext.
– E.S.L.
• Visuals– Designitsimple.– Beconsistent.– Followdesignpa9erns,don’tinventnewones.
Don’tMakeMeThink.
• Makeformseasytounderstand– Providelabelsforformelements– Providehelptext
• “Toerrishuman”– FormErrorPrevenLon– Helppeoplerecoverfromerrors
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
Robust
<p>isforParagraphs
SearchenginesandscreenreadersuseHTMLtounderstandyourcontent.
• <p>forparagraphs• <ol><ul>forlists• <h1><h2><h3>isforheadings
• TablesONLYfordata.NoexcepLons
HTML5PageStructure
HTML5elementtags• <nav>–navigaLon• <arLcle>–maincontent• <aside>–supporLngcontent• <secLon>–contentthatgoestogether• <div>–everythingelse
Styles
• Verifythatzoominginandoutonapagedoesnotbreakthelayout.
• IfyoudisableCSS,thesiteshouldsLllmakesense.
BestPracLces=FutureProofing
• MaximizecompaLbilitywithcurrentandfutureusertools
• GoogleTranslate/MulLlingualSites• Screenreaders• Webservicesandfeeds• SiteMigraLon
6ofthetop12ComplaintsfrompeopleusingassisLvetechnologies
haveVeryEasyFixes1. Flash-ThepresenceofinaccessibleFlashcontent2. CAPTCHA3. AmbiguousLinks-orbu\onsthatdonotmakesense4. Imageswithmissingorimproperdescrip,ons(alttext)5. Screensorpartsofscreensthatchangeunexpectedly6. Complexordifficultforms7. PoororLackofkeyboardaccessibility8. Missingorimproperheadings9. ToomanylinksornavigaLonitems10. Complexdatatables11. InaccessibleormissingsearchfuncLonality12. Lackof"skiptomaincontent"or"skipnavigaLon"links
DEMOS!
MouselessNavigaLonDemo
WAVETesLngDemo
• Howtoreadresults– h9p://wave.webaim.org/report#/h9p%3A%2F%2Fwww.unc.edu%2F
– h9p://wave.webaim.org/report#/h9p://joelcrawfordsmith.com/
• Errorsvs.falseposiLves
FalseposiLve?
3:1
ScreenReaderDemo
ScreenreaderscomewitheverymajorOperaLngsystemnow.• VoiceOver-OSX• NVDA-Windows• TalkBack-Android• VoiceOver-iOS
ItsnotjustJAWSanymore!
ReaptheGoodKarmaofWebAccessibility!
• SearchEngineOpLmizaLon(SEO)• Be9eruserexperience(UX)• Mobile/deviceindependence• Avoidinglegalissues• A9racLnganuntappedaudience• Goodkarma!
FinalRemarks
• Earlyintheproject,requirethedesigntomeetrequiredContrastRaLos.
• RequestthattheymeetaWCAGlevel
• RequestthattheydoaWAVEtestasproof.
• AskthemtoprovideashortsummaryofthereportthatexplainswhichWAVEerrorsareactuallyfalseposiLves.
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
ThankYou
• ContactusatDukeWebServicesifyouhavequesLonsofneedhelp.
• Followusontwi9er:@DukeWebServices