Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Accessibility and inclusive design

360 views

Published on

Intro to web accessibility and inclusive design for both developers and non-technical folks

Published in: Design
  • Be the first to comment

  • Be the first to like this

Accessibility and inclusive design

  1. 1. What is it and why should I care? Web Accessibility & Inclusive Design
  2. 2. What Is Inclusive Design? Making our designs accessible to everyone  
  3. 3. What Is Accessibility? Focuses on making designs accessible to people with disabilities
  4. 4. Perceivable Operable Understandable Robust
  5. 5. Perceivable Interface forms, controls, and navigation are operable
  6. 6. Operable Web content is made available to the senses – sight, hearing and/or touch
  7. 7. Understandable Content and interface are understandable
  8. 8. Robust Content can be used reliably by a wide variety of user agents, including assistive technologies
  9. 9. -Tim Berners-Lee The power of the Web is in its universality. Access by everyone regardless of disability is an essential aspect.
  10. 10. Changing our mindset Stop thinking of accessibility as being for “others”
  11. 11. We All need Accessibility
  12. 12. 57 million Americans have a disability •  19.9 million (8.2%) have difficulty lifting or grasping. •  15.2 million (6.3%) have a cognitive, mental, or emotional impairment. •  8.1 million (3.3%) have a vision impairment. •  7.6 million (3.1%) have a hearing impairment.
  13. 13. Web Access is a Basic Human Right Accessibility supports social inclusion for people with disabilities as well as older people, people in rural areas, and people in developing countries.
  14. 14. Don’t Let accessibility and Inclusive Design be an afterthought
  15. 15. Accessible design from day 1
  16. 16. 1. Incorporate accessibility into the design process from the beginning
  17. 17. 2. Write code with accessibility in mind
  18. 18. 3. Write tests with accessibility in mind
  19. 19. “But we aren’t required to make it accessiblE...”
  20. 20. Accessible Design Benefits everyone •  Overlap with other design best practices •  Better search results •  Reduced maintenance cost •  Increased audience reach
  21. 21. Legal & General Website Redesign
  22. 22. Legal & General Website Redesign •  50% increase in search engine traffic •  95% increase in requests for quotes •  300% increase in take up for some products •  Conversion rates doubled for the most important revenue generators •  450% increase in earnings in the five days following the launch of the redesigned website •  Longer term 135% increase in completed applications
  23. 23. Designing for accessibility improves overall design
  24. 24. Where to Start?
  25. 25. 1. Get familiar with assistive technology
  26. 26. 2. Go through the A11Y Project web accessibility checklist
  27. 27. 3. Test your code for 508 compliance
  28. 28. 4. Test your code with the WAVE tool
  29. 29. Resources •  http://www.w3.org/ •  http://webaim.org/articles/pour/ •  http://webaim.org/standards/wcag/checklist •  http://community.nvda-project.org/ •  http://www.w3.org/WAI/ER/tools/ •  http://a11yproject.com/checklist.html •  http://www.508checker.com/ •  http://wave.webaim.org/ •  http://webaim.org/standards/508/checklist
  30. 30. More to Come Next up: Web development accessibility basics
  31. 31. sources •  http://www.pbs.org/newshour/bb/art-exhibit-lets-vision-impaired-visitors-touch- masterpieces-madrid-museum/ •  http://www.w3.org/WAI/users/Overview.html •  http://photos4.meetupstatic.com/photos/event/5/e/0/8/highres_170544072.jpeg •  http://www.accessibleicon.org/ •  https://flic.kr/p/rhY9gQ - Nicola, “Chemex”. CC Attribution 2.0 Generic •  http://webaim.org/standards/wcag/checklist •  https://flic.kr/p/exFqxs - Chad Cooper, “Lake View”. CC Attribution 2.0 Generic •  http://www.interactiveaccessibility.com/accessibility-statistics •  http://www.w3.org/standards/webdesign/accessibility#examples •  http://www.w3.org/WAI/bcase/Overview •  http://www.legalandgeneral.com/ •  http://isolani.co.uk/presentations/wsg/ •  http://www.w3.org/WAI/bcase/legal-and-general-case-study •  https://getflywheel.com/layout/design-web-accessibility-beginning/ •  http://www.whistleout.com.au/MobilePhones/News/phones-for-the-blind-apple- voiceover •  http://www.pixeldiva.co.uk/blog/shares/expand-the-awesome-design-for-a-wider- audience

×