1 / 19

Web Design

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.

langlois
Télécharger la présentation

Web Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Design Accessible & Inclusive

  2. Amy Carney Twitter: @click2carney Github: github.com/digilou WordPress: carneydevelopit.wordpress.com #100DaysOfA11y Accessible & Inclusive Web Design Hello World

  3. Visual Auditory Motor Cognitive Vestibular & Seizures Accessible & Inclusive Web Design Challenges People Face

  4. 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?

  5. Accessible & Inclusive Web Design Perceivable Operable Understandable Robust https://www.w3.org/WAI/WCAG20/quickref/ WCAG 2.0 | POUR

  6. 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

  7. Accessible & Inclusive Web Design “Interface components and navigation must be operable.” Keyboard accessible Enough time Seizures Navigable Operable

  8. Accessible & Inclusive Web Design “Information and operation of the interface must be understandable.” Readable Predictable Input assistance Understandable

  9. 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

  10. 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

  11. 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.

  12. 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

  13. Accessible & Inclusive Web Design WebAIM Checklist: webaim.org/standards/wcag/checklist Checklist for inclusive design: github.com/Heydon/inclusive-design-checklist Checklists

  14. Accessible & Inclusive Web Design World Wide Web Consortium (W3C) WebAIM Deque Systems The Paciello Group Tenon Find Accessibility Experts

  15. 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

  16. Accessible & Inclusive Web Design A11yCasts with Rob Dodson Inclusive Design 24 A11y Talks Web Accessibility Perspectives Learn From Them on YouTube

  17. Accessible & Inclusive Web Design Learn More from Instructional Websites Web Accessibility Initiative https://www.w3.org/WAI The A11y Project https://a11yproject.com

  18. 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.

  19. Accessible & Inclusive Web Design Thank You!

More Related