accessibility fundamentals, tesng, and good karma · accessibility fundamentals, tesng, and good...
TRANSCRIPT
AccessibilityFundamentals,Tes3ng,andGoodKarma
Helpmakethewebbe-erforallpeopleeverywhere,
andreaptheSEO,UX,andDIbenefits.
JoelHCrawford-SmithDukeWebServices,ITAnalystCerIfiedUsabilityAnalyst–HumanFactorsInt’[email protected]
AccessibilityFundamentals,Tes3ng,andGoodKarma
TheWebisfundamentallydesignedtoworkforallpeople,whatevertheirhardware,soRware,language,culture,locaIon,orphysicalormentalability.
hardware
soRware
language,culture
locaIon
physicalormentalability
• Deaf• Blind/LimitedSight• AmputaIon• ArthriIs• Spinalcordinjury• CoordinaIon
• Dyslexia• AuIsm• A.D.D./A.D.H.D.• Memory&Recall• LiteracyLevel• LanguageBarriers
WhoareyoutesIngfor?
Everyone
• YouandyourvisitorsexperiencetemporarysimulatedarIficialdisabiliIesonadailybasis.– DistracIons–A.D.D.?– Sunlight-ImpairedVision?– Movement-Tremors/ArthriIs?– Noisyrooms-Hearingloss?
DEMOS!
• Hearingimpairment– h-ps://youtu.be/5Krz-dyD-UQ?t=3m50s
• Visualimpairments– Goggles
• Motorskillimperilments(tremors)
MacularDegenera3on
Glaucoma Re3ni3sPigmentosa
Cataracts
GoodKarma
• WhentheWebmeetsthisaccessibilitygoal,itisaccessibletopeoplewithadiverserangeofhearing,movement,sight,andcogniIveability.
ReaptheUnexpectedBenefits!
• SearchEngineOpImizaIon(SEO)• Be-eruserexperience(UX)• Mobile/deviceindependence• Avoidcostlyandembarrassinglegalissues• A-ractanewuntappedaudience!• Goodkarma!
WhatareyoutesIngfor?
TheevoluIonofaccessibilitystandards:1. GeneralAccessibility2. 508Compliance3. WCAG1.04. WCAG2.0• WAI-ARIA
AccessibilityLevels
Accessible
TomakeasiteorapplicaIonmoreaccessibleyoudonotneedtomeetaspecificlevelofcompliance.
• Trytoreducebarriers• Makewhateverimprovementsyoucan• Makelifeeasierforyourusers
It’ssIllgoodkarma.
508Compliance
• SecIon508oftheRehabilitaIonActof1973.• Itwasamendedin1998toincludewebsites.• ItrequiresFederalagenciestopurchasetechnologythatisaccessibletopeoplewithdisabiliIes.
• Itdoesnotapplytotheprivatesector,nordoesitimposerequirementsontherecipientsoffederalfunding.
• MeeIngWCAG1.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
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
WCAG1.0vs.WCAG2.0
• WCAG2.0isslightlymorestrict• Thebiggestdifferenceisemphasis• SomeitemsthatwerePriority2or3arenowPriority1(must)inWCAG2.0
• InWCAG2.0theyorganizedeachGuidelineintoaPrinciple.
WCAG2.0WebContentAccessibilityGuidelinesbyoverridingprinciples:
• Perceivable:Contentisavailabletothesenses(sight,hearing,and/ortouch)
• Operable:Interfaceforms,controls,andnavigaIonfuncIonwell
• Understandable:Contentandinterfacecanbecomprehended
• Robust:Contentcanbeusedreliablybyawidevarietyofuseragents,includingassisIvetechnologies
TheUseofColor
• Colorcannotberequiredtounderstand:– theinformaIononyourpage,– indicaInganacIon,– prompIngaresponse,– ordisInguishingavisualelement.
• However,colormustbeperceivable.
Why?DesigningforColor-blindness
Monochromacy(veryrare)
Normal Protanopia(red-green)
ContrastRaIo
• Defini3on:ameasurementofthevisualdifferencebetweentwocolors,expressedmathema3cally(notsubjec3vely).
• Example:ForegroundtextvsBackgroundcolor
• GoodcolorcontrastdesignensuresvisibilityandlegibilityunderawiderangeoflighIngcondiIons,screens,deviceserngs,andvisualacuity.
WCAGContrastRaIoRequirements
• Font-size17pxorlessrequires4.5:1raIo• Font-size18pxormorerequires3:1raIo• .Linktextvs.bodytextrequires3:1oruseanunderline
FAILFAIL
PASS
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
InsideOutside
ConceptofAffordance
• DefiniIon:asituaIonwhereanobject’ssensorycharacterisIcsintuiIvelyimplyitsfuncIonalityanduse.
• Bu-onsandlinksaretheretohelppeopletakethecorrectstepstoaccomplishtheirgoal.
• Theirgoalisyourgoal…whymakeithardonyourusers?
Skeuomorphicvs.FlatDesignTraps
iOS4(2010)
iOS7(2014)
FlatDesign2.0
Skeuomorphic Flat Flat2.0
LinksandtheUseofColor
Itisnotsafetousecoloralone.• Hoverstatesaredeadonmobiledevices• Linkcolorsandtheirhoverstatesshouldbeconsistentandpersistenttheexperience
• Textshouldbeadifferentcolorthanlinks.• Thisisafailure.Thisisasuccess.• Underlineshelp
FontSizes
Keepfontsizeslarger• Helpswithreadingcomprehension• Helpswithclickinglinks• Helpspeoplewithlimitedeyesight• Andyou…Haveyoueverusedyourphonewhilewalking?
AmbiguousLinks(#3Complaint)
• Bad:– “More”– “Readmore”– “Learnmore”– “Clickhere”ßNEVERDOTHIS
• Good:– “Morenews”– “ReadfullarIcle”– “Learnmoreaboutcancer”– “ClickheretoreadmoreaboutCancer”
MulImedia
Providetextequivalents:• AudioandvideosrequireCCoratranscript• ImagesrequireAlta-ribute(#4Complaint)
• Flashrequirestextequivalent• iframesneedaItlea-ribute
LiveText
• Neverputtextinimageswhenitcouldbelivetext.Unlessitisameme.
• PeopledothisalotonrotaIngbanners.Theyarealreadyhardenoughtoread.
Operable
TouchScreens
• 40pxisroughlythesizeoftheIpofyourindexfinger.
• Makeyourmenuitems,bu-ons,andlinkslargeenoughtouse.– Improvesusabilityondesktopforeveryone– Helpspeoplewithoutfinemotorskills– Helpswhileyouarewalkingandbrowsingawebsite
KeyboardAccessibility
• EveryinteracIononasiteshouldbepossiblewiththe“tab”,“spacebar”and“enter”bu-on
• “Skipover”navtomaincontent
HelpUsersNavigateandFindContent
• InformaIonscent– Peoplemightnotenteryoursiteonthehomepage.– Onanydevicepeopleshouldalwaysbeabletoanswer:• WhereamI?• HowdidIgethere?• HowdoIgettowhereIwanttogo?
• GiveusersenoughImetoreadandusecontent• AllowuserstoturnoffunnecessaryanimaIon• RemoveunexpectedScreenchanges
(#5complaint)
Don’tMakeMeThink.• Text– Writeitsimple.– ProvidesummariesforlargesecIonsoftext.
– E.S.L.
• Visuals– Designitsimple.– Beconsistent.– Followdesignpa-erns,don’tinventnewones.
Don’tMakeMeThink.
• Makeformseasytounderstand– Providelabelsforformelements– Providehelptext
• “Toerrishuman”– FormErrorPrevenIon– Helppeoplerecoverfromerrors
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
Robust
<p>isforParagraphs
SearchenginesandscreenreadersuseHTMLtounderstandyourcontent.
• <p>forparagraphs• <ol><ul>forlists• <h1><h2><h3>isforheadings
• TablesONLYfordata.NoexcepIons
HTML5PageStructure
HTML5elementtags• <nav>–navigaIon• <arIcle>–maincontent• <aside>–supporIngcontent• <secIon>–contentthatgoestogether• <div>–everythingelse
Styles
• Verifythatzoominginandoutonapagedoesnotbreakthelayout.
• IfyoudisableCSS,thesiteshouldsIllmakesense.
BestPracIces=FutureProofing
• MaximizecompaIbilitywithcurrentandfutureusertools
• GoogleTranslate/MulIlingualSites• Screenreaders• Webservicesandfeeds• SiteMigraIon
6ofthetop12ComplaintsfrompeopleusingassisIvetechnologies
haveVeryEasyFixes1. Flash-ThepresenceofinaccessibleFlashcontent2. CAPTCHA3. AmbiguousLinks-orbu]onsthatdonotmakesense4. Imageswithmissingorimproperdescrip3ons(alttext)5. Screensorpartsofscreensthatchangeunexpectedly6. Complexordifficultforms7. PoororLackofkeyboardaccessibility8. Missingorimproperheadings9. ToomanylinksornavigaIonitems10. Complexdatatables11. InaccessibleormissingsearchfuncIonality12. Lackof"skiptomaincontent"or"skipnavigaIon"links
Howtotestforcompliance.
DEMOS!
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
FalseposiIve?
3:1
MouselessNavigaIonDemo
ScreenReaderDemoScreenreaderscomewitheverymajorOperaIngsystemnow.• VoiceOver-OSX• NVDA-Windows• TalkBack-Android• VoiceOver-iOS
ItsnotjustJAWSanymore!Example:h-p://diversity.sandbox:8888/
CAPTCHAExample
Homework
1. Testsiteonh-p://wave.webaim.org/
2. TrytonavigateyoursitewiththeTABandENTERkey.
3. ExtraCredit!Tryitonascreenreader.
4. ContactDukeWebServices!
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.
ReaptheGoodKarmaofWebAccessibility!
• SearchEngineOpImizaIon(SEO)• Be-eruserexperience(UX)• Mobile/deviceindependence• Avoidinglegalissues• A-racInganuntappedaudience• Goodkarma!
FinalRemarks• Earlyintheproject,requirethedesigntomeetrequired
ContrastRaIos.
• RequestthattheymeetaWCAGlevel
• RequestthattheydoaWAVEtestasproof.
• Tellthemwhataproyouare.AndyouunderstandtherearefalseposiIvesonaWAVEtest.
• AskthemtoprovideashortsummaryofthereportthatexplainswhicherrorsareactuallyfalseposiIves.
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
ThankYou
• ContactusatDukeWebServicesifyouhavequesIonsofneedhelp.
• Followusontwi-er:@DukeWebServices
• @HeartCooksMind