Tales of Accessibility Failures

Transcript

1. Tales of Accessibility Failures Eva Ferreira – SmashingConf, 2022
2. Hi, I’m Eva! Front-end Engineer at mabl Google Developer Expert & CSSConf Argentina organizer @evaferreira92
3. Not another “This is how you do a11y” talk Good intentions gone bad. @evaferreira92
4. @evaferreira92 YOU DON’T HAVE TO LEARN FROM YOUR MISTAKES IF YOU CAN LEARN FROM MINE
5. ⚠️WARNING⚠️ This is a work in progress. I will, most definitely, keep on messing up. @evaferreira92
6. Lesson 1
7. A11y personas Understanding disabilities and assistive technologies
8. What is a disability? “Accessibility is for blind people”
9. Disability: A failed interaction between the environment and a person with a medical condition.
10. Diverse group of people, a wide range of needs. @evaferreira92
11. 15% of world’s population. has a permanent disability.
14. Assistive Technologies * Also known as AT
15. Hearing Hearing aids Captions
16. Visual Preference of keyboard over mouse
17. Screen readers • JAWS • NVDA • Narrator • VoiceOver • Orca
18. Mobility Preference of keyboard over mouse
19. Mobility Sip-and-puff Eye tracking
20. Mobility Sip-and-puff Eye tracking 💸
21. Mobility Switches
23. Lesson 2
24. Simplest things tend to have the biggest impact. I went ALL IN into aria and screen readers
25. I wrongly prioritized screen readers over keyboard navigation Begin your a11y journey with simple and impactful changes. @evaferreira92
26. Simple, impactful • Color contrast • Semantics • Keyboard navigation  Outlines 💅  Skip navigation links @evaferreira92
27. Outlines
29. @evaferreira92
30. But they are ugly! Yes, they are!
31. https://www.sarasoueidan.com Use outlines on your focusable elements
32. https://mabl.com
33. Skip navigation links
34. https://www.sarasoueidan.com
36. Skip navigation links
38. Lots impact, Low code.
39. Sometimes simple is not that simple “Code debt just called; it wants your happiness back.” @evaferreira92
40. Prioritize Impact and easy to solve @evaferreira92
41. Prioritize • Big impact, easy to solve • Mix with small impact, easy to solve  Ideal for Fridays 💃 • Big impact, hard to solve • Small impact, hard to solve @evaferreira92
42. Lesson 3
43. People mean well … Most of the time.
44. Aria-label all the things! The Infobae & the React Testing Library stories @evaferreira92
45. @evaferreira92
46. @evaferreira92
47. @evaferreira92
48. @evaferreira92
49. Why?
50. @evaferreira92 https://webaim.org/blog/aria-cause-solution
51. “Every image should have an alt text!” @evaferreira92
52. Rules for alternative texts • The alt attribute is compulsory • It can be empty if the image is decorative (alt=“”) • Do not be redundant • If it has an action, describe the action, not the image @evaferreira92
53. https://www.w3.org/WAI/tutorials/images/decision-tree
54. The SEO in the room And the story of how every image had the same alt text. @evaferreira92
55. Lesson 4
56. Testing correctly Having 98/100 on Lighthouse won’t save you.
59. Manual tests @evaferreira92
60. Manual tests • Axe Developer tools • WAVE • Keyboard navigation • Screen readers @evaferreira92
61. What do we test? We test users’ stories. @evaferreira92
62. Can a user with [assistive technology] do [action]? @evaferreira92
63. Test users’ stories • Can a user with keyboard navigation - create an account? • Can a user with a screen reader - add a product to the cart? • Can a user watch this video - using captions? @evaferreira92
64. Test for people. @evaferreira92
65. Automated tests WCAG
67. WCAG • Set of rules created by W3C a long time ago. • Standard in the industry • What gives the foundation for a11y laws all around the globe • Different success criteria depending on target audience, target country, type of company, etc. @evaferreira92
68. Of course, always aim for no errors. @evaferreira92
69. How many websites do you think pass with no errors? 5%? 20%? 40%?
70. 3.2% WebAIM Million, 2022 https://webaim.org/projects/million
71. Automated tools • Axe-core by Deque • Lighthouse • Mabl • Storybook add-on @evaferreira92
72. Automated tools • Add these to your pipelines • CI/CD should fail when requirements are not met. @evaferreira92
73. Lesson 5
74. The community & A11y ownership Team effort and gate-keeping
77. You cannot out-code bad design. Accessibility is a team effort.
78. No gate-keeping allowed. @evaferreira92
79. So, You made a mistake. What happens when you mess up.
80. You try again! * Easier said than done @evaferreira92
82. Mistakes are: • Temporal • Localized • Changeable @evaferreira92
83. You don’t need to be always right. Aim for making new mistakes instead of repeating old ones. @evaferreira92
84. You need to try, you need to care. @evaferreira92
85. Thanks! @evaferreira92