190 likes | 219 Views
Discover the importance of accessible web design and how to overcome design challenges to create inclusive online experiences for all users. Explore relevant laws, guidelines, tools, and experts in the field to enhance your design practices.
E N D
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!