Accessibility tips & tricks for CSS developers

Transcript

1. Accessibility
   tips & tricks for
   CSS developers
   Marco Solazzi - @dwightjack
   CSS Day 2016 - cssday.it
   

   View Slide

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

   View Slide

3. HTML semantics
   Progressive enhancement
   Mobile first
   Responsive
   UX
   

   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. If you follow best practices you’re
   already providing some accessibility
   

   View Slide

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

   View Slide

8. Because we have to.
   Goverments are enforcing accessibility
   by legislation.
   Why?
   - US: List of Web Accessibility-Related Litigation and Settlements (http://bit.ly/1n1JkQl)
   - IT: Legge Stanca (https://it.wikipedia.org/wiki/Legge_Stanca)
   

   View Slide

9. Because we should.
   Why?
   

   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. - unreadable beauty
    - table syndrome
    - outline dilemma
    - out of sight...
    How?
    

    View Slide

14. Unreadable
    beauty
    

    View Slide

15. - blindness
    - low vision
    - color blindness
    Unreadable beauty
    

    View Slide

16. Unreadable beauty
    award-winning flash site, mid 2000
    

    View Slide

17. Unreadable beauty
    award-winning flash site, mid 2000
    

    View Slide

18. Unreadable beauty
    award-winning HTML site, mid 2010
    

    View Slide

19. Unreadable beauty
    award-winning HTML site, mid 2010
    

    View Slide

20. 1. set html font-size to 100%
    2. use rem fonts and em media queries
    3. high-contrast optional theme
    Unreadable beauty
    

    View Slide

21. 1. set html font-size to 100%
    2. use rem fonts and em media queries
    3. high-contrast optional theme
    Bonus:
    Use currentColor for flexible theming
    Unreadable beauty
    

    View Slide

22. Unreadable beauty
    

    View Slide

23. Unreadable beauty
    

    View Slide

24. Table
    syndrome
    

    View Slide

25. Every tag has its place in the world
    document.
    

    View Slide

26. Every tag has its place in the world
    document.
    … even
    - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby
    

    View Slide

27. s are evil!
    Let’s use s … and display: table
    Table syndrome
    

    View Slide

28. s are evil!
    Let’s use s … and display: table
    Problems:
    1. not semantic
    2. unannounced by screen-readers
    Table syndrome
    

    View Slide

29. s are ugly!
    Let’s use s and s with JS
    Table syndrome
    

    View Slide

30. s are ugly!
    Let’s use s and s with JS
    Problems:
    1. missing focus
    2. different/missing keyboard interactions
    Table syndrome
    

    View Slide

31. Table syndrome
    

    View Slide

32. Table syndrome
    

    View Slide

33. Outline
    dilemma
    

    View Slide

34. “ … 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

35. “ … 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

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

    View Slide

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

    View Slide

38. Outline dilemma
    

    View Slide

39. Outline dilemma
    

    View Slide

40. Outline dilemma
    

    View Slide

41. 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-
    accessible-manner/
    

    View Slide

42. Out of
    sight
    

    View Slide

43. How many ways to hide something?
    1. opacity: 0
    2. visibility: hidden
    3. display: none
    Out of sight
    

    View Slide

44. How many ways to hide something?
    1. opacity: 0
    2. visibility: hidden
    3. display: none ← accessibility friendly
    Out of sight
    

    View Slide

45. Options for element transitions:
    1. display: none onComplete
    2. tabindex=”-1” for every link / button
    Out of sight
    

    View Slide

46. Don’t
    speak
    bonus:
    

    View Slide

47. Don’t speak
    

    View Slide

48. Don’t speak
    Warning: totally unreliable!
    

    View Slide

49. Don’t speak
    Always prefer SVGs (even for icons)
    

    View Slide

50. I want more!
    Resources
    - http://a11yproject.com/
    - https://www.paciellogroup.com/
    - http://webaim.org/
    - http://a11yweekly.com/
    People
    - https://twitter.com/LeonieWatson
    - https://twitter.com/stevefaulkner
    

    View Slide

51. Thanks
    

    View Slide