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

Inclusive UI development tips & tricks

Inclusive UI development tips & tricks

How to establish an inclusivity development baseline for accessible UI interfaces.
@ Our Digital Experience

Marco Solazzi

November 09, 2016
Tweet

More Decks by Marco Solazzi

Other Decks in Programming

Transcript

  1. Inclusive UI
    development
    tips & tricks
    Marco Solazzi - @dwightjack
    Our Digital Experience 2016

    View Slide

  2. About me
    - Senior Front-end @ AQuest
    - Co-founder Frontenders Verona

    View Slide

  3. Accessibility

    View Slide

  4. “ … enabling as many people as possible to
    use Web sites, even when those people's
    abilities are limited in some way. ”
    Accessibility
    - https://developer.mozilla.org/en-US/docs/Web/Accessibility

    View Slide

  5. “ … enabling as many people as possible to
    use Web sites, even when those people's
    abilities are limited in some way. ”
    Accessibility
    - https://developer.mozilla.org/en-US/docs/Web/Accessibility

    View Slide

  6. Inclusive
    Development

    View Slide

  7. If you follow best practices you’re
    already providing accessibility

    View Slide

  8. + vision impairments
    + limited fine motor control
    + cognitive disabilities
    + hearing impairments
    + older people (ourselves tomorrow)
    For whom?

    View Slide

  9. + keyboard users
    + game / remote control users
    + users “in the wild”
    + non-native language speakers
    + inexperienced with using websites
    + users who can’t listen to sound at work
    For whom?

    View Slide

  10. “I’m going to do the website that way.
    If people can’t use it they can go f**k
    themselves!”
    Everyday rant...
    - random world class designer / developer

    View Slide

  11. “I’m going to put stairs here.
    If people can’t climb them they can go f**k
    themselves!”
    What if...
    - random world class architect

    View Slide

  12. Websites are like shops, restaurants and
    theatres: if you leave me out you don’t
    deserve my money.

    View Slide

  13. “Accessibility doesn't have to be perfect,
    it just needs to be a little bit better than
    yesterday.”
    - Léonie Watson

    View Slide

  14. Define an Inclusivity Baseline

    View Slide

  15. - -itis outbreak
    - Outline dilemma
    - Now you see JavaScript
    - U can't (just) touch this
    How?

    View Slide

  16. -itis
    Outbreak

    View Slide

  17. s are ugly!
    Let’s use s with JS
    Problems:
    1. missing focus
    2. missing keyboard interactions
    Symptoms

    View Slide

  18. Symptoms

    View Slide

  19. Treatment

    View Slide

  20. Outline
    dilemma

    View Slide

  21. “ … provides visual feedback for links that
    have "focus" when navigating a web
    document using the TAB key (or equivalent). ”
    Outline dilemma
    - http://www.outlinenone.com

    View Slide

  22. “ … provides visual feedback for links that
    have "focus" when navigating a web
    document using the TAB key (or equivalent). ”
    - http://www.outlinenone.com
    Outline dilemma

    View Slide

  23. default outlines are ugly!
    - http://meyerweb.com/eric/tools/css/reset/reset200802.css
    Outline dilemma

    View Slide

  24. default outlines are ugly!
    - http://meyerweb.com/eric/tools/css/reset/reset200802.css
    Outline dilemma

    View Slide

  25. Outline dilemma

    View Slide

  26. If you really can’t stand outline, remove it
    just for mouse / touch interactions.
    Outline dilemma
    - https://github.com/lindsayevans/outline.js
    - https://www.paciellogroup.com/blog/2012/04/how-to-remove-css-outlines-in-an-acc
    essible-manner/

    View Slide

  27. Now you see
    JavaScript

    View Slide

  28. Myth busting:
    Screen readers don’t use
    JavaScript

    View Slide

  29. 97.6% of screen reader users have
    JavaScript enabled.
    - http://webaim.org/projects/screenreadersurvey4/#javascript

    View Slide

  30. - keybinding for modal controls
    - dynamic tabindex management
    - aria-* attributes management
    “ From great powers… ”

    View Slide

  31. “ … could come disasters...”

    View Slide

  32. “ … could come disasters...”
    Mouse only
    interaction?

    View Slide

  33. Keyboard
    friendly
    “ … you can easily fix...”

    View Slide

  34. U can't (just)
    touch this

    View Slide

  35. “ … describes events and related interfaces
    for handling hardware agnostic pointer input
    from devices including a mouse, pen,
    touchscreen, etc. ”
    W3C Pointer Events
    - https://www.w3.org/TR/pointerevents2/

    View Slide

  36. W3C Pointer Events
    - https://www.w3.org/TR/pointerevents2/#the-pointerup-event

    View Slide

  37. W3C Pointer Events
    - http://caniuse.com/#feat=pointer
    - https://github.com/jquery/PEP/

    View Slide

  38. BTW:
    What about aria-*
    attributes?

    View Slide

  39. “ ARIA is a set of special accessibility
    attributes which can be added to any
    markup, but is especially suited to HTML.”
    Accessible Rich Internet
    Applications (ARIA)
    - https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA

    View Slide

  40. a11y progress bar

    View Slide

  41. ARIA is well supported but
    sometimes badly implemented.
    Use it wisely!

    View Slide

  42. I want more!
    Resources
    - http://a11yproject.com/
    - https://www.paciellogroup.com/
    - http://webaim.org/
    - http://a11yweekly.com/
    - https://www.w3.org/TR/wai-aria-1.1/
    People
    - https://twitter.com/LeonieWatson
    - https://twitter.com/stevefaulkner

    View Slide

  43. Thanks

    View Slide