Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Tales of Accessibility Failures

Eva Ferreira
September 19, 2022

Tales of Accessibility Failures

Shift Conference, Croatia / September 2022

Eva Ferreira

September 19, 2022

More Decks by Eva Ferreira

Other Decks in Programming


  1. Hi, I’m Eva! Front-end Engineer at mabl Google Developer Expert

    & CSSConf Argentina organizer @evaferreira92
  2. Not another “This is how you do a11y” talk Accessibility

    mistakes, failed assumptions and myths I mistakenly believed in. @evaferreira92
  3. ⚠️WARNING⚠️ This is a work in progress. I will, most

    definitely, keep on messing up. @evaferreira92
  4. Simplest things tend to have the biggest impact. I went

    ALL IN into aria and screen readers
  5. I wrongly prioritized screen readers over keyboard navigation Begin your

    a11y journey with simple and impactful changes. @evaferreira92
  6. Simple, impactful • Color contrast • Semantics • Labels on

    forms • Keyboard navigation  Outlines 💅  Skip navigation links @evaferreira92
  7. Sometimes simple is not that simple “Code debt just called;

    it wants your happiness back.” @evaferreira92
  8. 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
  9. 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
  10. The SEO in the room And the story of how

    every image had the same alt text. @evaferreira92
  11. Manual tests • Axe Developer tools • WAVE • Keyboard

    navigation • Screen readers @evaferreira92
  12. 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
  13. 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
  14. Automated tools • Axe by Deque • Lighthouse • Mabl

    • Storybook add-on @evaferreira92
  15. Automated tools • Add these to your pipelines • CI/CD

    should fail when requirements are not met. @evaferreira92
  16. You don’t need to be always right. Aim for making

    new mistakes instead of repeating old ones. @evaferreira92