Web Accessibility Toolbar

When writing an accessible page, you have to pay attention to some rules, and some guidelines, etc.
If you're doing that, you probably  read a bit about that, about how to do that, and so on.

But still, no matter how long you're writing accessible pages, you need a way to check it.

A complete toolbox for accessibility checks contains several tools that will check as many aspects as possible, you will probably have a screen reader of some type, a contrast checker, and so on and so forth.

As a basic toolbox, or for a start, you can use "AIS - Web Accessibility Toolbar".

This is sort of a Swiss-army-knife for accessibility checks. It contains many of the check you want or should do on your page. I will describe it, and its functions.

Toolbar's versions

I've started to write this post a couple of weeks ago. Back then there were only one version of the toolbar, which I knew of. But last week I've found a newer version, which carries some interesting new features.
The functionality for both versions is quite the same, the difference is with the way each version dose the same.

In version 1.2 which is the one I knew, most of the things are using JavaScript on top of your page, or some external web page (i.e. for HTML validation). In the new version (2.0) many of the scripts are in side the toolbar and doesn't require Internet access.

I'm working a lot with Banks, and in a secured network, and the ability to use the toolbar without the Internet is a very good thing.

The downside is that's version 2 is still a beta, and wouldn't work in Firefox. However, version 1.2 also never worked quite good on Firefox for me.

Installing and running the toolbar

First you should download the toolbar:
Download version 1.2 from here; download version 2.0 from here.

The installation is as easy as "next-next-next". You have to note two things:

