Vitalii Bobrov "Lost in Space: Web Apps and A11Y"
1 like207 views
Vitalii Bobrov discusses the importance of web accessibility (a11y) and shares strategies for preparing applications for a11y review, emphasizing that accessibility benefits all users, not just those with disabilities. He highlights tools and techniques for ensuring color contrast, font size, and keyboard operability, along with recommendations for conducting accessibility tests. The document aims to raise awareness about creating inclusive web experiences that cater to diverse user needs.
Vitalii Bobrov "Lost in Space: Web Apps and A11Y"
- 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
- 15. LOW CONTRAST ON SUN
- 16. DEVTOOLS
- 17. ⚠ TARGET HIGH-CONTRAST WITH CSS
- 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/
- 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