Embed Size (px)
Citation preview
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/
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
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
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
A checklist 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
Free and good examples: • WAVE - Web Accessibility 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
You can select what guidelines to use and the level of conformance:
Examples of using WAVE (Web Accessibility Evaluation Tool)
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)
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
• 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
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
Web Accessibility Toolbar (WAT) (for IE) • Assist in evaluating a web page for compliance to the Web Content Accessibility
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
FireEyes (for Firefox): A tool 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
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
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 for Accessibility
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
Testing Web Content for Accessibility
http://webaim.org/resources/evalquickref/
Accessible Forms
http://www.webstandards.org/learn/tutorials/accessible-forms/intermediate/
Web Accessibility Initiative (WAI)
www.w3.org/WAI/
"Skip Navigation" Links
http://webaim.org/techniques/skipnav/
Keyboard Accessibility
http://webaim.org/techniques/keyboard/
Creating Accessible Form
http://webaim.org/techniques/forms/
16
Useful Links
