accessibility fundamentals, tesng, and good...

AccessibilityFundamentals,Tes3ng,andGoodKarma

Helpmakethewebbe-erforallpeopleeverywhere,

andreaptheSEO,UX,andDIbenefits.

JoelHCrawford-SmithDukeWebServices,ITAnalystCerIfiedUsabilityAnalyst–HumanFactorsInt’ljhc36@duke.edu

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.

•  AskmeaquesIon!joel.crawford@duke.edu

•  Followusontwi-er:@DukeWebServices

•  @HeartCooksMind