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

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.

Vitalii Bobrov

December 05, 2020
Tweet

More Decks by Vitalii Bobrov

Other Decks in Programming

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