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