$30 off During Our Annual Pro Sale. View Details »

Rescue the Dead Horse

Eva Ferreira
September 07, 2021

Rescue the Dead Horse

A talk about Accessibility Technical Debt

Eva Ferreira

September 07, 2021
Tweet

More Decks by Eva Ferreira

Other Decks in Programming

Transcript

  1. Rescue the Dead Horse
    Eva Ferreira – Shift Conference, 2021

    View Slide

  2. First trip since Feb. 2020

    View Slide

  3. Hi!
    I’m Eva :)

    View Slide

  4. Dead horse?
    @evaferreira92

    View Slide

  5. Beating a
    Dead horse
    @evaferreira92

    View Slide

  6. To waste time and effort trying to do
    something that is impossible.


    Mr. Merriam-Webster

    View Slide

  7. Tech Debt.

    View Slide

  8. TECH DEBT.

    View Slide

  9. Memes
    as a coping mechanism

    View Slide

  10. @evaferreira92

    View Slide

  11. @evaferreira92

    View Slide

  12. @evaferreira92

    View Slide

  13. @evaferreira92

    View Slide

  14. @evaferreira92

    View Slide

  15. @evaferreira92

    View Slide

  16. @evaferreira92

    View Slide

  17. View Slide

  18. What is
    Technical Debt?
    And… what isn’t Technical Debt?

    View Slide

  19. ¿Bad Code?

    View Slide

  20. Bad Code = Lack
    Lack of knowledge, lack of caring, lack of quality control

    View Slide

  21. Bad code is usually
    more harmful
    than Techical Debt
    @evaferreira92

    View Slide

  22. ¿Tech Debt?

    View Slide

  23. Technical Debt is a
    conscious Trade-off

    View Slide

  24. It happens when we choose to gain something
    otherwise-unattainable immediately in return
    for paying it back (with interest) later on.


    Mr. Harry Roberts

    View Slide

  25. It happens when we choose to gain something
    otherwise-unattainable immediately in return
    for paying it back (with interest) later on.


    Mr. Harry Roberts

    View Slide

  26. The Theming Example

    View Slide

  27. !important all the things

    View Slide

  28. This is my garbage
    and I’m proud of it.
    @evaferreira92

    View Slide

  29. @evaferreira92

    View Slide

  30. @evaferreira92

    View Slide

  31. Congrats!
    You have just created
    Technical Debt!
    Now… will you repay?
    @evaferreira92

    View Slide

  32. View Slide

  33. View Slide

  34. Consequences of not repaying
    • Accumulates interests
    • Snowball effect
    • Team members are sad
    @evaferreira92

    View Slide

  35. Repaying
    Tech Debt
    The Accessibility Part

    View Slide

  36. An annual accessibility analysis of the top 1,000,000 home pages

    View Slide

  37. How many passed a
    basic WCAG test?

    View Slide

  38. WCAG includes (but not limited to)
    • Alternative texts for images
    • AA Contrast ratios
    • Labels for inputs
    • Document language attribute
    • Buttons and links with discernable texts
    @evaferreira92

    View Slide

  39. At least 20%?
    @evaferreira92
    At least 10%?
    At least05%?

    View Slide

  40. At least 20%?
    @evaferreira92
    At least 10%?
    At least05%?

    View Slide

  41. At least 20%?
    @evaferreira92
    At least 10%?
    At least05%?

    View Slide

  42. At least 20%?
    @evaferreira92
    At least 10%?
    At least05%?

    View Slide

  43. Only 2,6% passed.
    @evaferreira92

    View Slide

  44. Most common errors
    • Lack of alternative texts for images
    • Non-compliance color contrasts
    • Lack of labels for inputs
    • Lack of document language attribute
    • Buttons and links without discernable texts
    @evaferreira92

    View Slide


  45. View Slide

  46. Fun facts
    “Despite being 2021, 14,501 home pages had and 341 home
    pages had blinking content ( or text-decoration: blink).”
    https://webaim.org/projects/million/

    View Slide

  47. Why does this happen?
    Lack of accessibility is more often than not, a conscious trade-off.

    View Slide

  48. View Slide

  49. How do we
    begin repaying?
    Repaying accessibility technical debt

    View Slide

  50. Current Tech Debt
    Improvements to current a11y bugs

    View Slide

  51. Spare time to improve it
    • Small, well-defined tasks
     15% of sprint
    • Fix bugs
    • Rebuild broken components
    • Build new features
     Skip navigation, etc.
    @evaferreira92

    View Slide

  52. Track and document
    @evaferreira92

    View Slide

  53. View Slide

  54. You can’t repay what
    you don’t acknowledge
    @evaferreira92

    View Slide

  55. Avoid creating more
    (Accessibility Technical Debt)

    View Slide

  56. Long term warning!
    The following recommendations might take soooome time

    View Slide

  57. Cultural change
    in the company
    You need people who care.
    @evaferreira92

    View Slide

  58. Update processes
    • Automated tests
     Built into CI
    • Manual tests
    • QA Process
    • Internal demos with Screen Reader
    @evaferreira92

    View Slide

  59. Design Systems
    • Fix a11y here!
     Colors, contrast, font-sizes, font families
     Labels and alts
    • Whatever what Brad Frost and Jina Anne say
    @evaferreira92

    View Slide

  60. View Slide

  61. https://bradfrost.com/blog/post/enforcing-accessibility-best-practices-
    with-automatically-generated-ids/
    by Brad Frost

    View Slide

  62. @evaferreira92

    View Slide

  63. Hire Front-end developers
    @evaferreira92

    View Slide

  64. Hire Front-end developers
    @evaferreira92

    View Slide

  65. No code can fix
    bad design.
    If the design is inaccessible, so is the website.

    View Slide

  66. Bad UX flows

    View Slide

  67. View Slide

  68. View Slide

  69. View Slide

  70. @evaferreira92

    View Slide

  71. Team work
    It’s not 1999 with webmasters doing the whole thing anymore

    View Slide

  72. View Slide

  73. You can’t avoid
    Tech Debt
    But you CAN avoid putting the burden on users with disabilities

    View Slide

  74. Thank you!
    @evaferreira92

    View Slide