In introduction to Web Accessibility and

1. Getting Started with
Web Accessibility & WAVE
@seanyo
SeanYo.ca
sean.yo@uoguelph.ca

2. What is Web Accessibility?
Web accessibility refers to the practice of
making websites usable by people of all
abilities and disabilities. When sites are
correctly designed developed and edited
all users can have equal access to
information and functionality.
http://en.wikipedia.org/wiki/Web_accessibility

3. What is WAVE?
 Web-based tool
 Helps make web content
more accessible
 Not a substitute for
humans
 Reports a11y errors,
possible errors, and other
crisis points

4. Web Accessibility

5. Diversity of Abilities
Web Accessibility Barriers
1 Auditory
2 Cognitive and Neurological
3 Physical/Motor
4 Speech
5 Visual

6. Why Be Accessible?

7. Why Web Accessibility Makes Sense
More
Be People
Awesome on Your
Website
It’s the
Be Better
Awesome law or it
Code
will be
More Do The Google
Aging Right Will
Visitors Thing Love You
Easier to
Maintain

8. Why Be Accessible?

9. Why Have a Website?

10. To Connect With People

11. User Experience

12. Accessibility Experience

13. People Have Experiences
Checklists Don’t

14. Web Accessibility
Principles

15. The Only One That Matters
People
First

16. AODA
Principles of Accessibility
 Independence
 Dignity
 Integration
 Equality of opportunity

17. W3C
Principles of Accessibility
 Perceivable
 Operable
 Understandable
 Robust

18. Understading
Web Accessibility
For Managers & Developers

19. Accessibility is Simple
Automated Tools and Best Practices
• Lots of great, free tools to measure accessibility
• Lots of great, free info & recommendations
• Using web standards is good for accessibility
• Tools: WAVE, FAE, TAW, FANGS, NVDA
• Info: WAI, WCAG, WebAIM, WaSP
• Use valid, semantic code - Even better, use a CMS

20. Accessibility is Complicated
No Single Path
• How to measure accessibility?
• Automated testing needs user testing
• Websites are not fire &forget – they are a process
• Which Standard? WCAG, 508, AODA
• Lots of platforms: IE, Gecko, Webkit + Mobile
• Content will change & break accessibility

21. Accessibility is Cheap
The Best Stuff is Open & Free
• Being accessible improves search rankings
• Google is a Screen Reader
• CMS tools are a strong investment – Open & free
• The best tools are Open & free
• Development best practices are Open & free
• CMS tools can automated compliance : alt tags

22. Accessibility is Expensive
You’re only as Accessible as your last a11y bug…
• Passing a checklist doesn’t make a site accessible
• Accessibility is challenging and doesn’t end
• Leaving it to the end is costly – in time and money
• Web development is a mature profession
• Accessibility is a critical dimension of webdev
• A11y is expensive to retrofit, like schemas & security

23. Accessibility is Cheap & Simple…

24. …When Finding Problems

25. Accessibility is Complicated and Expensive…

26. …When Fixing Accessibility Problems

27. Accessibility for
Management

28. Plan for Accessibility From the
Beginning

29. Most errors are introduced during requirements analysis and
design. The later they are removed, the most expensive it is to
take them out.
Boehm et al (1975): “Some Experience with Automated Aids to the Design of Large-Scale Reliable Software.”
Diagram Source: http://blogs.windriver.com/vxworks/device-management/

30. Accessibility is not an option.
An inaccessible website is incomplete.

31. A vendor claiming a product is
accessible does not make it accessible.

32. Avoid Assumptions About Your
Audience

33. Count on Text
Provide Alternatives in Text

34. Don’t take control of your visitor’s
experience

35. Use Clear Language

36. Testing Is Hard
Real People
Different Needs
Assistive Technology

37. Using WAVE

38. w3.org/WAI/demos/bad/

40. wave.webaim.org/

41. WAVE Basics
Testing Web Accessibility
 Tool to identify a11y issues
 Cannot validate as “accessible”
 Adds colour coded comments
 Provides 4 types of reports
 Errors, Features & Alerts
 Structure/Order View
 Text-Only View
 Outline View

42. WAVE Reports
Errors, Features & Alerts
 Default View
 Presents your page with the
embedded accessibility icons and
indicators.
 If this view is too complicated you
can “disable styles”
 Scripting is removed from this an all
other WAVE reports

43. WAVE Reports
Structure/Order View
 Displays icons and indicators for
overall structure of the page.
 Number indicators show the
reading/navigation order of the page.
 Follow the numbers to determine if the
reading and navigation order of the page
makes sense and is logical.

44. WAVE Reports
Text-Only View
 Displays only the underlying text of the
page.
 Information that is commonly read by
screen readers will be presented.
 The visual styling of the page is removed.
 This provides a visual view of what a
screen reader would likely read.
 Fangs Firefox Add-On

45. WAVE Reports
Outline View
 Displays only the headers that are within
your page.
 Ensure that your page contains headers
where appropriate
 Ensure structure of the page is logical
and appropriate.

46. WAVE Toolbar
Integrating with Firefox
 Displays content as it appears within your web
browser.
 Allows evaluation of private, intranet, password
protected, dynamically generated, or scripted
web content.
 All evaluation happens directly within your
browser.
 The toolbar also evaluates content after
scripting has been applied, whereas the server
version of WAVE removes all scripting.

47. Let’s Get Our Hands Dirty!
w3.org/WAI/demos/bad/