Transcript Top ten WCAG 2.0 considerations

WCAG 2.0 top ten checkpoints
Ten popular area of focus for compliance and accessibility
WCAG 2.0 top ten checkpoints
1. Forms
• Label tags for ALL input points
• Correct tab sequence
• Access keys for complex, long and laborious forms that
are used frequently
• Navigable and able to submit with keyboard
WCAG 2.0 top ten checkpoints
2. Document structure
• Title tag to convey relationship of page to the site
• Meaningful page titles
• Heading tags
• Tags that convey meaning (paragraph, lists, etc.)
WCAG 2.0 top ten checkpoints
3. Navigation and links
• Consistent navigation (predictable)
• Skip to content
• Navigating with anchor tags in long bodies of content
• Breadcrumb navigation
• Meaningful link text that conveys purpose
WCAG 2.0 top ten checkpoints
4. Images and non-text elements
• ALT tags for informative images (non-decorative)
• Link to descriptions for longer text blocks
• Decorative images presented with CSS (not in content)
• Contrast ratio between background and text
WCAG 2.0 top ten checkpoints
5. Tables
• Do NOT use tables to format your document
• Tables are for tabular data
• Use THEAD, TFOOT, and TBODY tags to convey data
relationship
• Rely on CSS and avoid depreciated tags
WCAG 2.0 top ten checkpoints
6. Mouse and keyboard issues
• Test and ensure you can navigate with keyboard only
• Do not rely upon mouse clicks
• Be cognizant of tedious clicking issues (e.g. menus)
WCAG 2.0 top ten checkpoints
7. Client-side to server-side handling
• It is OK to use Javascript
• Build base-level, server-side functionality first
• Add your AJAX/Javascript functionality on top
• Have a plan to degrade from client- to server-side
• Inform user of user input and changes in page behavior
WCAG 2.0 top ten checkpoints
8. Cues, instructions and error handling
• Inform and instruct the user
• Provide contextual helps and guide user input
• Offer intuitive error messages
WCAG 2.0 top ten checkpoints
9. Display adaptation
• Support multiple browser environments
• Content is format-neutral, format only with CSS
• Text: size, color, contrast, max width, no full justification
• Allow user to override formatting
WCAG 2.0 top ten checkpoints
10. Site and process context
• Breadcrumb navigation
• If there are multiple steps, indicate their context
• Use title and heading tags to convey site context
• Provide a sitemap
WCAG 2.0 resources
Resources
WCAG 2.0
http://www.w3.org/TR/WCAG20/
WebAIM accessibility testing
http://wave.webaim.org/
How people with disabilities use the web
http://www.w3.org/WAI/EO/Drafts/PWD-Use-Web/
Examples used in this presentation
http://accessibility.designbymichael.com/examples/
Links to presentation files:
http://accessibility.designbymichael.com/presentations/
WCAG 2.0 resources
Tools and testing: Firefox
https://addons.mozilla.org/en-US/firefox/extensions/web-development/
• WAVE toolbar
• Web Developer Toolbar
• WCAG Contrast Checker
• Fangs Screen Reader Emulator
WCAG 2.0 resources
Tools and testing: Safari
https://extensions.apple.com/#developer
• BetterSource (by Awarepixel)
• Firebug Lite (by Slice Factory)
• Unicorn HTML/CSS validator (by Ocoder)
• Validator (by Jerome Danthinne)
WCAG 2.0 resources
Tools and testing: Google Chrome
https://chrome.google.com/extensions/featured/web_dev?hl=en-US
• Web Developer
• View Selection Source
• HTML Validator
WCAG 2.0 resources
Tools and testing: Internet Explorer
IE developer toolbar native to version 7.0+
Not a widely accessible list of developer add-ons
Accessibility testing tools available in Visual Studio 2010
WCAG 2.0 resources
Tools and testing: Client-side apps
Color Contrast Analyzer (stand-alone contrast checker for Windows)
TotalValidator (test for valid HTML, WCAG compliance, spelling, etc)
Basic desktop application (free, single-page testing)
Pro desktop application (inexpensive, site-wide testing)
Web-based testing (free single-page testing)
Firefox add-on (free, single-page testing)
WebbIE (free browser for those with little or no sight abilities, great for testing)
System Access To Go (free Windows-based screen reader utility)
WCAG 2.0 Q&A
Questions?
Michael Tangen | web interface designer-developer
Office of Enterprise Technology
[email protected]
(651) 201-1045
This presentation was developed in 2010 for the Technology Accessibility project.
Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported License
Rev 2010-12.09.0900