More Related Content
Similar to Inclusive Design for Web Development Teams
Similar to Inclusive Design for Web Development Teams (20)
Recently uploaded
Recently uploaded (20)
Inclusive Design for Web Development Teams
- 1. WEB ACCESSIBILITY INTRO TO INCLUSIVE DESIGN
- 2. ACCESSIBILITY 2 Making websites “more” usable by disabled persons. 39 MILLION 285 MILLION 1 every 5 seconds
- 3. INCLUSIVE DESIGN 3 “The key to inclusive design is not to target specific groups, it’s to not exclude groups arbitrarily.” — Heydon Pickering
- 6. THE BUTTON EXAMPLE • Zoom: Your custom button image is not scalable • User disables image loading: YOUR BUTTON DISAPPEARS • High Contrast Mode: background images disabled • <div> is not :focus-able (keyboard users miss it) • Button text (in img) cannot be translated. “THE INCLUSIVE DESIGNER” 6
- 7. THE IMPACT • Better User Experience for EVERYONE KEY BENEFITS: • Reduces site maintenance needs • Reduces server load & optimizes page load times • Responsive design is more accommodating • Future-thinking: legal implications • Customer satisfaction, retention, & loyalty 7
- 8. 8 WCAG 2 at a Glance Perceivable Provide text alternatives for non-text content. Provide captions and other alternatives for multimedia. Create content that can be presented in different ways, including by assistive technologies, without losing meaning. Make it easier for users to see and hear content. Operable Make all functionality available from a keyboard. Give users enough time to read and use content. Do not use content that causes seizures. Help users navigate and find content. Understandable Make text readable and understandable. Make content appear and operate in predictable ways. Help users avoid and correct mistakes. Robust Maximize compatibility with browsers and user tools. This page provides a summary of Web Content Accessibility Guidelines (WCAG 2.0); however, it is paraphrased and it is not a definitive version. Please see the following key resources for learning and using WCAG 2.0: WCAG Overview — www.w3.org/WAI/intro/wcag How to Meet WCAG 2.0: A customizable quick reference to WCAG 2.0 requirements (Success Criteria) and techniques — www.w3.org/WAI/WCAG20/quickref Online at www.w3.org/WAI/WCAG20/glance Copyright © 2008 W3C® (MIT, ERCIM, Keio). Status: Updated 9 March 2011
- 11. DESIGNERS • Color Contrast • Visual AND Text cues INCLUSIVE DESIGN PRACTICES 11
- 12. DESIGNERS • Clear & Consistent Navigation • Label Req’d Form Elements* • Headings <h2> - <h6> (Structural vs. Aesthetic) • Responsive Viewport Layouts (Consider Zoom) • Font Size & Line Spacing INCLUSIVE DESIGN PRACTICES 12
- 14. DEVELOPERS • Linearization • Content-First Design (MVP) • Label Form Elements* • Page Language attribute • Semantic + ARIA Landmarks INCLUSIVE DESIGN PRACTICES 14
- 15. DEVELOPERS • Use Descriptive ALT Tags • Helpful Error Feedback • Relative Proportions – No fixed sizes • Screen Reader Compatibility • JAWS • ZoomText • Window-Eyes • NVDA • VoiceOver (Native Mac) INCLUSIVE DESIGN PRACTICES 15
- 16. INCLUSIVE DESIGN • User Friendly for ALL • Easily Navigable for ALL • Information Accessible for ALL • Forward-thinking • Require Incremental Changes to Our Workflow 16
- 17. RESOURCES All • “Inclusive Design Patterns” (Heydon Pickering) (ebook) • WCAG 2.0: https://www.w3.org/WAI/intro/wcag.php • Quick Reference on WCAG 2.0 Compliance: https://www.w3.org/WAI/WCAG20/quickref/#ensure- compat-rsv • White Paper (Use Case): http://www.wsi- ic.com/PConnolly/FileContent/improve_website.pdf Designers: • http://www.dasplankton.de/ContrastA/ • http://colorsafe.co/ • https://www.paciellogroup.com/resources/contrastana lyser/ • http://www.colorhexa.com/ • https://www.w3.org/WAI/gettingstarted/tips/designing. html Developers: • https://www.w3.org/WAI/gettingstarted/tips/developin g.html • Accessible Framework: http://www.turretcss.com • Media Controls: https://www.w3.org/TR/media- accessibility-reqs/ 17