good karma web accessibility -...

GoodKarma&

WebAccessibility

Helpmakethewebbe9erforallpeopleeverywhere,andreaptheSEO,UX,andDIbenefits.

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

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.

•  AskmeaquesLon!joel.crawford@duke.edu

•  Followusontwi9er:@DukeWebServices