Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Vitalii Bobrov

August 31, 2019
Tweet

More Decks by Vitalii Bobrov

Other Decks in Programming

Transcript

  1. MAKING WEB APPS
    ACCESSIBLE
    N O A P O L O G I E S

    View full-size slide

  2. VITALII BOBROV
    • preparing app to a11y review
    • @AngularWroclaw organizer
    @bobrov1989
    https://bobrov.dev

    View full-size slide

  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

    View full-size slide

  4. ASTRONAUTS
    A L L O F U S A R E

    View full-size slide

  5. DISABILITY
    PERMANENT SITUATIONAL
    NO HAND BROKEN HAND WITH BABY ZERO GRAVITY

    View full-size slide

  6. DISABILITY
    PERMANENT SITUATIONAL
    BLINDNESS COLOR BLIND SUNGLASS HELMET

    View full-size slide

  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

    View full-size slide

  8. WEB ACCESSIBLE BETTER
    Y O U C A N H E L P T O

    View full-size slide

  9. COLOR AND CONTRAST
    V I S U A L S

    View full-size slide

  10. https://chrome.google.com/webstore/detail/colorblinding/dgbgleaofjainknadoffbjkclicbbgaa

    View full-size slide

  11. LOW CONTRAST ON SUN

    View full-size slide


  12. TARGET HIGH-CONTRAST WITH CSS

    View full-size slide

  13. AMBIENT LIGHT SENSOR
    https://developers.google.com/web/updates/2017/09/sensors-for-the-web

    View full-size slide

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

    View full-size slide

  15. https://ng-a11y-demo.web.app/#/ambient-sensor

    View full-size slide

  16. TARGET DARK THEME WITH CSS

    View full-size slide

  17. SIZE AND SPACE
    L AY O U T

    View full-size slide

  18. • 1 4 P X
    • 1 6 P X
    • 1 8 P X
    IDE FONT

    View full-size slide

  19. T O O S M A L L … F O N T- S I Z E

    View full-size slide

  20. SPACE BETWEEN

    View full-size slide

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

    View full-size slide

  22. KEYBOARD AND FOCUS
    I N T E R A C T I O N S

    View full-size slide

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

    View full-size slide

  24. https://ng-a11y-demo.web.app/#/focus/trap

    View full-size slide

  25. CDK
    C O M P O N E N T D E V K I T
    https://material.angular.io/cdk/a11y/overview

    View full-size slide

  26. https://ng-a11y-demo.web.app/#/focus/trap

    View full-size slide

  27. https://ng-a11y-demo.web.app/#/focus/trap

    View full-size slide

  28. https://ng-a11y-demo.web.app/#/focus/list

    View full-size slide

  29. FIX, MAINTAIN, AUTOMATE
    T O O L S

    View full-size slide

  30. V O I C E O V E R

    View full-size slide

  31. L I G H T H O U S E
    https://developers.google.com/web/tools/lighthouse/

    View full-size slide

  32. https://www.deque.com/axe/

    View full-size slide

  33. UNIT AND INTEGRATION TESTS
    • Text alternatives and labeling
    • Keyboard operability
    • ARIA attributes

    View full-size slide

  34. E2E TESTS
    • Color contrast
    • Keyboard interoperability
    • Document level rules

    View full-size slide

  35. TESTING DEMO
    https://github.com/vitaliy-bobrov/ng-a11y-demo/tree/master/src/app/axe-test/dropdown

    View full-size slide

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

    View full-size slide