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

    WEB APPS AND A11Y L O S T I N

    S PA C E VITALII BOBROV
  2. 2.

    VITALII BOBROV • preparing app to a11y review • @AngularWroclaw

    organizer • ngGirls mentor @bobrov1989 https://bobrov.dev
  3. 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. 4.
  5. 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
  6. 9.
  7. 12.
  8. 13.
  9. 16.
  10. 18.
  11. 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
  12. 22.
  13. 24.
  14. 26.
  15. 27.

    • 1 4 P X • 1 6 P X

    • 1 8 P X IDE FONT
  16. 28.
  17. 29.

    T O O S M A L L … F

    O N T- S I Z E
  18. 31.
  19. 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
  20. 33.
  21. 35.
  22. 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
  23. 39.

    CDK C O M P O N E N T

    D E V K I T https://material.angular.io/cdk/a11y/overview
  24. 46.

    L I G H T H O U S E

    https://developers.google.com/web/tools/lighthouse/
  25. 48.
  26. 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