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

1. What is it and why should I care?
Web Accessibility &
Inclusive Design

2. What Is Inclusive Design?
Making our designs accessible to
everyone

3. What Is Accessibility?
Focuses on making designs accessible to people with disabilities

4. Perceivable
Operable
Understandable
Robust

5. Perceivable
Interface forms, controls, and
navigation are operable

6. Operable
Web content is made available to
the senses – sight, hearing and/or
touch

7. Understandable
Content and interface are
understandable

8. Robust
Content can be used reliably by a
wide variety of user agents,
including assistive technologies

9. -Tim Berners-Lee
The power of the Web is in its universality.
Access by everyone regardless of disability
is an essential aspect.

10. Changing our mindset
Stop thinking of accessibility as being for “others”

11. We All need Accessibility

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. 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. Don’t Let accessibility
and Inclusive Design be
an afterthought

15. Accessible design from day 1

16. 1. Incorporate accessibility into the design
process from the beginning

17. 2. Write code with accessibility in mind

18. 3. Write tests with accessibility in mind

19. “But we aren’t required to
make it accessiblE...”

20. Accessible Design Benefits
everyone
• Overlap with other design best practices
• Better search results
• Reduced maintenance cost
• Increased audience reach

21. Legal & General Website
Redesign

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. Designing for accessibility
improves overall design

24. Where to
Start?

25. 1. Get familiar with assistive technology

26. 2. Go through the A11Y Project web
accessibility checklist

27. 3. Test your code for 508 compliance

28. 4. Test your code with the WAVE tool

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. More to Come
Next up: Web development accessibility basics

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