Firefox Accessibility Testing Extensions

The WebAIM list had a recent discussion on how to use Firefox to test for accessibility issues. Patrick Lauke had posted a link to his article on using FireFox and the Web Developer Extension to test for accessibility. If you haven’t used this extension yet, or haven’t taken full advantage of it’s features, this is a must read article.

On top of that, there are several other great extensions out there that can be used as a part of an accessibility testing toolkit. I couldn’t find a thorough list, so thought I’d try and start one here. Here’s the list of extentions I’ve found useful.

WebDev Toolbar

http://chrispederick.com/work/firefox/webdeveloper/

As mentioned above, this is the primary tool that any web developer should already have. If you haven’t yet installed this Firefox extension, go do it now. I mean it. Go. GO!

It’s an invaluable tool with a wide range of features. The two primary features for simple accessibility testing are the quick and easy options for toggling javascript and CSS off and on. Unfortunately, it’s almost too easy, and I often leave javascript turned off accidently only to be completely frustrated with some poorly built site that doesn’t work without javascript few hours later. One quickly realizes how many poorly accessible sites there are out there. ;o)

In addition, another simple test using this tool are the variety of built-in links to validators.

Aardvark

http://www.karmatics.com/aardvark/

Ardvark is an amazing extension that lets you add/delete and highlight almost any object on the page. It’s a great tool for debugging and playing with the actual source code (just as the WebDev toolbar is great for playing with the CSS). It also features a really nice set of usable key commands, making it a breeze to use once you become famliliar with the short cuts.

tableinspector

http://juicystudio.com/article/firefox-table-inspector.php

The table inspector will reveal accessibility features that should be a part of an accessible data table including the summary, headers, axis, scope and abbr attributes.

Document Map

http://www-xray.ast.cam.ac.uk/~jgraham/mozilla.xml

Document map outlines the structure of your markup in the sidebar. Useful tool for making sure your content is semantic and easily navigable by Headers.

IE View

http://ieview.mozdev.org/ (Windows only)

A common mistake I make now that I find Firefox to be my main browser is forgetting to check to check my pages in IE as well. This simple extension does just that, giving you a ‘view in IE’ link. More of a nice reminder than anything.

View Rendered Source

http://www.jennifermadden.com/scripts/ViewRenderedSource.html

Useful for testing how dynamic HTML will be rendered (HTML coming from Javascript or XML).

View Formatted Source

https://addons.mozilla.org/extensions/moreinfo.php?application=firefox&category=Developer%20Tools&numpg=10&id=697

Not really an accessibility extension, but useful for seeing a much more nicely formatted source view in Firefox. In addition, you can mouseover elements to see which CSS styles affect it. This can be useful when debugging rendering issues that may affect accessibility on the page.

Accessibility Extensions for Mozilla/Firefox

http://cita.rehab.uiuc.edu/software/mozilla/overview.html

This extension allows you to provide a variety of accessibility audits on your page. Including lists of links, headers, access keys, etc.

Fangs

http://www.standards-schmandards.com/index.php?show/fangs

Fangs is an extension that creates a text based representation of how the web page would be read by a modern screen reader. It’s not a replacement for testing with a screen reader, but is a great tool for quick checks.