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.

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

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

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

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

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