Lost in Space: Web Apps and A11Y

Imagine an astronaut using your Angular application in space. Accessibility is about providing the best user experience that leads to software made with people in difficult situations in mind. Such difficulties might be temporal, permanent or caused by the environment... like Space.

I’ll prepare your app for use in the pitch black of space and brightest of sunlight. I’ll implement navigation with voice commands, use a keyboard and touch-screen with gloves. I will show you how to produce accessible software that is ready-to-use even on a spaceship.

Transcript

1. WEB APPS AND A11Y L O S T I N S PA C E VITALII BOBROV
2. VITALII BOBROV • preparing app to a11y review • @AngularWroclaw organizer • ngGirls mentor @bobrov1989 https://bobrov.dev
3. P R O J E C T S T H AT D I D N ’ T PA S S A 1 1 Y R E V I E W
4. K Y I V
5. ASTRONAUTS A L L O F U S A R E
6. DISABILITY PERMANENT SITUATIONAL NO HAND BROKEN HAND WITH BABY ZERO GRAVITY
7. DISABILITY PERMANENT SITUATIONAL BLINDNESS COLOR BLIND SUNGLASS HELMET
8. EQUAL UX FOR EVERYONE N O T O N LY F O R P E O P L E W I T H D I S A B I L I T I E S
10. WEB ACCESSIBLE BETTER Y O U C A N H E L P T O
11. COLOR AND CONTRAST V I S U A L S
13. RED-BLIND
14. https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa
15. LOW CONTRAST ON SUN
16. DEVTOOLS
17. ⚠ TARGET HIGH-CONTRAST WITH CSS
19. AMBIENT LIGHT SENSOR https://developers.google.com/web/updates/2017/09/sensors-for-the-web
20. ILLUMINANCE IN LUX 0 . 0 5 - 0 . 3 F U L L M O O N O N A C L E A R N I G H T 2 0 - 5 0 P U B L I C A R E A S W I T H D A R K S U R R O U N D I N G S 3 2 0 - 5 0 0 O F F I C E L I G H T I N G
21. https://bobrov.dev/ng-a11y-demo/#/ambient-sensor
23. TARGET DARK THEME WITH CSS
25. SIZE AND SPACE L AY O U T
26. FONT SIZE
27. • 1 4 P X • 1 6 P X • 1 8 P X IDE FONT
28. V S 18 13
29. T O O S M A L L … F O N T- S I Z E
30. SPACE BETWEEN
32. I A C C I D E N TA L LY P R E S S E D T H E W R O N G B U T T O N
34. KEYBOARD AND FOCUS I N T E R A C T I O N S
36. INERT H I D E E L E M E N T F O R I N T E R A C T I O N S https://github.com/WICG/inert
37. https://bobrov.dev/ng-a11y-demo/#/focus/trap
38. FOCUS TRAP
39. CDK C O M P O N E N T D E V K I T https://material.angular.io/cdk/a11y/overview
40. https://bobrov.dev/ng-a11y-demo/#/focus/trap
41. https://bobrov.dev/ng-a11y-demo/#/focus/trap
42. FOCUS LIST
43. https://bobrov.dev/ng-a11y-demo/#/focus/list
44. FIX, MAINTAIN, AUTOMATE T O O L S
45. V O I C E O V E R
46. L I G H T H O U S E https://developers.google.com/web/tools/lighthouse/
47. https://www.deque.com/axe/
48. UNIT AND INTEGRATION TESTS • Text alternatives and labeling • Keyboard operability • ARIA attributes
49. E2E TESTS • Color contrast • Keyboard interoperability • Document level rules
50. TESTING DEMO https://github.com/vitaliy-bobrov/ng-a11y-demo/tree/master/src/app/axe-test/dropdown
51. THANK YOU D O N ’ T G E T U S E R S L O S T I N S PA C E @bobrov1989 https://bobrov.dev