Accessibility (when you don't have time to read the manual)

Given at RailsConf 2017

Transcript

1. Accessibility: When you don’t have time to read the manual Or How I Learned to Love The WCAG 2.0 Guidelines Katie Walsh, Developer
2. Shops on Rudaki Avenue
3. Pop quiz! Which site do you think is more accessible? A B
4. What is accessibility? aka “a11y” “The ability for users and search engines to access and comprehend content.” - Google SEO Starter Guide Making it possible for all users to use your website.
5. MINASWAN Matz Is Nice And So We Are Nice ...to all of our users. Approximately 20% of the population have some kind of disability. Source: WebAIM: webaim.org/intro/
6. Companies that have been sued http://www.karlgroves.com/2011/11/15/list-of-web-accessibility-related-litigation-and-settlements/ http://www.thefashionlaw.com/home/ralph-lauren-dash-slapped-with-civil-rights-lawsuits http://www.lflegal.com/category/digital-accessibility/ For more information on digital accessibility litigation, check out; Lainy Feingold’s blog: http://www.lflegal.com/category/digital-accessibility/ Karl Grove’s litigation list: http://www.karlgroves.com/2011/11/15/list-of-web-accessibility-related-litigation-and-settlements/
7. We can all benefit Not all disabilities are permanent Figure: Inclusive: A Microsoft Design Toolkit
8. How easy is it to use your app... ...after spraining your wrist? (touch) ...after your contacts fall out? (sight impairment) ...outside on a sunny day? (sight impairment) ...after 3 shots of tequila? (motor function impairment, possible cognitive impairment)
11. “There are 331 accessibility issues with your application.”
14. The journey of 331 issues begins with a single step... A wildly inaccurate paraphrasing of Lao Zi.
15. Web Content Accessibility Guidelines 2.0 pronounced “wuh-cag” The industry standard for accessibility guidelines written by the W3C. Level A - Basic Level AA - Standard Level AAA - Superstar
16. Perceivable Operable Understandable Robust The Principles
17. Easy Dr. Seuss Medium Ernest Hemingway Tedious James Joyce Painful The WCAG 2.0 Documentation Excruciating Marcel Proust The Readability Scale
18. Is there an easier way to get started?
19. Accessibility Dev Tools for Chrome Smells Like TDD Smells Like TDD
20. How to test your own app (Hint: Automated tools are not enough.) Test with an automated tool. Test with keyboard navigation. Test with a screen reader.
21. Let’s recap! Perceivable Operable Understandable Robust
22. Perceivable Images need alternative text if they convey meaning. (WCAG 1.1.1 ) Text should have good contrast. (WCAG 1.4.3 )
23. Operable Link text should be meaningful (WCAG 2.4.4 )
24. Understandable Form fields should have visible labels. The “for” attribute will programmatically associate the label and the field. (WCAG 3.3.2 ) Alway include the human language of the page. (WCAG 3.1.1 )
25. Robust Test your app with keyboard navigation and with a screenreader. Automated tools cannot find all accessibility issues.
26. More resources WCAG 2.0 references: The Actual WCAG 2.0 Guidelines How to Read the WCAG 2.0 Guidelines, Luke McGrath (paid) WebAIM WCAG 2.0 Checklist (free) Google Accessibility Courses: Intro Course & Udacity Course (both free) Checklists for Product Design: Vox Media & WebAIM Books: Inclusive Design Patterns, Heydon Pickering & A Web for Everyone, Sarah Horton
27. Tools for testing Chrome Accessibility Dev Tools (Chrome extension) WebAIM WAVE Tool (browser plugin and website) Tenon.io (website) Axe (Chrome and Firefox extensions) Pa11y (a set of open source testing tools) AccessLint CI (CI testing tools)
28. Screen readers for testing VoiceOver (built-in on Mac & iPhone) ChromeVox (Chrome extension - free) NVDA (Windows - free) JAWS (Windows - free trial)
29. Your Mission, Should You Choose to Accept It 1) Run the audit on your app. 2) Share a screenshot with @KatieTheDev and and share what you are going to fix first. 3)