Top Ten Tech Tips

10 Tools for Evaluating Web Design Accessibility

by Jacob Gubé

Testing your site for web accessibility (how usable a website is by individuals with disabilities) is an often forgotten and neglected element of web design and development. Web accessibility is not only important because it ensures the content reaches a wider range of audience, but also ensures cleaner, better code and better indexing on search engines.

Note: All links open in a separate browser Opens in separate browser

This article details 10 free tools to assist with evaluating and correcting 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 accessibility-compliant. You can also launch third party applications such as the WC3 HTML Validator and Link Checker services directly from the toolbar.

Firefox Accessibility Extension screenshot.

 

2. aDesigner

aDesigner simulates the experience of visually-impaired individuals so that designers can better understand how a webpage is viewed 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.

aDesigner - screenshot.


3. EvalAccess

EvalAccess is a web-based resource for testing your website’s accessibility. You can either point to a web page, an entire website, or directly enter HTML source code. It checks the mark-up code 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.

EvalAccess - screenshot.


4. WebAnywhere

WebAnywhere is a web application that works similarly to screen readers. It’s an excellent way to see how a web page is read and navigated by assistive technologies.

WebAnywhere - screenshot.


5. Web Accessibility Inspector

The Web Accessibility Inspector 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.

Web Accessibility Inspector - screenshot.

 

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.

Vischeck - screenshot.

 

7. Accessibility Colour Wheel

The Accessibility Color Wheel is a web-based tool to help you select the background colour and font colour. You can enter the hexadecimal values of the colours you want to test, or you can hover over the colour wheel to select colours.

Accessibility Colour Wheel - screenshot.

 

8. Colour Contrast Analyser

The Colour Contrast Analyser is a Firefox extension that checks all the elements in the Document Object Model for colour contrast to insure that content is accessible by people who are colour-blind or affected by other visual-impairments. It uses the colour and brightness differences algorithm suggested by the WC3 "Techniques For Accessibility Evaluation And Repair Tools" (AERT).

Colour Contrast Analyser - screenshot.

 

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.

TAW Web Accessibility Test - screenshot.

 

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.

Web Accessibility Toolbar - screenshot.


Helpful Advice from those Friendly People at DOT-COMmunICaTions