Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

    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