accessibility fundamentals, tesng, and good...

71
Accessibility Fundamentals, Tes3ng, and Good Karma Help make the web be-er for all people everywhere, and reap the SEO, UX, and DI benefits. Joel H Crawford-Smith Duke Web Services, IT Analyst CerIfied Usability Analyst – Human Factors Int’l [email protected]

Upload: others

Post on 18-Oct-2020

3 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

AccessibilityFundamentals,Tes3ng,andGoodKarma

Helpmakethewebbe-erforallpeopleeverywhere,

andreaptheSEO,UX,andDIbenefits.

JoelHCrawford-SmithDukeWebServices,ITAnalystCerIfiedUsabilityAnalyst–HumanFactorsInt’[email protected]

Page 2: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

AccessibilityFundamentals,Tes3ng,andGoodKarma

TheWebisfundamentallydesignedtoworkforallpeople,whatevertheirhardware,soRware,language,culture,locaIon,orphysicalormentalability.

Page 3: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

hardware

Page 4: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

soRware

Page 5: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

language,culture

Page 6: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

locaIon

Page 7: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

physicalormentalability

•  Deaf•  Blind/LimitedSight•  AmputaIon•  ArthriIs•  Spinalcordinjury•  CoordinaIon

•  Dyslexia•  AuIsm•  A.D.D./A.D.H.D.•  Memory&Recall•  LiteracyLevel•  LanguageBarriers

Page 8: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

WhoareyoutesIngfor?

Page 9: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Everyone

•  YouandyourvisitorsexperiencetemporarysimulatedarIficialdisabiliIesonadailybasis.– DistracIons–A.D.D.?– Sunlight-ImpairedVision?– Movement-Tremors/ArthriIs?– Noisyrooms-Hearingloss?

Page 10: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

DEMOS!

•  Hearingimpairment– h-ps://youtu.be/5Krz-dyD-UQ?t=3m50s

•  Visualimpairments– Goggles

•  Motorskillimperilments(tremors)

Page 11: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

MacularDegenera3on

Glaucoma Re3ni3sPigmentosa

Cataracts

Page 12: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

GoodKarma

•  WhentheWebmeetsthisaccessibilitygoal,itisaccessibletopeoplewithadiverserangeofhearing,movement,sight,andcogniIveability.

Page 13: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

ReaptheUnexpectedBenefits!

•  SearchEngineOpImizaIon(SEO)•  Be-eruserexperience(UX)•  Mobile/deviceindependence•  Avoidcostlyandembarrassinglegalissues•  A-ractanewuntappedaudience!•  Goodkarma!

Page 14: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

WhatareyoutesIngfor?

Page 15: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

TheevoluIonofaccessibilitystandards:1.  GeneralAccessibility2.  508Compliance3.  WCAG1.04.  WCAG2.0•  WAI-ARIA

AccessibilityLevels

Page 16: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Accessible

TomakeasiteorapplicaIonmoreaccessibleyoudonotneedtomeetaspecificlevelofcompliance.

•  Trytoreducebarriers•  Makewhateverimprovementsyoucan•  Makelifeeasierforyourusers

It’ssIllgoodkarma.

Page 17: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

508Compliance

•  SecIon508oftheRehabilitaIonActof1973.•  Itwasamendedin1998toincludewebsites.•  ItrequiresFederalagenciestopurchasetechnologythatisaccessibletopeoplewithdisabiliIes.

•  Itdoesnotapplytotheprivatesector,nordoesitimposerequirementsontherecipientsoffederalfunding.

•  MeeIngWCAG1.0basicallymakesyou508compliant.

Page 18: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

WCAG1.0

Organizedbyaccessibilityguidelines•  14guidelinesand65checkpoints•  Eachcheckpointhasbeenassignedaprioritylevel(1-3):– Priority1(A)must– Priority2(AA)should– Priority3(AAA)may

Page 19: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

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

Page 20: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

WCAG1.0vs.WCAG2.0

•  WCAG2.0isslightlymorestrict•  Thebiggestdifferenceisemphasis•  SomeitemsthatwerePriority2or3arenowPriority1(must)inWCAG2.0

•  InWCAG2.0theyorganizedeachGuidelineintoaPrinciple.

Page 21: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 22: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

WCAG2.0WebContentAccessibilityGuidelinesbyoverridingprinciples:

•  Perceivable:Contentisavailabletothesenses(sight,hearing,and/ortouch)

