No Apollogies: Making Apps Accessible

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.

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

August 31, 2019
Tweet

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
  8. None
  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

  17. None
  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

  21. None
  22. TARGET DARK THEME WITH CSS

  23. None
  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

  30. None
  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
  32. None
  33. KEYBOARD AND FOCUS I N T E R A C

    T I O N S
  34. None
  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