Accessing Accessible Accessibility

The World Health Organization states that one billion people live with disabilities. And estimates put internet usage with a screen reader as high as 3.4% of all internet traffic around the world. Web accessibility can help.

So what is web accessibility and who needs it? Is engineering accessibility enough? How do you build an cross-functional accessibility culture? And what can you do to prevent accessibility regressions?

I had all the same questions… and only four months to guarantee all our consumer user flows were accessible. Well, what happened? Come learn what it takes to lead a web accessibility movement within your company!

Transcript

1. A C C E S S I N G A C C E S S I B L E A C C E S S I B I L I T Y B Y: J E N N I F E R W O N G
2. J E N N I F E R W O N G S O F T WA R E E N G I N E E R @ M Y B L U E W R I S T B A N D M O C H I M A C H I N E . C O M W H O A M I ?
3. P R I V I L E G E C H E C K • Cisgender • Straight • Middle to upper middle class • No physical, social, or learning disabilities • College educated • Socially acceptable body type
4. A C C E S S I B I L I T Y I N T E R E S T • jQuery SF • Bay Area Accessibility and Inclusive Design
5. W H AT I S W E B A C C E S S I B I L I T Y ? S O O O …
6. – W I K I P E D I A “Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities. When sites are correctly designed, developed and edited, all users have equal access to information and functionality.”
8. Turkish Airlines!
9. W H O N E E D S A C C E S S I B I L I T Y ?
10. E V E RY O N E !
11. W H O I S E V E RY O N E ? • Visual: Blindness, low vision, poor eyesight, color blindness • Motor / Mobility: Difficulty or inability to use the hands, tremors, muscle slowness, loss of fine muscle control, Parkinson's Disease, muscular dystrophy, cerebral palsy, stroke • Auditory: Deafness, hearing impairments, hard of hearing • Seizures: Photo epileptic seizures caused by flashing effects. • Cognitive / Intellectual: Developmental disabilities, learning disabilities (dyslexia, dyscalculia, etc.), and cognitive disabilities affecting memory, attention, developmental "maturity," problem- solving and logic skills
12. T H E M Y T H O F T H E M I N O R I T Y U S E R S TAT I S T I C S
13. • 18.7% of the U.S. population have some type of disability and 12.6% have a severe disability. • 3.4% of the Romanian population have some type of disability. • Up to 7.5% of the internet population world wide is estimated to have a disability. T H E U S & W O R L D W I D E S TAT I S T I C S
14. • 28.1% of sessions are people over 45. • The bounce rate for this population is higher for people over 45, which may be due to usability issues. A P R E V I O U S C O M PA N Y S TAT I S T I C S
15. W H Y A C C E S S I B I L I T Y ?
16. – M E “You’re already here. At this talk. So let’s be a11y allies!”
17. • Section 504 (US - 1973) • Section 508 (US - 1973) • Law No. 448 (RO - 2006) • Regarding the Protection and Promotion of the Rights of Disabled Persons I T ’ S T H E L A W W H Y A C C E S S I B I L I T Y ?
18. W E B A C C E S S I B I L I T Y L A W S • Australia • Canada • China • Brazil • Hong Kong • India • Israel • Japan • New Zealand • Norway • Republic of Korea • Switzerland • Taiwan • United States • European Union • Denmark • Finland • France • Germany • Ireland • Italy • Netherlands • Portugal • Spain • Sweden • United Kingdom (?)
19. B R U C E M A G U I R E V S . S Y D N E Y O R G A N I Z I N G C O M M I T T E E F O R T H E O LY M P I C G A M E S ( S O C O G ) • June 1999: Maguire filed a complaint with the Human Rights & Equal Opportunities Commission under the DDA. • Maguire could not access the contents of the Olympic Games website. • Maguire won. • SOCOG did not make the changes, and was fined AU$20,000
20. – B R U C E M A G U I R E “It's an ongoing campaign to raise awareness about web accessibility and to keep asserting the fact that people with a disability have as much right to choice and inclusion as the rest of the community.”
21. • National Federation for the Blind v. Target (2008 - paid US$6M) • National Agency for Payments and Social Inspections issued 167 fines totaling $310,000 (2011 - 2012) • National Council for Combatting Discrimination v. City Halls for public transit access (2014) O T H E R L A W S U I T S W H Y A C C E S S I B I L I T Y ?
22. • Accessibility automatically improves the SEO of websites • Googlebot is the world’s most prolific blind user of the internet W H Y A C C E S S I B I L I T Y ? S E O Affirmative
23. H O W - T O A C C E S S I B I L I T Y ?
24. S TA N D A R D S H O W T O A C C E S S I B I L I T Y
25. • Web Content Accessibility Guidelines (WCAG 2.0) • Section 508 (US) S TA N D A R D S W E B S TA N D A R D S
26. • Does not sufficiently put user at heart of the process • Does not specifically address accessibility for those with learning or cognitive disabilities • Does not keep up with current technology (2008) • Guidelines are difficult to navigate S TA N D A R D S C R I T I C I S M S
27. • Seattle Link Light Rail Train • Real world example of accessibility for those with cognitive disabilities • Each station has an image and color S TA N D A R D S C O G N I T I V E D I S A B I L I T I E S
28. • Accessibility Guidelines (AG) • Approved on November 4, 2016 • https://www.w3.org/WAI/GL/wiki/ Process_of_Designing_Silver • You can participate! S TA N D A R D S S I LV E R !
29. T E S T I N G H O W T O A C C E S S I B I L I T Y
30. • Use the Tab key to move through a website • Try using standard keyboard shortcuts T E S T I N G K E Y B O A R D N AV I G AT I O N
31. • JAWS • ZoomText • Window-Eyes • NVDA • VoiceOver • TalkBack T E S T I N G S C R E E N R E A D E R S
32. S C R E E N R E A D E R S T E S T I N G
34. • Braille readers • High contrast keyboards T E S T I N G A S S I S T I V E T E C H N O L O G Y
37. • Mouth stick • Head wand • Chin controller T E S T I N G A S S I S T I V E T E C H N O L O G Y
39. • Eye tracking device • Single switch onscreen keyboard T E S T I N G A S S I S T I V E T E C H N O L O G Y
41. • Wave by WebAim • aXe by Deque University • tota11y by Khan Academy T E S T I N G W E B VA L I D AT O R S
42. • WebAim • Contrast Checker • Accessible Colors T E S T I N G C O L O R C O N T R A S T
43. T E S T I N G N O C O F F E E
44. • Remove CSS • In person user testing • Blindfolds, blacked out glasses, turn off screen brightness • Color blindness or low vision simulator T E S T I N G O T H E R I D E A S
45. C O D I N G H O W T O A C C E S S I B I L I T Y
46. • Don’t use <div> as <span> • Don’t use <span> as <a> • Don’t use <a> as <button> C O D I N G S E M A N T I C H T M L
47. - P U P P Y C AT “USE THE SWORD AS A SWORD.”
48. • Clear heading structure • Use <nav>, <hgroup>, <header>, <main>, <section>, <aside>, <article> and <footer> when appropriate to indicate layout C O D I N G S E M A N T I C H T M L
49. • alt=“something descriptive and easily understandable” • alt=“” when decorative with no other function • Text description if a complex graphic, e.g. map or chart C O D I N G I M A G E S , M A P S , C H A R T S
50. • Inputs need <label> • Make sure they are associated! • for=“”
 name=“” • Consistency (Labels & Buttons across site) C O D I N G F O R M S
