Inclusive UI development tips & tricks

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

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