Web Design Accessible & Inclusive
Amy Carney Twitter: @click2carney Github: github.com/digilou WordPress: carneydevelopit.wordpress.com #100DaysOfA11y Accessible & Inclusive Web Design Hello World
Visual Auditory Motor Cognitive Vestibular & Seizures Accessible & Inclusive Web Design Challenges People Face
Accessible & Inclusive Web Design Americans with Disabilities Act (ADA) Equal playing field for individuals with disabilities Section 504, Rehabilitation Act of 1973 Prohibits discrimination & requires reasonable accommodation Section 508, Rehabilitation Act of 1973 Public access to information must be comparable to access available to others Section 255, Communications Act Telecommunications products/services must be accessible to people with disabilities What does the U.S. Law Say?
Accessible & Inclusive Web Design Perceivable Operable Understandable Robust https://www.w3.org/WAI/WCAG20/quickref/ WCAG 2.0 | POUR
Accessible & Inclusive Web Design “Information and components must be presentable to users in ways they can perceive.” Text alternatives Time-based media Adaptable Distinguishable Perceivable
Accessible & Inclusive Web Design “Interface components and navigation must be operable.” Keyboard accessible Enough time Seizures Navigable Operable
Accessible & Inclusive Web Design “Information and operation of the interface must be understandable.” Readable Predictable Input assistance Understandable
Accessible & Inclusive Web Design “Content must be robust enough that it can be interpreted by a wide variety of user agents, including assistive technologies.” Compatible (use valid and semantic code) Robust
Accessible & Inclusive Web Design No alt-text for images Un-semantic HTML elements Skipped headings Poor color contrast “Click here” Unassociated labels and inputs Focus outline isn’t present Common Fails
Angular React Vue Ember Bootstrap Foundation Accessible & Inclusive Web Design Developers Gone Wild There’s nothing inherently wrong with frameworks, as long as accessibility testing occurs, and efforts are made to meet your users where they are.
Accessible & Inclusive Web Design Keyboard WAVE extension aXe Core & Coconut Chrome Dev Tools audit WebAIM color contrast checker Screen Readers (VoiceOver, NVDA, Narrator) Magnifiers (Mac, Windows) and zoom High Contrast Mode Testing Tools
Accessible & Inclusive Web Design WebAIM Checklist: webaim.org/standards/wcag/checklist Checklist for inclusive design: github.com/Heydon/inclusive-design-checklist Checklists
Accessible & Inclusive Web Design World Wide Web Consortium (W3C) WebAIM Deque Systems The Paciello Group Tenon Find Accessibility Experts
Accessible & Inclusive Web Design Marcy Sutton @marcysutton Deborah Edwards-Onoro @redcrew Adrian Roselli @aardrian Leonie Watson @LeonieWatson Carie Fisher @cariefisher Heydon Pickering @heydonworks Follow Them on Twitter github.com/joe-watkins/top-people-to-follow-in-web-accessibility
Accessible & Inclusive Web Design A11yCasts with Rob Dodson Inclusive Design 24 A11y Talks Web Accessibility Perspectives Learn From Them on YouTube
Accessible & Inclusive Web Design Learn More from Instructional Websites Web Accessibility Initiative https://www.w3.org/WAI The A11y Project https://a11yproject.com
Accessible & Inclusive Web Design It’s never too late to start. Be a Champion What may seem like a minor inconvenience for you, can be a major barrier for someone else.
Accessible & Inclusive Web Design Thank You!