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 full-size slide

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

    View full-size slide

  3. HTML semantics
    Progressive enhancement
    Mobile first
    Responsive
    UX

    View full-size 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 full-size 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 full-size slide

  6. If you follow best practices you’re
    already providing some accessibility

    View full-size slide

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

    View full-size 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 full-size slide

  9. Because we should.
    Why?

    View full-size 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 full-size 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 full-size slide

  12. Websites are like shops, restaurants and
    theatres: if you leave me out you don’t
    deserve my money.

    View full-size slide

  13. - unreadable beauty
    - table syndrome
    - outline dilemma
    - out of sight...
    How?

    View full-size slide

  14. Unreadable
    beauty

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size 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 full-size slide

  22. Unreadable beauty

    View full-size slide

  23. Unreadable beauty

    View full-size slide

  24. Table
    syndrome

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size 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 full-size slide

  31. Table syndrome

    View full-size slide

  32. Table syndrome

    View full-size slide

  33. Outline
    dilemma

    View full-size 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 full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  38. Outline dilemma

    View full-size slide

  39. Outline dilemma

    View full-size slide

  40. Outline dilemma

    View full-size 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Don’t
    speak
    bonus:

    View full-size slide

  46. Don’t speak

    View full-size slide

  47. Don’t speak
    Warning: totally unreliable!

    View full-size slide

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

    View full-size slide

  49. 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 full-size slide