CSS.la #5 – a11y (Accessibility!)
Tools/tactics:
- https://contrastchecker.com/
- Don’t use outline: none!!
- ChromeVox screen reader extension: https://chrome.google.com/webstore/detail/chromevox/kgejglhpjiefppelpmljglcjbhoiplfn/related?hl=en
Group exercise ideas:
- Test sites with screen reader (ChromeVox or use Mac OS Voice over)
- Test sites with keyboard only
- Build out an Inclusive Component in a CodePens
Demo sites:
- How could tabbing through this be better: https://medium.com/topic/design
Examples of accessible sites:
Government and higher ed. sites, in general:
- https://healthcare.gov
- https://www.cdc.gov/
Not so accessible sites:
- https://www.rollingstone.com/
- https://www.grubhub.com/ (try with ChromeVox)
Resources/articles:
- https://css-tricks.com/advocating-for-accessible-ui-design/
- https://abookapart.com/products/accessibility-for-everyone
- https://davatron5000.github.io/a11y-nutrition-cards
- https://www.w3.org/TR/WCAG20/
- https://inclusive-components.design/
Slide Deck for the Talk
http://amybaldwindev.com/wp-content/uploads/2018/10/accesibilty-for-everyone.pdf
Impromptu Sass demo:
- https://codepen.io/laras126/pen/gBWjKK
- https://robots.thoughtbot.com/controlling-color-with-sass-color-functions
- https://github.com/laras126/simple-sassy-starter