•  Operable:Interfaceforms,controls,andnavigaIonfuncIonwell

•  Understandable:Contentandinterfacecanbecomprehended

•  Robust:Contentcanbeusedreliablybyawidevarietyofuseragents,includingassisIvetechnologies

Page 23: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 24: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

TheUseofColor

•  Colorcannotberequiredtounderstand:–  theinformaIononyourpage,–  indicaInganacIon,– prompIngaresponse,– ordisInguishingavisualelement.

•  However,colormustbeperceivable.

Page 25: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Why?DesigningforColor-blindness

Monochromacy(veryrare)

Normal Protanopia(red-green)

Page 26: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

ContrastRaIo

•  Defini3on:ameasurementofthevisualdifferencebetweentwocolors,expressedmathema3cally(notsubjec3vely).

•  Example:ForegroundtextvsBackgroundcolor

•  GoodcolorcontrastdesignensuresvisibilityandlegibilityunderawiderangeoflighIngcondiIons,screens,deviceserngs,andvisualacuity.

Page 27: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

WCAGContrastRaIoRequirements

•  Font-size17pxorlessrequires4.5:1raIo•  Font-size18pxormorerequires3:1raIo•  .Linktextvs.bodytextrequires3:1oruseanunderline

FAILFAIL

PASS

Page 28: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

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

Page 29: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

InsideOutside

Page 30: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 31: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

ConceptofAffordance

•  DefiniIon:asituaIonwhereanobject’ssensorycharacterisIcsintuiIvelyimplyitsfuncIonalityanduse.

•  Bu-onsandlinksaretheretohelppeopletakethecorrectstepstoaccomplishtheirgoal.

•  Theirgoalisyourgoal…whymakeithardonyourusers?

Page 32: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Skeuomorphicvs.FlatDesignTraps

iOS4(2010)

iOS7(2014)

Page 33: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

FlatDesign2.0

Skeuomorphic Flat Flat2.0

Page 34: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

LinksandtheUseofColor

Itisnotsafetousecoloralone.•  Hoverstatesaredeadonmobiledevices•  Linkcolorsandtheirhoverstatesshouldbeconsistentandpersistenttheexperience

•  Textshouldbeadifferentcolorthanlinks.•  Thisisafailure.Thisisasuccess.•  Underlineshelp

Page 35: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

FontSizes

Keepfontsizeslarger•  Helpswithreadingcomprehension•  Helpswithclickinglinks•  Helpspeoplewithlimitedeyesight•  Andyou…Haveyoueverusedyourphonewhilewalking?

Page 36: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 37: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 38: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

