No Apollogies: Making Apps Accessible

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. MAKING WEB APPS ACCESSIBLE N O A P O L O G I E S
2. VITALII BOBROV • preparing app to a11y review • @AngularWroclaw organizer @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. ASTRONAUTS A L L O F U S A R E
5. DISABILITY PERMANENT SITUATIONAL NO HAND BROKEN HAND WITH BABY ZERO GRAVITY
6. DISABILITY PERMANENT SITUATIONAL BLINDNESS COLOR BLIND SUNGLASS HELMET
7. 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
9. WEB ACCESSIBLE BETTER Y O U C A N H E L P T O
10. COLOR AND CONTRAST V I S U A L S
11. **
12. RED-BLIND **
13. https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa
14. DEVTOOLS
15. LOW CONTRAST ON SUN
16. ⚠ TARGET HIGH-CONTRAST WITH CSS
18. AMBIENT LIGHT SENSOR https://developers.google.com/web/updates/2017/09/sensors-for-the-web ⚠
19. 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
20. https://ng-a11y-demo.web.app/#/ambient-sensor
22. TARGET DARK THEME WITH CSS
24. SIZE AND SPACE L AY O U T
25. FONT SIZE
26. • 1 4 P X • 1 6 P X • 1 8 P X IDE FONT
27. V S 18 13
28. T O O S M A L L … F O N T- S I Z E
29. SPACE BETWEEN
31. 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
33. KEYBOARD AND FOCUS I N T E R A C T I O N S
35. 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
36. https://ng-a11y-demo.web.app/#/focus/trap
37. FOCUS TRAP
38. CDK C O M P O N E N T D E V K I T https://material.angular.io/cdk/a11y/overview
39. https://ng-a11y-demo.web.app/#/focus/trap
40. https://ng-a11y-demo.web.app/#/focus/trap
41. FOCUS LIST
42. https://ng-a11y-demo.web.app/#/focus/list
43. FIX, MAINTAIN, AUTOMATE T O O L S
44. V O I C E O V E R
45. L I G H T H O U S E https://developers.google.com/web/tools/lighthouse/
46. https://www.deque.com/axe/
47. UNIT AND INTEGRATION TESTS • Text alternatives and labeling • Keyboard operability • ARIA attributes
48. E2E TESTS • Color contrast • Keyboard interoperability • Document level rules
49. TESTING DEMO https://github.com/vitaliy-bobrov/ng-a11y-demo/tree/master/src/app/axe-test/dropdown
50. 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