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.

10 min intro to web a11y

440 views

Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

10 min intro to web a11y

  1. 1. Web accessibility Exeter Web Meetup July 2013 Steve Lee steve@opendirective.com @SteveALee
  2. 2. What is Accessibility “The Web is fundamentally designed to work for all people, whatever their hardware, software, langua ge, culture, location, or physical or mental ability.“ W3C WAI (not TBL)
  3. 3. Arguments for Universal Access • More users or bigger market • Coz it’s the right thing to do • It’s the Law (DDA in UK, Section 508 in USA) • Mobile = diverse devices and access modes
  4. 4. Access for all
  5. 5. Access for all
  6. 6. Access for all
  7. 7. Access for all
  8. 8. Access Variations
  9. 9. Access Variations
  10. 10. Access Variations
  11. 11. Access Variations
  12. 12. Access Variations
  13. 13. Access Variations
  14. 14. It boils down to…
  15. 15. So much variation
  16. 16. So much variation
  17. 17. Learn the Basics www.w3.org/WAI
  18. 18. Learn the Basics www.w3.org/WAI webaim.org
  19. 19. WCAG 2.0 Web Content Accessibility Guidelines Be Aware of the Standards
  20. 20. POUR – quoi? • Perceivable • Operable • Understandable • Robust
  21. 21. Make life easy for yourself • Use HTML native controls • Use accessible frameworks/libraries • Consider ‘mobile 1st’ • Use progressive enhancement
  22. 22. Progressive Enhancement • Add successive working layers –HTML – semantic structure –CSS - presentation –Javascript - behaviour • Think ‘content out’
  23. 23. eg Forms • HTML + real URL + server processing – A label for every input field • CSS – make it look smooth – Care with display: none • Javascript – client cleverness – HTML5 has declarative validation
  24. 24. 1,2,3 Testing • Unplug that mouse • W3C HTML validation service • Accessibility validation tools • Smoke test with NVDA screen reader • Real user testing!
  25. 25. Remember…

×