This document provides information on evaluating and ensuring website accessibility. It discusses the four principles of accessibility: perceivable, operable, understandable, and robust. It then describes both automatic and manual evaluation tools that can be used to check for accessibility issues, such as WAVE, Web Developer toolbar, and color contrast checkers. Useful links are also included that provide guidance on testing, creating accessible forms and navigation, and following the Web Content Accessibility Guidelines.

1. 1
Accessibility
(Session 2)
Yongjie Chen
UX Designer (Background in HCI)
Email: yjgracechen@gmail.com

2. Perceivable: Information and user interface components must be presentable to
users in ways they can perceive.
• 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.
2
Principles (POUR)
WCAG 2.0
http://www.w3.org/WAI/WCAG20/glance/

3. Operable: User interface components and navigation must be 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.
3
Principles
WCAG 2.0

4. Understandable: Information and the operation of user interface must be
understandable.
• Make text readable and understandable.
• Make content appear and operate in predictable ways.
• Help users avoid and correct mistakes.
4
Principles
WCAG 2.0

5. Robust: Content must be robust enough that it can be interpreted reliably by a
wide variety of user agents, including assistive technologies.
• Maximize compatibility with current and future user tools.
WebAIM's WCAG 2.0 Checklist
Achecklist that presents recommendations for implementing HTML-related principles and
techniques for those seeking WCAG 2.0 conformance.
http://webaim.org/standards/wcag/checklist
5
Principles
WCAG 2.0

6. Free and good examples:
• WAVE - WebAccessibility Evaluation Tool (http://wave.webaim.org/ )
Ø It is a free web accessibility evaluation tool provided by WebAIM. “It shows the original web page
with embedded icons and indicators that reveal the accessibility of that page." (WebAIM website)
• Cynthia Says (www.contentquality.com)
• Total Validator (www.totalvalidator.com)
• The W3C Markup / CSS Validation Services
Ø Checks the markup validity of web documents
Ø http://validator.w3.org/
6
Over 120 Web accessibility evaluation tools are listed on the WAI website.
www.w3.org/WAI/ER/tools/complete
Automatic Check Tools

7. 7
You can select what guidelines to use and the level of conformance:
Examples of using WAVE (Web Accessibility Evaluation Tool)

8. 8
When clicking on one of the red error icon, the code will be highlighted and the
explanation of the error will pop up.
Examples of using WAVE (Web Accessibility Evaluation Tool)

9. WebAIM Colour Contrast Checker
http://webaim.org/resources/contrastchecker/
Colour Contrast Analyser (Win/Mac)
It evaluates the colour contrast and provides an initial pass/fail
assessment against WCAG 2.0 colour contrast success criteria.
http://www.paciellogroup.com/resources/contrastAnalyser
9
Colour Contrast Check Tools
Automatic Check Tools

10. • Using automatic checking tools, some of the checkpoints can be tested, for
example: colour contrast, HTML& CSS validation etc. However, no tool can
fully automatically check the accessibility of a webpage.
• There are some useful toolbars, plug-ins and extensions to support manual
checking.
10
Manual Check Tools

11. Web Developer:
• Available for Chrome, Firefox and Opera
• Run on any platform that these browsers support including Windows,
OS X and Linux.
http://chrispederick.com/work/web-developer/
11
Toolbars, plug-ins and extensions to support manual checking
Manual Check Tools

12. WebAccessibility Toolbar (WAT) (for IE)
• Assist in evaluating a web page for compliance to the Web ContentAccessibility
Guidelines version 2.0 (WCAG 2.0)
• Vista, Windows 7 or Windows 8
• Internet Explorer 9 or 10
• http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-
to-download/web-accessibility-toolbar-for-ie---2012
12
Toolbars, plug-ins and extensions to support manual checking
Manual Check Tools

13. FireEyes (for Firefox):Atool for developer to create accessible websites.
http://www.deque.com/products/fireeyes/
WAVE Firefox toolbar (for Firefox): It provides a mechanism for running
WAVE reports within Firefox.
http://wave.webaim.org/toolbar/
Nocoffee for Chrome: This is a vision simulator plug-in.
http://accessgarage.wordpress.com/2013/02/09/458/
13
Toolbars, plug-ins and extensions to support manual checking
Manual Check Tools

14. Safari:
Not much available for Safari:
• Develop menu
• Web Inspector
14
Toolbars, plug-ins and extensions to support manual checking
Manual Check Tools
Accessibility for developers: https://developer.apple.com/accessibility

15. How to using web developer extension
http://webaim.org/resources/webdev/
How to use Web Developer Tool to conduct accessibility check
http://accessify.com/features/tutorials/testing-with-firefox/
Form and Label
http://dotsub.com/view/9787ebec-941f-4e04-a5dc-f6ed7fde7247
How to Test Web Pages forAccessibility
http://www.lancaster.ac.uk/fss/resources/access/testing.htm
Customize Web Pages (If your website can be customized, it will assist dyslexic users):
http://www.lancaster.ac.uk/fss/resources/access/customising.htm
Tools to Download
http://www.visionaustralia.org/business-and-professionals/digital-access/resources/tools-to-download
15
Useful Links

16. Testing Web Content forAccessibility
http://webaim.org/resources/evalquickref/
Accessible Forms
http://www.webstandards.org/learn/tutorials/accessible-forms/intermediate/
WebAccessibility Initiative (WAI)
www.w3.org/WAI/
"Skip Navigation" Links
http://webaim.org/techniques/skipnav/
KeyboardAccessibility
http://webaim.org/techniques/keyboard/
CreatingAccessible Form
http://webaim.org/techniques/forms/
16
Useful Links