Accessibility tips & tricks for CSS developers

Transcript

1. Accessibility tips & tricks for CSS developers Marco Solazzi -

   @dwightjack CSS Day 2016 - cssday.it

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

   Verona

3. HTML semantics Progressive enhancement Mobile first Responsive UX

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

7. - vision impairments - limited fine motor control - cognitive

   disabilities - hearing impairments - older people (ourselves tomorrow) For whom?

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)

9. Because we should. Why?

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. - unreadable beauty - table syndrome - outline dilemma -

    out of sight... How?

14. Unreadable beauty

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

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

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

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

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

20. 1. set html font-size to 100% 2. use rem fonts

    and em media queries 3. high-contrast optional theme Unreadable beauty

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

22. Unreadable beauty

23. Unreadable beauty

24. Table syndrome

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

26. Every tag has its place in the world document. …

    even <ruby> - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ruby

27. <table>s are evil! Let’s use <div>s … and display: table

    Table syndrome

28. <table>s are evil! Let’s use <div>s … and display: table

    Problems: 1. not semantic 2. unannounced by screen-readers Table syndrome

29. <button>s are ugly! Let’s use <span>s and <a>s with JS

    Table syndrome

30. <button>s are ugly! Let’s use <span>s and <a>s with JS

    Problems: 1. missing focus 2. different/missing keyboard interactions Table syndrome

31. Table syndrome

32. Table syndrome

33. Outline dilemma

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

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

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

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

38. Outline dilemma

39. Outline dilemma

40. Outline dilemma

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/

42. Out of sight

43. How many ways to hide something? 1. opacity: 0 2.

    visibility: hidden 3. display: none Out of sight

44. How many ways to hide something? 1. opacity: 0 2.

    visibility: hidden 3. display: none ← accessibility friendly Out of sight

45. Options for element transitions: 1. display: none onComplete 2. tabindex=”-1”

    for every link / button Out of sight

46. Don’t speak bonus:

47. Don’t speak

48. Don’t speak Warning: totally unreliable!

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

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

51. Thanks