Lost in Space: Web Apps and A11Y

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.

4f0880beebecf17d29eb709246055e14?s=128

Vitalii Bobrov

March 16, 2019
Tweet

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

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

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

  22. None
  23. TARGET DARK THEME WITH CSS

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

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

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