Joy Of Code - Web Design Training and Consulting
Joy Gems Newsletter

Web Accessibility Toolbar - A Good Friend For Webmasters

By Bud Kraus
bud@joyofcode.com
Joy Of Code
Creator And Instructor

Originally Published: 2005

A couple of weeks ago, while working on my new online workshop, Joy Of Code: Accessible Web Design, I stumbled upon a toolbar that, for me, was love at first sight. At first I thought, "Hey Bud, the last thing you need is another toolbar to add to Internet Explorer." But once I installed the Web Accessibility Toolbar, it was pretty easy to see why it was a keeper.

All credit goes to Vision Australia for developing this little baby.

Calling this a "Web Accessibility Toolbar" is too limiting. A better name might have been "A Handy Dandy Indispensable Tool That All Web Designers and Content Creators Must Have In Front Of Their Face." (Okay, their marketing department might not have gone along with that one, but it conveys my sense of its value.)

As the development team from Vision Australia puts it, this toolbar can help you to:

  • identify components of a web page
  • facilitate the use of 3rd party online applications
  • simulate user experiences
  • provide links to references and additional resources.

The little negative I found with this toolbar is that you have to toggle your anti pop-up software to "off" to use some of its capabilities, but I didn't think that was so bad. It's not a terrible inconvenience. The other negative is that some of the functions were organized in an odd way, but that won't stop me from using it.

Here's what the toolbar looks like from the left side:

The toolbar has buttons which offer a wide variety of tools. Here are the buttons and the highlights that each one offers:

Screen Shot Of Web Accessibility Toolbar

Validate
Offers a very efficient way to quickly access W3C Validator Services for XHTML/HTML and CSS, link checking, and HTML Tidy.

Resize
Simulates the look of a page when viewed through a variety of common display drivers.

CSS
The ability to disable all CSS to see the structure of a page and the CSS source is just a click away. The "Show Applied Style" is awesome. Move your mouse over a part of the page, and then view the applied style through a separate browser window. Very handy when wondering what style rules apply to a given part of a page.

Images
Get a quick inventory of all embedded images used in a page. Remove all images and check on the alt text used. Even do a "Gif Flicker Test." (Did you know that certain flicker rates can cause seizures?)

Colour
Grayscale your page, view of list of colors used with their hexadecimal codes, analyze your page's color for sufficient contrast, and test your page to make sure it won't be a problem for people with several types of color blindness.

On the right side you have...

Screen Shot Of Web Accessibility Toolbar

Structure
A large collection of tools that let you see heading tags, list markup, javascript event handlers, and much more. A great way to see the markup in the page itself.

Tools
A suite of tools from Juicy Studios - table inspector, image inspector, even a readability tester. There's a simulations package that allows you to see how people with various eye conditions will view your pages.

Doc Info
A wide variety of information about the page is available in this button , including the date a page was last modified, meta data, and DOCTYPE information.

Source
Here you will find various ways of looking at the source code of a page including a feature that highlights deprecated tags.

IE Options
I suspect that this option is available only because the toolbar was installed for IE. These options allow you to toggle things like images, CSS, and Javascript (which you can also do with other buttons as reviewed above).

Refs
Various references - such as Web Content Accessibility Guidelines - are available in this reference section.

Of course, I love using the toolbar, not just on my work, but to check up on how others have put their pages together. Can be a real eye opener and a great learning tool.

The cost of the toolbar is nada. Here's where you get the toolbar. This is freeware and it does not contain any adware or spyware.

Like all toolbars, you can easily uninstall or hide it from sight - but you won't do that with the Web Accessibility Toolbar.