10 Tools for Evaluating Web Design Accessibility
Testing for web accessibility (how usable a website is by individuals with disabilities) is an often neglected part of web design and development. Web accessibility is important not only because your content will reach a wider range of audience, but also because correcting web accessibility issues have secondary benefits such as cleaner and more semantic code and better indexibility on search engines.
In this post, you’ll find 10 free tools to help you evaluate and correct issues which decrease your website’s accessibility. There was a high emphasis on the ease-of-use during the selection of these tools.
1. Firefox Accessibility Extension
The Firefox Accessibility Extension is a Firefox toolbar that allows you to inspect every aspect of a web page to determine its accessibility. A helpful toolbar feature is the Text Equivalents menu which allows you to generate lists of elements such as images and links to see whether each are standards-compliant. You can also launch 3rd party applications such as the WC3 HTML Validator and Link Checker services directly from the toolbar.
2. aDesigner
aDesigner, developed by IBM, simulates the experience of visually-impaired individuals so that designers can better understand how a web page is interpreted by screen readers. It has a plenty of features including a summary and detailed report of compliancy to web accessibility guidelines and simulations for blind or low-vision impairment.
3. EvalAccess
EvalAccess is a web-based service for testing your website’s accessibility. You can either point to a web page, an entire website, or directly enter your HTML source code. It checks your mark-up against the WC3’s Web Content Accessibility Guidelines (WCAG 1.0) and provides a summary of the number of errors and warnings and a breakdown of each error.
4. WebAnywhere
WebAnywhere is a browser-based web application that works similarly to screen readers such as JAWS. It’s an excellent way to see how a web page is read and navigated by assistive technologies.
5. Web Accessibility Inspector
The Web Accessibility Inspector, developed by Fujitsu, is a desktop application that indicates web accessibility issues. You can specify a file, folder, or URL to run the inspection on. It has the "View on the screen" option which opens the web page in a browser window with markers that point out elements that have issues.
6. Vischeck
Vischeck simulates how a web page or image will look if viewed by people affected with color-blindness. It simulates three types of color-blindness. You can conduct the test by entering a URL or uploading images.
7. Accessibility Color Wheel
The Accessibility Color Wheel is a web-based tool to help you select the background color and font color. You can enter the hexadecimal values of the colors you want to test, or you can hover over the color wheel to select colors.
8. Colour Contrast Analyser
The Colour Contrast Analyser, developed by Juicy Studio, is a Firefox extension (currently in alpha) that checks all the elements in the Document Object Model for color contrast to insure that content is accessible by people who are color-blind or affected by other visual-impairments. It uses the color and brightness differences algorithm suggested by the WC3 "Techniques For Accessibility Evaluation And Repair Tools" (AERT).
Juicy Studio also has other web accessibility evaluation tools such as the Readability Test, CSS Analyser, and Image Analyser.
9. TAW Web Accessibility Test
The TAW Web Accessibility Test evaluates your website’s accessibility based on the WCAG 1.0. It marks trouble spots directly on the web page, allowing you to quickly see where the errors are. Clicking on the error/warning indicator will bump you down to a summary of the issue. It’s a great way to visualize the areas of a web page that needs work.
10. Web Accessibility Toolbar
The Web Accessibility Toolbar (WAT) is an extension for Internet Explorer or Opera that offers designers a ton of useful tools and features to help in the analysis of a web page’s accessibility. One helpful feature is the Greyscale (Colour > Greyscale) feature which renders the web page in black in white to help you find low-contrast spots in the design.
What’s your viewpoint on web accessibility?
How important is it in your web projects? Do you go out of your way to make your projects accessible? Share your thoughts in the comments section below.
If you enjoyed this article, consider subscribing to the Six Revisions RSS feed!
22 Comments
MikeWhoBikes
August 28th, 2008
This looks to be a great resource; thanks for sharing! Accessibility does seem to be a neglected area, mostly because it can be difficult to understand, the types of problems people have vary so much, and there seems to be a lot of conflicting information. These tools seem like a step in the right direction.
Gerasimos
August 28th, 2008
As a freelance i work on small scale projects and i’m always trying to improve usability. It’s not always in the top of my checklist to see what is going on with e.g. the grayscale version but at least i am trying to keep my code clean and semantically correct and on the design side of my projects, i am trying to see things like a user and design with one in mind.
Thank you for your tips. Excellent list. aDesigner is one of my favorite programs.
eM
August 28th, 2008
Thanks a lot, for this post - very useful list. I really appreciate.
I’ve found some add-on which works just as Lynx browser- https://addons.mozilla.org/en-US/firefox/addon/1944 I think that will be great addition to your list.
(Sorry for flooding, please del previous comment)
Karl
August 28th, 2008
To simulate a ‘color blind view’ on a page or even apps I recommend Sim Daltonism. Much more convenient plus it’s a desktop application!
Brian
August 28th, 2008
This couldn’t have come at a better time. I have to make a web app accessible this week for a client and I’m definitely starting with these tools. Thanks Jacob!
mark
August 28th, 2008
great article. i was introduced to the accessibility issue on one of my first jobs designing a website when a blind woman who emailed me about not being able to navigate on the site. I quickly researched and fixed the issues so she could use the site. ever since then, I ALWAYS code a site with this in mind. thanks for the tools.
chris
August 28th, 2008
for testing IE version support (on windows XP), I use Tredosoft’s free custom installer that allows IE3 IE4.01 IE5 IE5.5 and IE6 to all be installed on one machine. it is super.
http://tredosoft.com/Multiple_IE
Jacob Gube
August 28th, 2008
Thanks for sharing your thoughts and additional tools/resources that I missed on this post.
@MikeWhoBikes: Those points are precisely why I think people neglect web accessibility. Additionally, there’s this perception that it severely affects your design to account for all the different disabilities, but small things - usually, go a long way. Assigning meaningful
titletags (I use this argument so often), for example, greatly increase a person’s ability to find links on a web page if they’re using a screen reader (because they can search title tags).@Gerasimos: Just putting a high emphasis on semantic mark-up goes a long way in terms of web accessibility.
@mark: I think that’s how most developers start finally thinking about web accessibility. Mine was doing usability testing of a Drupal website by watching someone who uses a screen reader. After that, I’ve always kept web accessibility in mind.
Thank you once again for all the wonderful comments.
Maikel
August 29th, 2008
Great article. I am writing about this in my blog
Jared Smith
August 30th, 2008
Hmmm… no reference to WAVE (http://wave.webaim.org)??? WAVE is a web-based tool and also has a Firefox toolbar that does all of the evaluation locally within Firefox, allowing in-browser evaluation of CSS, AJAX, dynamic, intranet, or secure content.
Mark Aplet
September 1st, 2008
I really enjoy articles on accessibility and glad to see that this topic is finally getting some face time by our industry leaders. I too have a few articles on accessibility on my website that your readers may enjoy. In particular a companion article to this one. Applications to help you create more accessible designs. http://www.visual28.com/articles/applications-to-help-you-create-more-accessible-designs
Bob Potter
September 2nd, 2008
Thanks for this list. As one who strives to design websites so that everyone can enjoy them, these will definitely become a part of my development process.
Peter Smith
September 12th, 2008
Seriously awesome list! Folks like me who do webwork in government are bound by law and by policy to make our sites accessible, and it’s often painstaking, time-consuming work to verify.
Some of these tools I’ve used, but others are new to me - looks like aDesigner and WebAnywhere could be useful additions to my toolbox. Can’t wait to take ‘em for a spin!
Leave a Comment