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

D16df72790a8532b8e6999eb5ac0e3f7?s=128

Marco Solazzi

November 09, 2016
Tweet

Transcript

  1. Inclusive UI development tips & tricks Marco Solazzi - @dwightjack

    Our Digital Experience 2016
  2. About me - Senior Front-end @ AQuest - Co-founder Frontenders

    Verona
  3. Accessibility

  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
  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
  6. Inclusive Development

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

  8. + vision impairments + limited fine motor control + cognitive

    disabilities + hearing impairments + older people (ourselves tomorrow) For whom?
  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?
  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
  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
  12. Websites are like shops, restaurants and theatres: if you leave

    me out you don’t deserve my money.
  13. “Accessibility doesn't have to be perfect, it just needs to

    be a little bit better than yesterday.” - Léonie Watson
  14. Define an Inclusivity Baseline

  15. - <span>-itis outbreak - Outline dilemma - Now you see

    JavaScript - U can't (just) touch this How?
  16. <span>-itis Outbreak

  17. <button>s are ugly! Let’s use <span>s with JS Problems: 1.

    missing focus 2. missing keyboard interactions Symptoms
  18. Symptoms

  19. Treatment

  20. Outline dilemma

  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
  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
  23. default outlines are ugly! - http://meyerweb.com/eric/tools/css/reset/reset200802.css Outline dilemma

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

  25. Outline dilemma

  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/
  27. Now you see JavaScript

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

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

  30. - keybinding for modal controls - dynamic tabindex management -

    aria-* attributes management “ From great powers… ”
  31. “ … could come disasters...”

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

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

  34. U can't (just) touch this

  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/
  36. W3C Pointer Events - https://www.w3.org/TR/pointerevents2/#the-pointerup-event

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

  38. BTW: What about aria-* attributes?

  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
  40. a11y progress bar

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

    wisely!
  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
  43. Thanks