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

Listen to UI: Making Apps Accessible

Listen to UI: Making Apps Accessible

You can hear how your application sounds when assertive technology (like VoiceOver, TalkBack) turned on. But have you ever listen to it? I want you to close your eyes and try to navigate the application using keyboard and voice instructions. Then I will show how to handle all labeling, color, and navigation issues found. As a final touch, we will create e2e and unit tests for accessibility features.

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

December 05, 2020
Tweet

Transcript

  1. MAKING APPS ACCESSIBLE L I S T E N T

    O Y O U R U I :
  2. VITALII BOBROV • Lead SW Engineer at EPAM Poland •

    originally from Mykolaiv • @AngularWroclaw org and tech speaker @bobrov1989 https://bobrov.dev
  3. IF DEVELOPERS BUSINESSES ARE NOT? W H Y S H

    O U L D I C A R E ?
  4. WEB A11Y LAWSUITS • USA - 11k+ in 2019, 2020

    shows about 20% grow • EU - about 5k in 2020
  5. EUROPEAN ACCESSIBILITY ACT E A A • WCAG (Web Content

    Accessibility Guidelines) 2.1 • September 23rd was the deadline to implement it
  6. NEED IT AS WELL Y O U M I G

    H T
  7. DISABILITY PERMANENT SITUATIONAL NO HAND BROKEN HAND WITH BABY

  8. DISABILITY PERMANENT SITUATIONAL BLINDNESS COLOR BLIND SUNGLASS

  9. TEST IT

  10. None
  11. A11Y TESTING • Manual still required • Tools like Lighthouse,

    Chrome extensions • a11y testing libraries - aXe core
  12. APPLE STANDARD TOOL V O I C E O V

    E R
  13. LISTEN

  14. PROBLEMS DETECTED • Missed lang attribute • 4 tab presses

    to reach content • Wrong structure of navigation links
  15. AXE INSTALL https://github.com/dequelabs/axe-core

  16. JASMINE PAGE TEST

  17. SKIP LINK

  18. SCREEN READER ONLY CSS

  19. NAVIGATION

  20. CSS CONTENT ALT

  21. LISTEN

  22. PROBLEMS DETECTED • Images have no description • Some content

    seems to be random text • Non-descriptive link text • Hard to navigate between cards
  23. CARD

  24. FOCUS LIST I M P R O V E N

    AV I G AT I O N W I T H
  25. LISTEN

  26. PROBLEMS DETECTED • Link used as a button • Strange

    close button • Unknown input field • Focus moves outside dialog
  27. DIALOG

  28. FOCUS TRAP P R E V E N T U

    N WA N T E D F O C U S W I T H
  29. LISTEN

  30. V I S U A L S • prefers-reduced-motion •

    prefers-color-scheme • color contrast • UI elements size • focus indicator
  31. R E C A P • a11y is forced by

    laws, every user will benefit from it • care about it from the start • test it manually, with browser tools, e2e and unit tests • requires UX input
  32. THANK YOU M A K E W E B F

    O R E V E RY O N E @bobrov1989 https://bobrov.dev