Web Accessibility 101
- 2. @annaecook Hi, I’m Anna (she/her/hers) 👩💻 Senior Product Designer at Recurly 🎓 Master's Student in Design at CU ATLAS ♿ Dedicated to building inclusive experiences 🎨 Artist, gamer, cat mom to Felix and Onyx WHO AM I?
- 3. @annaecook Accessibility is a part of inclusivity Inclusive design is a design methodology that seeks to enable and to accommodate the full range of human diversity Inclusivity Accessibility
- 4. @annaecook Why do I focus on inclusive design? ONE QUESTION I GET A LOT…
- 5. @annaecook Accessibility is a core value at Apple and something we view as a basic human right. “ – Sarah Herrlinger, Director of Global Accessibility Policy and Initiatives, Apple
- 6. @annaecook @annaecook Who is web accessibility for?
- 7. @annaecook People with vision disabilities • Blindness • Degenerative vision loss • Colorblindness • Low vision (e.g. cataracts, diabetic retinopathy, glaucoma, etc…)
- 8. @annaecook People with auditory disabilities • Cognitive hearing loss • Neural hearing loss • Deafness
- 9. @annaecook People with motor disabilities • Paralysis • Muscular and joint conditions • Reduced dexterity • Nerve injury
- 10. @annaecook People with speaking disabilities • Muteness • Cognitive disorders which affect speech
- 11. @annaecook People with cognitive disabilities • Memory impairments • Learning disabilities • Attention disorders • Seizure disorders • Reading disorders
- 12. @annaecook Permanent Temporary Situational Touch One arm Arm injury New parent See Blind Cataract Distracted driver Hear Deaf Ear infection Bartender Speak Non-verbal Laryngitis Heavy accent Source: “Inclusive: A Microsoft Design Toolkit” by Microsoft UNIVERSAL DESIGN PRINCIPLE: Accessibility helps all people. When we consider people with permanent disabilities, we also helping people with temporary or situational disabilities: • Permanent - A disability that most likely will last indefinitely • Temporary - A disability that only exists for a short time • Situational - A disability that exists in one circumstance but will not in another
- 13. @annaecook The Americans with Disabilities Act (ADA) of 1990 The ADA is a broad civil rights law that prohibits discrimination against people with disabilities in employment, architectural design, transportation, examinations and courses, and other services offering public accommodation. www.w3.org/WAI/standards-guidelines/wcag
- 14. @annaecook THE BUSINESS VALUE 15% of people across the globe have disabilities $6 trillion global purchase power of the disabled community 81% of users pay more for products on accessible sites 2,258 federal web accessibility lawsuits were filed in 2018 3x than the number of web accessibility lawsuits in 2017 20% of components made without accessibility in mind have to be remade
- 15. @annaecook @annaecook How to follow web accessibility standards?
- 16. @annaecook What is WCAG? • The Web Content Accessibility Guidelines are universally accepted standards describing how to make products more accessible to people with disabilities, with the most recent update being WCAG 2.1. • Created by the World Wide Web Consortium also known as W3C.
- 17. @annaecook THE POUR PRINCIPLES OF WEB ACCESSIBILITY 1. Perceivable - Information and user interface components must be presentable to users in ways they can perceive. 2. Operable - User interface components and navigation must be operable. 3. Understandable - Information and the operation of user interface must be understandable. 4. Robust - Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.
- 18. @annaecook What are the acceptance levels? • This is the rating system used to indicate the level of compliance through conformity to the guidelines with A being the minimum level and AAA the maximum level of compliance. • These levels apply to elements and components, not full sites or apps.
- 19. @annaecook All WCAG guidelines fit into POUR Principle —Perceivable Guideline 1.4 — Distinguishable: Make it easier for users to see and hear content including separating foreground from background. Sub-guideline — 1.4.1 Use of Color (Level A): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1. Ref: https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum
- 21. @annaecook IN CONCLUSION: • Inclusive design includes many considerations, one of which is accessibility • Accessibility is a human right, and a competitive advantage when done well • Accessibility matters in all contexts, physical, digital or otherwise • You don’t have to be an accessibility expert to care about it and try. Keep learning!
- 22. @annaecook GOOD READS FOR BEGINNERS • Introduction to Accessibility from W3C • Accessibility Principles from W3C • Making Accessibility Accessible by Nozi Nindi • Empower All Users series by Ashley Carter • Designing for Accessibility by Steven Lambert • A guide to coding accessible developer tools by Suz Hinton • ADA Compliance Levels: How High Should You Aim? from Essential Accessibility • It’s Time to Take Accessibility Seriously by Hamish Sherlock • The Business Case for Accessibility from W3C
- 23. @annaecook TOOLS • Stark Colorblindness Simulator for Sketch • Silktide Disability Simulator - Chrome Extension • WAVE Toolbar - Chrome Extension (Mac/Win/Linux) • Color Contrast Checker from WebAIM • axe plugin for automated accessibility code review from Deque • Lighthouse automated code review from Google • ARC Toolkit - By The Paciello Group, Chrome Extension • Axe Accessibility Testing - Chrome Extension (Mac/Win/Linux) • Color Contrast Analyzer - Chrome Extension (Mac/Win/Linux) • Accessibility Glossary