51. • Non color indicator • Clear :hover and :focus states C O D I N G L I N K S & B U T T O N S
52. • Don’t use tabindex if you can avoid it. • If you can’t, only use tabindex=0 or tabindex=-1 • 0 indicates that the element should be placed in the default navigation order. • -1 removes the element from the default navigation flow and allows it to receive programmatic focus (from a link or with scripting). C O D I N G TA B O R D E R I N G
53. • Closed captions • No auto play! • A way to pause, start, and stop • Transcript C O D I N G V I D E O S A N D A N I M AT I O N S
54. A R I A H O W T O A C C E S S I B I L I T Y
55. W 3 C WAI ARIA: Web Accessibility Initiative Accessible Rich Internet Applications
56. B E C A R E F U L A R I A V S . A RYA
57. • Roles • States • Properties A R I A S T R U C T U R E
58. • Main indicator of type • Allows tools to present and support interaction with an object consistent with user expectations of other objects of that type, e.g. role=“form” A R I A R O L E S
59. • Abstract • Landmark • Document • Widget A R I A R O L E S
60. • aria-busy • aria-disabled • aria-grabbed • aria-hidden • aria-invalid A R I A S TAT E S
61. • aria-atomic • aria-controls • aria-describedby • aria-dropeffect • aria-flowto • aria-haspopup • aria-label • aria-labelledby • aria-live • aria-owns • aria-relevant A R I A P R O P E R T I E S
62. • Visible Link at top of page • Visible link elsewhere on page • Invisible link • Invisible link, visible with keyboard focus A R I A S K I P L I N K S
64. P R E V E N T I N G R E G R E S S I O N S H O W T O A C C E S S I B I L I T Y
65. • Unit Tests • Automation Tests • Modular, reusable components P R E V E N T I N G R E G R E S S I O N S T E S T S A N D R E U S E
66. N A R R AT O R TA L K B A C K V O I C E O V E R D E M O T I M E !
67. N A R R AT O R • Microsoft! • Start & Stop: Windows logo key + Ctrl + Enter • View All Commands: Caps Lock + F1
68. TA L K B A C K • Android! 4.0+ has more options • How to turn on TalkBack • TalkBalk > Settings > Launch TalkBack tutorial • Touch to explore
 Double tap
 Two finger scroll
