1. SelfishAccessibilityPresentedbyAdrianRoselliforUXSingapore2014#uxsg

2. AboutAdrianRoselli Co-wriDenfourbooks. Technicaleditorfortwobooks. WriDenoverfiJyarKcles,mostrecentlyfor.netMagazineandWebStandardsSherpa.GreatbedKmereading! 3. AboutAdrianRoselli MemberofW3CHTMLWorkingGroup,W3CAccessibilityTaskForce,fiveW3CCommunityGroups. Buildingforthewebsince1994. Founder,owneratAlgonquinStudios(AlgonquinStudios.com). LearnmoreatAdrianRoselli.com. AvoidonTwiDer@aardrian.Iwarnedyou. 4. Whatisa11y? Anumeronymforaccessibility: ThefirstandlastleDer, ThenumberofcharactersomiDed. ProminentonTwiDer(characterrestricKons): #a11y Examples: l10nlocalizaKon i18ninternaKonalizaKonAintlanguagefunsies? 5. AccessibilityGetsNoRespectCyberspace(gray)LimeRickey(green)Online(blue)Infairness,ShermanWilliamsneedstocomeupwithalotofcolornames... 6. AccessibilityGetsNoRespecthoweverIthinktheteamcouldhavedonebeDerthanthis. 7. WhatWellCover BoringStaKsKcs HowtoBeSelfish BasicTests SomeTechniques QuesKons(ongoing!)Workwithme,people. 8. BoringStaKsKcs1of4secKons. 9. AnyDisability IntheUnitedStates: 10.4%aged21-64yearsold, 25%aged65-74yearsold, 50%aged75+. Includes: Visual Hearing Mobility CogniKvehDp://www.who.int/mediacentre/factsheets/fs282/en/hDp://www.disabilitystaKsKcs.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012 10. VisionImpairments 285millionworldwide: 39millionareblind, 246millionhavelowvision, 82%ofpeoplelivingwithblindnessareaged50andabove. 1.8%ofAmericansaged21-64. 4.0%ofAmericansaged65-74. 9.8%ofAmericansaged75+.hDp://www.who.int/mediacentre/factsheets/fs282/en/hDp://www.disabilitystaKsKcs.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012 11. HearingImpairments 360millionpeopleworldwidehavedisablinghearingloss. 17%(36million)ofAmericanadultsreportsomedegreeofhearingloss: 18%aged45-64yearsold, 30%aged65-74yearsold, 47%aged75+yearsold.hDp://www.who.int/mediacentre/factsheets/fs300/en/hDps://www.nidcd.nih.gov/health/staKsKcs/Pages/quick.aspx 12. MobilityImpairments IntheUnitedStates: 5.5%aged21-64yearsold. 15.6%aged65-74yearsold. 32.9%aged75+.hDp://www.disabilitystaKsKcs.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012 13. CogniKveImpairments Dyslexia, Dyscalculia, Memoryissues, DistracKons(ADD,ADHD), IntheUnitedStates: 4.3%aged21-64yearsold. 5.4%aged65-74yearsold. 14.4%aged75+.hDp://www.disabilitystaKsKcs.org/reports/2012/English/HTML/report2012.cfm?fips=2000000&html_year=2012&subBuDon=Get+HTML 14. HowtoBeSelfish2of4secKons. 15. WebAIMsHierarchyforMoKvaKngAccessibilityChangehDp://webaim.org/blog/moKvaKng-accessibility-change/ 16. MyHierarchyforMoKvaKngAccessibilityChangeIsbeDer,no? 17. GetngOlder Affects(nearly)everyone, Carriesrisksandsideeffects, Isnotfortheyoung.ImsKllexperimenKngwithit. 18. RisingDamponFlickr. 19. DarrenBaldwinonFlickr. 20. Accidents Brokenlimbs, Eyeinjuries, Hearinginjuries, Headtrauma.Allofthesehavehappenedtome,mulKpleKmes. 21. JamesLeeonFlickr. 22. RevStanonFlickr. 23. LetIdeasCompeteonFlickr. 24. FluffySteveonFlickr. 25. PaulTownsendonFlickr. 26. ButImInvincible! MulK-tasking, Sunlight, EaKngatyourdesk, Noheadphoneshandy, ContentisnotinyournaKvelanguage.Thesunistryingtokillme. 27. hDps://twiDer.com/aardrian/statuses/388733408576159744 28. ShawnLiuonFlickr. 29. BitznbitezonFlickr. 30. MarilleonFlickr. 31. barockschlossonFlickr. 32. SebonFlickr. 33. A.DavyonFlickr. 34. RaulLieberwirthonFlickr. 35. TimNorrisonFlickr. 36. SteveRhodesonFlickr. 37. SuperFantasKconFlickr. 38. JacobEnosonFlickr. 39. WorldBankPhotoCollecKononFlickr. 40. LarsKrisKanFlemonFlickr. 41. TechSupport Thinkofyourfamily! ThinkofyourKmespenthelpingthem! Thinkofthewastedholidays!Thisiswhywehatetheholidays. 42. RobertSimmonsonFlickr. 43. TheMessage SupporKngaccessibilitynowhelpstoservefutureyou.Thereisnotry. 44. TheMessage SupporKngaccessibilitynowhelpstoservefutureyou. SupporKngaccessibilitynowhelpsinjuredyou,encumberedyou.Thereisnotry. 45. TheMessage SupporKngaccessibilitynowhelpstoservefutureyou. SupporKngaccessibilitynowhelpsinjuredyou,encumberedyou. Getngyoungerdeveloperstobuyinhelpsfutureyouifyouteachthemwell.Thereisnotry. 46. BasicTests3of4secKons. 47. ClickonFieldLabels Whenyouclicklabeltextnexttoatextbox,doesthecursorappearinthefield? Whenyouclicklabeltextnexttoaradio/checkbox,doesitgettoggled? Whenyouclicklabeltextnexttoaselectmenu,doesitgetfocus?hDp://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/ 48. UnplugYourMouse Turnoffyourtrackpad,sKck,trackball,etc. Canyouinteractwithallcontrols(links,menus,forms)withonlythekeyboard? Canyoutellwhichitemhasfocus? DoesthetabordermatchyourexpectaKon?hDp://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/ 49. TurnoffImages CanyousKllmakesenseofthepage? Iscontentmissing? CanyousKllusethesite? Isyouralttextuseful?hDp://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/ 50. TurnonHighContrastMode Windowsonly. Backgroundimagesandcolorsarereplaced. Textcolorsarereplaced. Doesthismakeyoursiteunusable?hDp://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/hDp://blog.adrianroselli.com/2012/08/css-background-images-high-contrast-mode.html 51. TurnoffCSS DoesimportantcontentorfuncKonalitydisappear? Doerrormessagesorotheritemsthatrelyonvisualcuesmakesense? IscontentsKllinareasonableorder? Doanystyles(colors,texteffects,etc.)remain?hDp://www.karlgroves.com/2013/09/05/the-6-simplest-web-accessibility-tests-anyone-can-do/ 52. TestforColorblindness/Contrast Isthereenoughcontrast? Arehyperlinks,menus,etc.sKllvisible? Tools: ChromeColorContrastAnalyzer LeaVerousContrastRaKo WebAIMColorContrastChecker CheckMyColours.comhDp://www.inpixelitrust.fr/blog/en/Kps-create-accessible-color-paleDe/hDp://alistapart.com/blog/post/easy-color-contrast-tesKng 53. Protanopia 54. Deuteranopia 55. Tritanopia 56. LookforCapKons&Transcripts Dovideo/audioclipshavetextalternaKves? Arelinkstoclosed-capKonsortranscriptsbuiltintotheplayerorseparatetextlinks? IsthereanaudiodescripKonavailable? Tools: MediaAccessAustraliaYouTubecapKoningtutorial,VimeocapKoningtutorial, TiffanyBrownsWebVTTtutorial, DIYResourcesforClosedCapKoningandTranscripKonfrom3PlayMedia.hDp://webaim.org/techniques/capKons/ 57. hDps://www.youtube.com/watch?v=zCqN_cCLnnk 58. Hyperlinks! Isthereanyclickhere,more,linkto?hDp://www.sitepoint.com/15-rules-making-accessible-links/ 59. Hyperlinks! Isthereanyclickhere,more,linkto? Areyouusingall-caps,URLs,emoKcons?hDp://www.sitepoint.com/15-rules-making-accessible-links/ 60. Hyperlinks! Isthereanyclickhere,more,linkto? Areyouusingall-caps,URLs,emoKcons? Doyouwarnbeforeopeningnewwindows?hDp://www.sitepoint.com/15-rules-making-accessible-links/ 61. Hyperlinks! Isthereanyclickhere,more,linkto? Areyouusingall-caps,URLs,emoKcons? Doyouwarnbeforeopeningnewwindows? Dolinkstodownloadsprovidehelpfulinfo?hDp://www.sitepoint.com/15-rules-making-accessible-links/ 62. Hyperlinks! Isthereanyclickhere,more,linkto? Areyouusingall-caps,URLs,emoKcons? Doyouwarnbeforeopeningnewwindows? Dolinkstodownloadsprovidehelpfulinfo? AreyouusingpaginaKonlinks?hDp://www.sitepoint.com/15-rules-making-accessible-links/ 63. Hyperlinks! Isthereanyclickhere,more,linkto? Areyouusingall-caps,URLs,emoKcons? Doyouwarnbeforeopeningnewwindows? Dolinkstodownloadsprovidehelpfulinfo? AreyouusingpaginaKonlinks? Areyourlinksunderlined(orotherwiseobvious)?hDp://www.sitepoint.com/15-rules-making-accessible-links/ 64. Hyperlinks! Isthereanyclickhere,more,linkto? Areyouusingall-caps,URLs,emoKcons? Doyouwarnbeforeopeningnewwindows? Dolinkstodownloadsprovidehelpfulinfo? AreyouusingpaginaKonlinks? Areyourlinksunderlined(orotherwiseobvious)? Istherealttextforimagelinks?hDp://www.sitepoint.com/15-rules-making-accessible-links/ 65. Hyperlinks! Isthereanyclickhere,more,linkto? Areyouusingall-caps,URLs,emoKcons? Doyouwarnbeforeopeningnewwindows? Dolinkstodownloadsprovidehelpfulinfo? AreyouusingpaginaKonlinks? Areyourlinksunderlined(orotherwiseobvious)? Istherealttextforimagelinks? Isthelinktextconsistent?hDp://www.sitepoint.com/15-rules-making-accessible-links/ 66. hDp://blog.adrianroselli.com/2014/03/i-dont-care-what-google-did-just-keep.html 67. SomeTechniques4of4secKons. 68. Checklist Accessibilityisnotachecklist.hDp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/ 69. Checklist Accessibilityisnotachecklist. Accessibilityisanongoingprocess.SomemightcallitaconKnuum.Some. 70. StairamphDp://accessibility.net.nz/blog/the-problems-with-ramps-blended-into-stairs/DeanBouchardonFlickr 71. UserStories Components: User, Outcome, Value. WriKng: Asuser,Iwantoutcome. Asuser,Iwantoutcomesothatvalue. Inordertogetvalueasuser,Iwantoutcome.HowtoWriteUserStoriesforWebAccessibility 72. SelfishUserStories Asauseronasun-litpa=o,Iwanttobeabletoreadthecontentandseethecontrols.AddbeerandasauserImayhavetroublefocusing. 73. SelfishUserStories Asauserinbedwithasleepingspouse,IwanttowatchatrainingvideoinsilencesothatIcangetcaughtupatwork.Asauserwhodoesntwanttogetpunchedforhavingslackedoffatwork. 74. SelfishUserStories Inordertoclicklinksasauserwithnoelbowroomincoachclasswitha=nytrackpad,Iwantclickareastobelargeenoughandadequatelyspaced.Asauserincoachclasswhoalsopaidtoomuchforthedrinkhesspillingonhiskeyboard. 75. SelfishUserStories AsauserdistractedbytheTV,IwantclearheadingsandlabelssothatIdontlosemyplace.Asauserwhoreallyshouldbefinishinghisworkintheoffice. 76. UserStories PhysicalImpairment Asakeyboard-onlyuser,Iwanttobeabletousetheen=reapplica=on.Thisincludesseeingwhathasfocusandnotgetnglostinoff-screenelements. 77. UserStories PhysicalImpairment Asakeyboard-onlyuser,Iwanttobeabletousetheen=reapplica=on. Asakeyboard-onlyuser,IwanttonavigateaproductlistwiththetabkeysothatIcanfindtherightop=on.Arrowkeysareacceptableaswell,makingsurethatitiscleartotheuser. 78. UserStories PhysicalImpairment Asakeyboard-onlyuser,Iwanttobeabletousetheen=reapplica=on. Asakeyboard-onlyuser,IwanttonavigateaproductlistwiththetabkeysothatIcanfindtherightop=on. Inordertoclicklinksasalimited-mobilityuser,Iwantclickareastobelargeenoughandadequatelyspaced.ElseImayclickthewrongitemandhavetohitthebackbuDon,whichcanbeKmeconsuming. 79. UserStories VisualImpairment Asacolorblinduser,Iwanttobeabletoseelinksinpagecontent.Underlinesareimportant,butusersalsoliketoknowwhattheyclickedalready. 80. UserStories VisualImpairment Asacolorblinduser,Iwanttobeabletoseelinksinpagecontent. Asalow-visionuser,IwanttozoomthepagesothatIcanreadthecontent.Withoutthetextoverlappingitselforeveryotheritemonthepage. 81. UserStories VisualImpairment Asacolorblinduser,Iwanttobeabletoseelinksinpagecontent. Asalow-visionuser,IwanttozoomthepagesothatIcanreadthecontent. Inordertousethesiteasablinduser,Iwanttouseascreenreadertonavigate.Goodheadings,clearstructure,landmarkrolestojumparoundthepage. 82. UserStories HearingImpairment Asalow-hearinguser,Iwanttobeabletoaccesstranscripts.Fromaclearlink,notthroughsomeacrobaKcstofindthem. 83. UserStories HearingImpairment Asalow-hearinguser,Iwanttobeabletoaccesstranscripts. Asalow-hearinguser,Iwantaccesstoclosedcap=onssothatIcanusetrainingvideos.Timedtomatchthevideoisimportant. 84. UserStories HearingImpairment Asalow-hearinguser,Iwanttobeabletoaccesstranscripts. Asalow-hearinguser,Iwantaccesstoclosedcap=onssothatIcanusetrainingvideos. Inordertopar=cipateinawebinarasadeafuser,Iwantreal-=mecap=oningortranscripts.Thiscanbetricky,sinceyoullneedtohavearesourcetypinginreal-Kme. 85. UserStories CogniKveImpairment Asauserwithaves=bulardisorder,Iwanttobeabletodisableparallaxscrolling.Butyoudontjustuseitfornoreason,right? 86. UserStories CogniKveImpairment Asauserwithaves=bulardisorder,Iwanttobeabletodisableparallaxscrolling. Asauserwithdyscalculia,Iwantdis=nctnumberfieldsforeachblockofdigitsinacreditcardnumbersothatIcanpurchaseaproduct.Youcanauto-detectcardtype.DothesameforexpiraKondate. 87. UserStories CogniKveImpairment Asauserwithaves=bulardisorder,Iwanttobeabletodisableparallaxscrolling. Asauserwithdyscalculia,Iwantdis=nctnumberfieldsforeachblockofdigitsinacreditcardnumbersothatIcanpurchaseaproduct. Inordertonotgetconfusedonpageswithlongtextpassagesasauserwithdyslexia,Iwantcontrolovertextsize,spacing,and/oralignment.Attheveryleast,turnofjusKfiedtext. 88. PersonasAdrian Workswhenheshouldberelaxing,relaxeswhenheshouldbeworking. Livesbetweenmotorcycles. WorkslateatnightwiththeTVon. Usessub-KtlesinNe}lix. Keepsallscreensasdarkaspossible.ThatphotoisfromofficialID. 89. PersonasBookExcerpt:AWebforEveryone,bySarahHorton,WhitneyQuesenbery 90. ManifestoforAccessibleUX ComingSoon!(ThePacielloGroup) Lookingtotheseexamples: LeanUXManifesto ManifestoforAgileSoMwareDevelopment UKGov.DataServicesDesignPrinciplesWatchthisspace:hDp://www.paciellogroup.com/blog/2014/08/developing-a-manifesto-for-accessible-ux/ 91. AccessibleDesignMaturityConKnuum ComingSoon!(ThePacielloGroup) VariaKononJessMcMullinsRoughDesignMaturityConKnuum:1. NoConsciousDesign,2. Style,3. FuncKonandForm,4. ProblemSolving,5. Framing.Watchthisspace:hDp://www.paciellogroup.com/blog/2014/06/accessibility-maturity-conKnuum/ 92. QuesKonsThisisntasecKon,youshouldhavebeenaskingallalong. 93. Resources WebAccessibilityandOlderPeople:Mee=ngtheNeedsofAgeingWebUsershDp://www.w3.org/WAI/older-users/Overview.php EasyChecks-AFirstReviewofWebAccessibilityhDp://www.w3.org/WAI/eval/preliminary HowPeoplewithDisabili=esUsetheWeb:OverviewhDp://www.w3.org/WAI/intro/people-use-web/Overview.htmlInaddiKontothegemsIvesprinkledthroughout. 94. Resources 2.11ARIARole,State,andPropertyQuickReferencehDp://www.w3.org/TR/aria-in-html/#aria-role-state-and-property-quick-reference 2.12Defini=onsofStatesandProper=es(allaria-*a^ributes)hDp://www.w3.org/TR/aria-in-html/#definiKons-of-states-and-properKes-all-aria--aDributesInaddiKontothegemsIvesprinkledthroughout. 95. Resources a11yTipshDp://dboudreau.tumblr.com/ HowtoWriteUserStoriesforWebAccessibilityhDp://www.interacKveaccessibility.com/blog/how-write-user-stories-accessibility-requirements BookExcerpt:AWebforEveryonehDp://uxmag.com/arKcles/book-excerpt-a-web-for-everyoneInaddiKontothegemsIvesprinkledthroughout. 96. SelfishAccessibilityPresentedbyAdrianRoselliforUXSingapore2014SlidesfromthistalkwillbeavailableathDp://rosel.li/uxsgMythanksandapologies.