1. WCAG 2.0 top ten checkpoints Ten popular area of focus for compliance and accessibility

2. 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

3. 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.)

4. 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

5. 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

6. 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

7. 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)

8. 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

9. 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

10. 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

11. 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

12. 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/

13. WCAG 2.0 resources Tools and testing: Firefox https://addons.mozilla.org/en-US/firefox/extensions/web-development/ https://addons.mozilla.org/en-US/firefox/extensions/web-development/ WAVE toolbar Web Developer Toolbar WCAG Contrast Checker Fangs Screen Reader Emulator

14. WCAG 2.0 resources Tools and testing: Safari https://extensions.apple.com/#developer https://extensions.apple.com/#developer BetterSource (by Awarepixel)BetterSource Firebug Lite (by Slice Factory)Firebug Lite Unicorn HTML/CSS validator (by Ocoder)Unicorn HTML/CSS validator Validator (by Jerome Danthinne)Validator

15. WCAG 2.0 resources Tools and testing: Google Chrome https://chrome.google.com/extensions/featured/web_dev?hl=en-US https://chrome.google.com/extensions/featured/web_dev?hl=en-US Web Developer View Selection Source HTML Validator

16. 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

17. WCAG 2.0 resources Tools and testing: Client-side apps Color Contrast AnalyzerColor Contrast Analyzer (stand-alone contrast checker for Windows) TotalValidator (test for valid HTML, WCAG compliance, spelling, etc) Basic desktop applicationBasic desktop application (free, single-page testing) Pro desktop applicationPro desktop application (inexpensive, site-wide testing) Web-based testingWeb-based testing (free single-page testing) Firefox add-onFirefox add-on (free, single-page testing) WebbIEWebbIE (free browser for those with little or no sight abilities, great for testing) System Access To GoSystem Access To Go (free Windows-based screen reader utility)

18. WCAG 2.0 Q&A Questions? Michael Tangen | web interface designer-developer Office of Enterprise Technology michael.tangen@state.mn.us (651) 201-1045 This presentation was developed in 2010 for the Technology Accessibility project. Licensed under Creative Commons Attribution-ShareAlike 3.0 Unported LicenseCreative Commons Attribution-ShareAlike 3.0 Unported License Rev 2010-12.09.0900