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.

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
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