$30 off During Our Annual Pro Sale. View Details »

Accessibility tips & tricks for CSS developers

Accessibility tips & tricks for CSS developers

Marco Solazzi

March 25, 2016
Tweet

More Decks by Marco Solazzi

Other Decks in Programming

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