10 Tools for Evaluating Web Design Accessibility

Aug 27 2008 by Jacob Gube | 28 Comments

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

Firefox Accessibility Extension - screen shot.

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 - screen shot.

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 - screen shot.

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 - screen shot.

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

Web Accessibility Inspector - screen shot.

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 - screen shot.

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

Accessibility Color Wheel - screen shot.

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

Colour Contrast Analyser - screen shot.

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

TAW Web Accessibility Test - screen shot.

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

Web Accessibility Toolbar - screen shot.

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.

28 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 title tags (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!

dani

January 30th, 2009

now I’m trying ATRC for WCAG 2.0, WCAG 1.0, and other accessibility guidelines from other countries

Web Design Sheffield

March 11th, 2009

Where i work we have made it standard that every website we produce will be accessible – unless there is a very good reason not to.
Its really good to see a list of tools (some of these are new to me) in one place.

Holly

February 21st, 2010

Great article! I write some about accessibility on my blog as well! I think it is avery important :)

Deaf User

March 1st, 2010

Please don’t forget also to make captions and transcripts for videos, podcasts, webcasts – there are millions and millions of people who have little or no hearing as well as those who have no access to audio for various reasons (restrictive environments, restrictive technology, etc). Those are part of priority checklist.

Deaf User

March 1st, 2010

P.S. Captions and transcripts also help other groups such as foreigners, those having difficulties hearing certain people with accents, those with cognitive difficulties, etc. There are researches to prove that bimodal presentation (i.e. audio and text) significantly improves accessibility for a wider audience.

Transcripts benefit everyone, including website owners who want to improve their SEO and ROI. Transcripts are easier and faster to skim than to listen to audio all way. If videos are captioned, it is strongly advised to have them backed up with transcripts (in case a video doesn’t work or a user cannot view it for various reasons).

Santosh Reddy Gayam

March 17th, 2010

This is a really good resource for Accessibility tools.
If there are any Accessibility tools offline to evaluate web applications it will be great. If anyone find any tools please share.
Knowledge Shared is Knowledge Gained.

Thanks once again

Steve

September 11th, 2010

@Jacob Gube I have been doing accessibility assessments of websites for almost 10 years and I use several of these tools. This is a good summary but, in my opinion, you missed the best ones. The Wave Toolbar for Firefox http://wave.webaim.org/ is unique. It is accurate (few false positives), and precise at identifying issues in context. I then use Firebug to examine the offending code. I find this methodology far superior to most of the other tools.

One additional correction. You recommend use of the Title attribute to help screen reader users. This is one of the most frequent misconceptions among developers that I see. The advice should read, “Use the Title attribute for page titles and frame titles.” Most screen reader users, using default settings, will not hear titles elsewhere. Titles are for supplemental information. They should not be used as a primary caption for links, images, etc.

Web Axe

September 24th, 2010

Nice article. But as Jared mentioned above, WAVE is missing. A great one. http://wave.webaim.org

Iza Bartosiewicz

September 30th, 2010

My favourite is WAVE and Firebug combination plus few other tools mentioned in this article. Fangs is also quite handy (www.standards-schmandards.com/fangs/).

I’ve recently installed Worldspace FireEyes (it works like a Firebug ‘plug-in’) but haven’t had much time to road test it yet. On the surface, it looks like a comprehensive but complex inspection tool so it may not be appropriate for everyone. I think WAVE is still the best one, and highly recommended for people who are not web specialists.

Cristian Dorobantescu

October 26th, 2010

Good list! I wonder how many developers really pay attention to the usability/ accessibility of their sites.

templatebase

March 15th, 2011

Good list I like it.

I’m using “Firefox Accessibility Extension” for a while and I love it.

Keep up the good work!

Darron Lachowsky

July 15th, 2011

Yet another issue is video games are usually serious anyway with the key focus on mastering rather than amusement. Although, it comes with an entertainment element to keep the kids engaged, just about every game is frequently designed to work towards a specific experience or programs, such as mathematics or research. Thanks for your write-up.

Justin Mifsud

September 1st, 2011

Great post Jacob, Most commentators should note that your post is from 2008, hence the reason why you did not mention some tools (so its not your fault!).

Tools come and go with time. I have recently written a post where I reviewed the web-based accessibility checking tools that are currently available. Check it out on: http://usabilitygeek.com/10-free-web-based-web-site-accessibility-evaluation-tools/

I am sure that in a couple of months, my list will need to be changed too :)

Jack

October 16th, 2011

The EvalAccess site itself needs to be more user-friendly. I tried to follow the data table guidelines for headers and rows but could not get my site to comply, so I just left it.

And I had to give a fake email address to post this.

Leave a Comment

Subscribe to the comments on this article.