Following on from my WordCamp Sydney, 2012 WordPress presentation, I was asked about providing some resources about Inclusive design, (a.k.a accessibility, a11y, universal design, designing for ability, etc).
Most of theseare free but those that aren’t fee have the estimated cost next to them.
Please let me know if any links are broken or if you have any that you love to use but I have unknowingly left out.
Contents
- The WCAG 2.0 reference
- General reading
- Government mandates, legislation, legal aspects
- Technical resources
- Testing and validation sites & services
- Standalone applications
- Browser plugins
- Screen readers
The WCAG 2.0 reference and supporting information
These guidelines form the basis for accessibility according to the W3C and should be your primary resource when designing for inclusion.
- Web Content Accessibility Guidelines
- The main reference to the WCAG specification and a solid resource. It defines all 4 Principles, 12 Guidelines and 61 Success Criteria across the three Levels, Level A, Level AA and Level AAA.
- Web Content Accessibility Guidelines (WCAG) Overview
- If you just need an overview of the WCAG specification, without the details
- How to Meet WCAG 2.0
- The detailed companion to the WCAG Specification, this lists all the Techniques for WCAG 2.0 across markup, code, scripting, technologies like Flash and Silverlight, and more, matching them to each specific Success Criterion to give advice on how to rectify each accessibility concern.
General reading
Web sites that are good general resources if you want to keep up-to date on Inclusive issues, written by people who know what they’re talking about.
The newly launched AccessIQ is an online resource to collate all available information, tools, resources and information about accessibility across Australia.
Just Ask: Integrating Accessibility Throughout Design: web book, old but still a good read.
Dive into accessibility: Extensive set of personas of people with disabilities to understand their needs, motivations, tools and expectations better.
Sandy Wasserman’s Ten principles of inclusive web design
Several excellent accessibility blog writers, including Karl Groves, Henny Swan, and the excellent Paciello Group Blog.
Simply Accessible, A great Canadian Accessibility agency in Toronto.
Formulate Information Design from Jessica Enders, who is my go-to expert for anything to do with web-forms.
Webaim.com is a great resource on web-accessibility, and their Web Accessibility for Designers article has a great infographic. I also highly rate their Appropriate use of Alternative Text article.
Smashing Magazine’s excellent aricle, In search of the perfect CAPTCHA, covering various alternatives to the same-old, inaccessible CAPTCHA, some of which are accessible, like textCAPTCHA.
Government Mandates, Legislation and Legal aspects
Guide to the Disability Discrimination Act: A great review from the Australian Human Rights Commission.
UN Convention on the Rights of Persons with a Disability: The site itself is a good example of a vey accessible site.
The Web Accessibility National Transition Strategy, also known as the NTS “sets a course for improved web services, paving the way for a more accessible and usable web environment that will more fully engage with, and allow participation from, all people within our society”.
Technical resources
Accessible Digital Office Document (ADOD) Project which is run out of the Inclusive Design research centre of the OCAD University in Toronto. It offers guidance across all common office applications to highlight how documents created in each can be as accessible as possible.
Adobe Accessibility Resource Centre Covers accessibility features in all Adobe applications to include hooks and features that are often ignored by authors. An indispensable resource for people who design in Flash but also to find how to add accessible text to images, SVG, etc.
Google Accessibility From video on websites, HTML5 and excellent plugins for Chrome, you can also find help for Android apps and other Google platforms.
Microsoft Accessibility Overview With the blurring of websites and apps, this is an excellent resource to improving interactions for more than just Microsoft-specific designs.
Accessibility Research and Experiences at Yahoo’s Accessibility Lab Yahoo are a significant player in the accessibility space with many years worth of technical expertise highlighted in this excellent resource. I would also like to draw your attention to the Blind Film Critic for his entertaining and thoughtful videos about accessibility.
Accessibility Programming guide for Apple iOS offering all you need to know for how to make any iOS application more accessible.
Testing and validation
Total Validator: Total Validator is an (X)HTML validator, an accessibility validator, a spell checker, and a broken links checker all rolled into one tool. Also available as a browser plugin
AChecker: This tool checks single HTML pages for conformance with accessibility standards to ensure the content can be accessed by anyone. Does throw up a lot of false positives, but this only reinforces the fact that any accessibility audit requires a manual check.
WAVE: a web accessibility web-based evaluation tool that is also available as a Firefox Extension and a Dreamweaver extension.
ColourLovers.com Although strictly not just for accessibility, a great feature of the site is being able to create colour palettes of contrasting and complementary colours, like the one called Unambiguous Colours, designed specifically for people with some types of colour-blindness.
Snook Color contrast check: A website where you can enter HEX values to discover colour contrast results against known guidelines, like WCAG2.0.
Standalone applications
Paciello Group’s Colour Contrast Analyser for Windows and Mac OSX. Can sample colours as well as direct input.
SortSite (from $150) checks any website for broken links, spelling errors, browser compatibility, accessibility, web standards validation and search engine issues.
IETester can test multiple versions of Internet Explorer: Can test from IE5.5 to 9 IS FREE and will let you even do a side-by-side comparison of two versions.
Vischeck, simulates colourblind vision, allows you to see what they see. There’s a windows and Mac OSX version. The Mac version (which runs as a plugin within the ImageJ, Java-based, image analyzer) is a little fiddly to install, but fantastic once you get it running and might even be worthwhile for Win7 users.
Daltonise correct the colour balance on your images acording to one of three types of colourblindness.
Chrometric browser – a mock browser, runs in Adobe Air, that simulates several vision impairments.
PDF Accessibility Checker (PAC) is a free PDF checker tool for Windows XP, Vista, Win7
Microsoft Word Accessibility Checker A guide to the Accessibility Checker, which is included with MS Word and can analyse a Word document for accessibility.
Browser plugins
Firefox has the largest range of browser plugins, but Google Chrome and Safari are catching up fast. To begin with they all have some developer-tool functions built in, like “Inspect Element” and “Turn off images” but for real power and flexibility you’ll probably want to add a few plugins to your inclusive design testing arsenal.
A list of Firefox accessibility add-ons
Juicy Studio Accessibility Toolbar: “The toolbar enables developers to examine WAI-ARIA live regions roles and properties, examine data tables, and determine if the colour contrast is sufficient.”
WAVE Toolbar: “…provides button options and a menu that will modify the current web page to reveal the underlying accessibility information.” Also a web application you can enter direct URL’s into.
Total Validator: Way better than HTML tidy! “Provides true HTML validation for HTML 2.0 through to XHTML 1.1 using the official DTDs, plus added attribute and other tests. Also performs accessibility validation (WCAG 1/2, US-508), broken link checking, and spell checking (5 languages).”
Firebug: You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page
Web Developer Toolbar: not strictly an accessibility tool but great for inspecting and editing the DOM inside the browser.
NoSquint – Firefox add on to help test text resizing.
Fangs: a screen reader emulator. It outputs in text what screen reade is likely to see/read out. Good if the voices from JAWS or NVDA is tiring your mind and you just want to look at text instead.
Juicy Studio : Firefox extension with a colour contrast analyser. Loads in a side bar.
WCAG contrast checker: assesses the code in the page, rather than visually and gives the results in a side bar.
Internet Explorer
Vision Australia’s Web Accessibility Toolbar– free toolbar for Internet Explorer. The toolbar is used to aid manual examination of web pages.
Google Chrome
List of Google Chrome accessibility extensions:
Web Developer Toolbar : Quite a lot like the Firefox version, but with slightly different arrangemnt of tools. Also available from the Google extension gallery
Daltonize: Chrome extension for real time simulation of protanopia, deuteranopia and tritanopia.
Safari
List of Safari accessibility extensions are available at The Safari Extension Gallery
Screen readers
Apple Mac OSX VoiceOver: an Operating-System level assistive technology available free with the Mac operating system. Worth switching it on from time to time to test your site with it.
NVDA(Non Visual Desk Access): Free and Open Source screen-reader for Windows. Can be run from a USB script and doesn’t require installation or rebooting. A great companion piece is Stamford Interactive’s NVDA Keyboard helper to help you remember all the keyboard shortcuts.
JAWS: (approx $1200) The screenreader with the widest user-base and the most extensive range of features and modifications.
Zoomtext: (upwards of $400) is one of the leading magnification tools, with built-in screen reader as well, though that part isn’t as good as JAWS. It’s supplementary to helping read things out to a low-vision user.
Thunder is a new one on the market, I’ve not tried it but as a free screen reader, worth looking at and discovering how it differs from the main players. If you do get a chance to try it out, please let me know and I’ll post a link to your review.