• IE should be closed. The installation will succeed even if it wasn't, but from my experience it works better when the installation is done on a closed IE.
• If you have a previous version (if you're installing version 2.0 after 1.2) you should remove the older version first.

After the installation is done, you will have a new toolbar inside IE, that looks like that:

Version 1.2

Version 2.0

On the right side here, there are two more buttons: "Firefox" and "Opera" (discussed later).

If you don't see the toolbar, right click
some where in the toolbars area and
choose "Accessibility Toolbar" to enable it.

A note I have to mention here, is that only version 1.2 gave me this error (the toolbar doesn't appear automatically).
When I've installed the 2.0 version, it opened IE when it finished, showed the toolbar and an "About" screen.
For me, that is one point in favor of the new version.

Functionality

The basic functionality is the same with both versions. There are some improvements, but most of it is in the way it works (with or without Internet connection, as mentioned). I'll discuss in general the different buttons, and give some examples of what to do with some key features. Options, or differences will be title as "Version 2 Only".

I'm going over the buttons from left to right, as they appear on the toolbar.

About button

The first button will take you to an about page of the developer. It works the same in both versions, only taking to different pages. In the menu that opens from that button, you can also go to WAI guidelines page, and some more information pages.

Validate (1.2) / Check (2.0)

This item presents you with a list of online tools that can check several things on your page. Starting with your HTML validity and well formation, thru accessibility issues and ending with page weight and load time.

All of those tests are online. Meaning that you have to be connected to the Internet to run them.

There's no doubt that you could have found those tests by yourself and just run them, but the toolbar simplify it by sending the current page directly and, of course, with the fact it already collected those for you.

Resize

I think this is a great tool. Even if you don't use this toolbar for accessibility.
This tool will resize your IE window to simulate a smaller screen.

This is great to check how your page looks like on a 640 X 480 display, which none of my developers use anymore.

CSS

The CSS menu controls, naturally, CSS instructions. From this menu you can disable the CSS from the page, both the inline and from external files.

In version 2.0 there's a bit more flexibility in these options (i.e. canceling just inline styles but not CSS, etc.).

Why is that important?
One of the WCAG guidelines requires the page to be readable even without CSS.

The point is, that a screen reader doesn't use the CSS. If your page looses the logical reading order, when CSS isn't being used, a blind person will have troubles understanding it.

Images

Everything to do with images: hiding, counting, etc.

A few items here worth mentioning:

The "Toggle Image/Alt" (or "Remove Images" in version 2.0), will show you all the alternative texts for all the images on the page. A small alert will pop-up, alerting of the number of images which doesn't has no alternate text.

The "Image List" option will give you a list off all the images on the page, with it's sizes, and other properties.
In version 2.0, the images list opens INSTEAD of the current page. This is a bit of annoying feature. However, that came to avoid popup-blockers which prevents this feature from running properly in version 1.2.

Here's a sample of an image item from the image list:

Colour

To my opinion, this is less useful. I'm using external tools to test colors.

Having said that, I have to mention the last option in this menu "Vischeck colour blindness simulation" this is a nice tool, that I'm using to. It is external as I mentioned, but it is nice to have it here.

the contrast analyzer here is nice, but I've seen better.

The option to see the page in gray scale is good. It can give you and indication if you're using color to present data, and some idea of the contrasts you're using.

Structure (and Tables and Frames in version 2.0)

This is a very useful item. In version 2.0 they've separated it to 3 menu items, and I'm not quite sure if they've added or removed items, but still, the content is quite the same.

Inside structure, you'd find anything that has to do anything with you're page's layout and what building it.

You can high light tables' border, to see where you're using it. Also, you can investigate your tables, to see if they're well formed with headers, scope indicators, etc.
You should really use this feature, to check your data tables. Many developers forget to use table headers, or scope indicators, and it's a shame.

You can high light frames' borders. Check if they have titles and descriptions as they should.

The same goes for div elements, and so on and so forth.

For some reason, in version 1.2 there is also an option to high light links to a new window here. I'm not sure it is quite structure related, and it is definitely not trivial to search for that item here. But it exists so it's a good thing. Links to a new window, or to a popup, should be described in their titles, so a user wouldn't be surprised.

Tools (version 1.2 only)

The tools menu, in version 1.2, gather some online tools to perform extra tests.

All of the tools (or at least most of them) needs Internet connection. It makes it less useable,but still convenient to have them all in the same place.

This button doesn't exist in version 2.0, however some of those tools are accessible from the first button (see above).

Doc Info

The doc info menu gather everything you'd want to know about your page (document). Some of the elements here are duplicates. As an example - the "List Frames" exist in the "Structure" menu as well. And so on.

Still, there're some items here which are very important, like the "DOCTYPE" presenter. With the DOCTYPE declaration missing, a screen reader might not read the page correctly.

Source

The source menu is very much like the one in IE Developer Toolbar, and gives similar functionality. Besides the "View Source" option, which is every bit similar to the one inside your browser, there're a few other options which are quite good:

Source Highlighter, is a cool function - it will high light specific HTML elements so you'll find them easily in the code. You can high light tables, forms, etc.

Another cool feature is the "Generated Source" which present all the source code, including the parts that were populated using script.

Again, these functions are well known, but nice to have in one place.

IE Options (IE in version 2.0)

This is a shortcut menu to IE accessibility functions.

Everything here, are things that can be set within IE, using standard dialogs.
Remove CSS, disable JavaScript, etc.

You have to note here, that canceling CSS of JavaScript here, will cancel them until you re-enable them using this menu, or IE options. Unlike the CSS remover mentioned before, which will be canceled (hence the CSS will be restored) with a simple refresh.

Refs (version 1.2 only)

This menu, which exists only in version 1.2, gives you links to references on the web. There's a partial list in version 2.0 on the about menu (mentioned above).

I tend to think that who ever is using this toolbar, probably already know these links, but it is never harmful to have them handy.

Magnify (version 1.2 only)

The 1.2 version of the toolbar, was created before IE 7 released. In IE 7 this functionality is embed  in the browser, so this button was removed from version 2.0 which is IE 7 oriented.

This is simply a screen magnifier, nothing more, nothing less.

Log (version 2.0 only)

Toggles a small log window. In version 1.2 all the messages popped out as alerts. Here they chose to put this log as an option, you be the judge of which is nicer.

Opera/Firefox (version 2.0 only)

I don't know how useable those buttons are, but they are their...
It opens the current page in one of those browsers, if they are installed.

Summary

If you're looking into making your page accessible, or even if you're just working on your HTML, this toolbar can help you. It does some of the things other toolbars do, but also much more.