Tales of Accessibility Failures

Shift Conference, Croatia / September 2022

Transcript

1. Tales of Accessibility Failures Eva Ferreira – Shift Conference, 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 Accessibility mistakes, failed assumptions and myths I mistakenly believed in. @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. A11y personas Understanding disabilities and assistive technologies
7. What is a disability? “Accessibility is for blind people”
8. Disability: A failed interaction between the environment and a person with a medical condition.
9. Diverse group of people, a wide range of needs @evaferreira92
10. 15% of world’s population. has a permanent disability. @evaferreira92
12. Simplest things tend to have the biggest impact. I went ALL IN into aria and screen readers
13. I wrongly prioritized screen readers over keyboard navigation Begin your a11y journey with simple and impactful changes. @evaferreira92
14. Simple, impactful • Color contrast • Semantics • Labels on forms • Keyboard navigation  Outlines 💅  Skip navigation links @evaferreira92
15. Outlines
16. @evaferreira92
17. https://www.sarasoueidan.com Use outlines on your focusable elements
18. https://developer.mozilla.org
19. Skip navigation links
21. Sometimes simple is not that simple “Code debt just called; it wants your happiness back.” @evaferreira92
22. Prioritize Impact and easy to solve @evaferreira92
23. Impact, use common sense @evaferreira92
24. Easy to solve, depends on the codebase @evaferreira92
25. 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
26. People mean well … Most of the time.
27. Aria-label all the things! The Infobae & the React Testing Library stories @evaferreira92
28. @evaferreira92
29. @evaferreira92
30. @evaferreira92
31. @evaferreira92
32. Why?
33. @evaferreira92 https://webaim.org/blog/aria-cause-solution
34. “Every image should have an alt text!” @evaferreira92
35. 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
36. https://www.w3.org/WAI/tutorials/images/decision-tree
37. The SEO in the room And the story of how every image had the same alt text. @evaferreira92
38. Testing correctly Having 98/100 on Lighthouse won’t save you.
41. Manual tests @evaferreira92
42. Manual tests • Axe Developer tools • WAVE • Keyboard navigation • Screen readers @evaferreira92
43. What do we test? We test users’ stories. @evaferreira92
44. Can a user with [assistive technology] do [action]? @evaferreira92
45. 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
46. Test for people. @evaferreira92
47. Automated tests @evaferreira92
48. 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
49. Of course, always aim for no errors. @evaferreira92
50. Automated tools • Axe by Deque • Lighthouse • Mabl • Storybook add-on @evaferreira92
51. Automated tools • Add these to your pipelines • CI/CD should fail when requirements are not met. @evaferreira92
52. The community & A11y ownership Team effort and gate-keeping
53. You cannot out-code bad design. Accessibility is a team effort.
54. No gate-keeping allowed. @evaferreira92
55. So, You made a mistake. What happens when you mess up.
56. You try again! * Easier said than done @evaferreira92
58. Mistakes are: • Temporal • Localized • Changeable @evaferreira92
59. You don’t need to be always right. Aim for making new mistakes instead of repeating old ones. @evaferreira92
60. You need to try, you need to care. @evaferreira92
61. Thanks! @evaferreira92