AmbiguousLinks(#3Complaint)

•  Bad:–  “More”–  “Readmore”–  “Learnmore”–  “Clickhere”ßNEVERDOTHIS

•  Good:–  “Morenews”–  “ReadfullarIcle”–  “Learnmoreaboutcancer”–  “ClickheretoreadmoreaboutCancer”

Page 39: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

MulImedia

Providetextequivalents:•  AudioandvideosrequireCCoratranscript•  ImagesrequireAlta-ribute(#4Complaint)

•  Flashrequirestextequivalent•  iframesneedaItlea-ribute

Page 40: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

LiveText

•  Neverputtextinimageswhenitcouldbelivetext.Unlessitisameme.

•  PeopledothisalotonrotaIngbanners.Theyarealreadyhardenoughtoread.

Page 41: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Operable

Page 42: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

TouchScreens

•  40pxisroughlythesizeoftheIpofyourindexfinger.

•  Makeyourmenuitems,bu-ons,andlinkslargeenoughtouse.–  Improvesusabilityondesktopforeveryone– Helpspeoplewithoutfinemotorskills– Helpswhileyouarewalkingandbrowsingawebsite

Page 43: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

KeyboardAccessibility

•  EveryinteracIononasiteshouldbepossiblewiththe“tab”,“spacebar”and“enter”bu-on

•  “Skipover”navtomaincontent

Page 44: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

HelpUsersNavigateandFindContent

•  InformaIonscent–  Peoplemightnotenteryoursiteonthehomepage.– Onanydevicepeopleshouldalwaysbeabletoanswer:•  WhereamI?•  HowdidIgethere?•  HowdoIgettowhereIwanttogo?

•  GiveusersenoughImetoreadandusecontent•  AllowuserstoturnoffunnecessaryanimaIon•  RemoveunexpectedScreenchanges

(#5complaint)

Page 45: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 46: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 47: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 48: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Don’tMakeMeThink.•  Text– Writeitsimple.–  ProvidesummariesforlargesecIonsoftext.

–  E.S.L.

•  Visuals– Designitsimple.–  Beconsistent.–  Followdesignpa-erns,don’tinventnewones.

Page 49: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Don’tMakeMeThink.

•  Makeformseasytounderstand– Providelabelsforformelements– Providehelptext

•  “Toerrishuman”– FormErrorPrevenIon– Helppeoplerecoverfromerrors

Page 50: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

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

Page 51: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Robust

Page 52: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

<p>isforParagraphs

SearchenginesandscreenreadersuseHTMLtounderstandyourcontent.

•  <p>forparagraphs•  <ol><ul>forlists•  <h1><h2><h3>isforheadings

•  TablesONLYfordata.NoexcepIons

Page 53: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

HTML5PageStructure

HTML5elementtags•  <nav>–navigaIon•  <arIcle>–maincontent•  <aside>–supporIngcontent•  <secIon>–contentthatgoestogether•  <div>–everythingelse

Page 54: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Styles

•  Verifythatzoominginandoutonapagedoesnotbreakthelayout.

•  IfyoudisableCSS,thesiteshouldsIllmakesense.

Page 55: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

BestPracIces=FutureProofing

•  MaximizecompaIbilitywithcurrentandfutureusertools

•  GoogleTranslate/MulIlingualSites•  Screenreaders•  Webservicesandfeeds•  SiteMigraIon

Page 56: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 57: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

6ofthetop12ComplaintsfrompeopleusingassisIvetechnologies

haveVeryEasyFixes1. Flash-ThepresenceofinaccessibleFlashcontent2. CAPTCHA3.  AmbiguousLinks-orbu]onsthatdonotmakesense4.  Imageswithmissingorimproperdescrip3ons(alttext)5.  Screensorpartsofscreensthatchangeunexpectedly6.  Complexordifficultforms7.  PoororLackofkeyboardaccessibility8.  Missingorimproperheadings9. ToomanylinksornavigaIonitems10. Complexdatatables11. InaccessibleormissingsearchfuncIonality12. Lackof"skiptomaincontent"or"skipnavigaIon"links

Page 58: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Howtotestforcompliance.

Page 59: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

DEMOS!

Page 60: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

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

Page 61: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

FalseposiIve?

3:1

Page 62: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

MouselessNavigaIonDemo

Page 63: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

ScreenReaderDemoScreenreaderscomewitheverymajorOperaIngsystemnow.•  VoiceOver-OSX•  NVDA-Windows•  TalkBack-Android•  VoiceOver-iOS

ItsnotjustJAWSanymore!Example:h-p://diversity.sandbox:8888/

Page 64: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

CAPTCHAExample

Page 65: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

Homework

1.  Testsiteonh-p://wave.webaim.org/

2.  TrytonavigateyoursitewiththeTABandENTERkey.

3.  ExtraCredit!Tryitonascreenreader.

4.  ContactDukeWebServices!

Page 66: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

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.

Page 67: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

ReaptheGoodKarmaofWebAccessibility!

•  SearchEngineOpImizaIon(SEO)•  Be-eruserexperience(UX)•  Mobile/deviceindependence•  Avoidinglegalissues•  A-racInganuntappedaudience•  Goodkarma!

Page 68: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

FinalRemarks•  Earlyintheproject,requirethedesigntomeetrequired

ContrastRaIos.

•  RequestthattheymeetaWCAGlevel

•  RequestthattheydoaWAVEtestasproof.

•  Tellthemwhataproyouare.AndyouunderstandtherearefalseposiIvesonaWAVEtest.

•  AskthemtoprovideashortsummaryofthereportthatexplainswhicherrorsareactuallyfalseposiIves.

Page 69: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

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

Page 70: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon
Page 71: Accessibility Fundamentals, Tesng, and Good Karmafiles.meetup.com/1264914/QA-TALK-Good-Karma-and-Web-Accessa… · • WAI-ARIA Accessibility Levels Accessible To make a site or applicaon

ThankYou

•  ContactusatDukeWebServicesifyouhavequesIonsofneedhelp.

•  [email protected]

•  Followusontwi-er:@DukeWebServices

•  @HeartCooksMind