71. V O I C E O V E R • Apple OSX and iOS • Start & Stop (Desktop) • Command + F5 • Open VoiceOver Utility
74. A N A 1 1 Y S T O RY About a place where I worked
75. A L L I L A C K E R S TA R T E R
76. • Benefits • Sales • Legal • Consumer • International A C Q U I R I N G B U Y I N S TA R T E R
77. Accessibility audit on main consumer user flows
78. C R O S S F U N C T I O N A L T E A M • Alby, Maggie, Daniel (Nashville), Lucas (Mendoza), Maxi (Mendoza), Octavio (Mendoza): Engineering • Tricia: Content Strategy • Randy: Account Exec (Schools) • Sun, Tom: Design • Allison: Customer Support (WeRock) • Senna: Quality Assurance (QA) • Julia: Legal
79. • Google Drive (centralized) • Videos • Internal Docs D O C U M E N TAT I O N B E S T P R A C T I C E S E V E N T B R I T E
80. • Color Contrast Analyser • tota11y (on Dev & QA) • eslint-plugin-jsx-a11y • Acceptance Tests W H AT W E U S E D T O O L S
81. C O L O R C O N T R A S T A N A LY S E R ( F O R S K E T C H ) T O O L S
82. T O TA 1 1 Y T O O L S
83. A C C E P TA N C E T E S T S W H AT W E U S E
86. • Benchmarks • Jira Dashboard • Goals • Deadlines • Involve a Program Manager P R O J E C T M A N A G E M E N T A N A 1 1 Y S T O RY
87. • 2 tickets • per team (~3-7 developers) • per sprint (two weeks) • for 10 sprints I N I T I A L E S T I M AT E A N A 1 1 Y S T O RY
88. A C C E S S I B I L I T Y D A S H B O A R D A N A 1 1 Y S T O RY
89. W O R K A L O N E D O N ’ T
90. A C C E S S I B I L I T Y W O R K S H O P V O I C E O V E R
91. - M E A F T E R E V E RY O N E F R E A K E D O U T “We must work as a team.”
92. L U C A S PA D O VA N S P R E A D
93. W H AT H A P P E N E D ? S O O O …
94. - M E “It’s a work in progress. Sorry for any convenience caused.”
95. F U T U R E P L A N S • Complete all of our Jira Tickets • Build out Accessibility Process checklist • For Product, Design, Engineering, QA • Focused effort from Frontend Foundry team
96. R E S O U R C E S YAY !
97. R E S O U R C E S • WebAim • w3 WAI WCAG • Web a11y Slack Channel • Bay Area Accessibility and Inclusive Design • Google Accessibility
98. J E N N A 1 1 Y