The following is a list of free web development tools and resources to help you ensure accessibility on your website, regardless of whether or not you decide to take compliance all the way to WCAG 2.0, Section 508 or your countries favourite flavour of the WCAG guidelines. If you are not going to make your website friendly for those who have physical disabilities, at least do it for SEO to enable all (visually impaired) search engines to understand your site's content.
WCAG 2.0 Related Tools
Useful Development and Debugging Tools
- Microsoft IE Developer Toolbar - Included with IE 8 and later. Just press F12 instead.
- Web Accessibility Toolbar (for IE)
- HTML Tidy Online - Formats your HTML code so that it is readable. Can be a life saver, especially useful if you've compressed you HTML code.
- Firebug - This can be an invaluable tool when trying to figure out what CSS settings are affecting the content on your web page. The full of version of Firebug is available for Firefox while Firebug Lite is available for use in all major browsers including IE6+, Firefox, Opera, Safari and a special version for Chrome.
- PX to EM conversion chart - Will help you convert measurements from fixed pixel sizes to em's scaleable sizes for fonts.
- Subtitle-Horse - A wonderful tool to help you create Closed Caption (CC) for videos.
- Online HTML Escape Tool - Helps you format your text into HTML.
Browser and Accessibility Device Testing Tools
- NetRenderer - Lets you see what your website would look like in Internet Explorer 5.5 through 10. Can be used with any of the major browsers.
- IETester - See what your website looks like with different versions of Internet Explorer
- Browsershots - Similar to NetRenderer except that you can see what your website looks like in any number of browsers. Be sure not to be in a hurry though as some of the screen shots can take up to 24 hours depending on the browser.
- NonVisual Desktop Access (NVDA) - Free open source screen reader.
- Microsoft Windows 7 and later screen Magnifier, Narrator and Speech Recognition
- Acrobat Reader Read Out Loud Text-to-Speech tool
Code Validation Tools
- The WCAG WAVE Tool - This web based tool does a lot of accessibility testing for you, at least the parts that can be automated.
- W3C HTML Validator - Test the structure and logic of the HTML code behind your page. Remember, HTML is the stuff that search engines actually read and interpret. If that doesn't make sense, it doesn't matter how beautiful your website looks.
- W3C RSS/Atom Validator - Do you have an RSS feed on your website or blog? Make sure it is readable and understandable by as many applications as possible.
- W3C CSS Validator - While CSS is mostly used to format the appearance of your website, errors can result in weird stuff happening in some browsers and not in others. You'd be surprised how often a missing commas, semi-colon or typo can cause hours of troubleshooting the presentation of content on your site.
- W3C Mobile Validator - Have you check out the latest statistics? We are in the middle of a smartphone explosion. Last year these multipurpose devices outsold tablets, desktop computers, laptops, notebooks and netbooks combined.
- W3C Link Checker - It's in the list for good measure. If you are working on a Windows computer, go with Xenu instead. It will check a whole site at a time while this thing only checks one page at a time.
- Xenu Links Sleuth - This baby will check your whole website in one shot for broken links and create a site map for you in the process. Note that it will not include pages that are not linked in (like thank you pages) nor pages that require you to login.
Colour Contrast Testing Tools
- WCAG 2.0 Colour Contrast Analyzer (Windows) - Test the colour ratio between the foreground colour of text and background colour behind it. After using this a few times, you get to know the parts of your page that are questionable.
- WCAG 2.0 Contrast checker (Firefox) - I personally prefer the Colour Contrast Analyzer. It doubles as a colour picker in my developers tool chest.
- Vischeck Colour Blind simulator
Useful WCAG 2.0 Online Documentation and Resources
- WCAG 2.0 Web Content Accessibility Guidelines - The main documentation provides explanations and suggestions on how to meet WCAG 2.0 guidelines.
- WCAG 2.0 Demonstration Site - A great place to see examples of what many people do and how to do it better.
- How to Meet WCAG 2.0 (Quick Reference) - Choose a level and print the customized checklist.
- Improving Accessibility of Tables
- Userscripts.org - A great place to find Javascript.
- Accessible YouTube controls - Documentation on how to make YouTube embedded videos accessible. This information is now obsolete since YouTube now uses HTML5 players which are accessible.
Useful Resources For Making WCAG 2.0 Compliant PDF files
- Accessibility in Microsoft Office 2010 - Microsoft is now building accessibility tools right into applications like Word and Excel. Most of the time it will only takes a few extra minutes to address the analyzers major concers. After you've done it a few times, you will automatically start to build accessibility right into your normal way of working. For example, in Word 2010, click File, Info, Check for Issues and Check Accessibility.
- PAC (PDF Accessibility Checker) - Allows you to check PDF files for accessibility issues. Unless you've invested time and effort into making these accessible, most of the time they will fail. Microsoft Word 2010 can actually come pretty close to making an accessibility friendly PDF file without too much effort but the same can't be said for those PDF virtual printers. Anyway, if you can't figure it out, make an alternative to the PDF file available in HTML. Be sure to also check out the PAC Quick Guide (PDF).
Online Documentation and Tutorials
- PDF Techniques for Web Content Accessibility Guidelines WCAG 2.0 - Yes, PDF's can be made accessible too. When you do this, you won't need to maintain an HTML version of the same content just to make your website complaint. Isn't that worth the extra effort?
- Adobe Accessibility Resource Centre - Accessibility tips, techniques and videos for Adobe Creative Suite (CS) of products.
- Facts and Opinions about PDF Accessibility
- PDF Forms & WCAG 2.0 Webinar
- Adobe PDF & WCAG 2.0 Webinar
- Creating Accessibility Using Adobe Tools - Adobe TV
Making WCAG 2.0 Compliant Flash
- Flash & WCAG 2.0 Webinar
- Flash Techniques for WCAG 2.0 - Make your Flash applications WCAG 2.0 compliant.
Accessibility Related Information
- Making Ontario Accessible - Requirement for all businesses in Ontario Canada.
- Web Standards For the Government of Canada - CLF, Web Experience Toolkit (WET), Accessibility, Usability, Interoperability
Got a favourite tool for ensuring your website is WCAG 2.0 compliant? Share below.
Add a comment: