FREE Web Development Tools: The Accessibility Toolbar Version 1.0

 Yesterday in her article on Accessibility Validation, Rachel Andrew showed us how to use the Cynthia Says validator to report on your site's Section 508 compliance, and how to understand the output!

Today we're throwing the spotlight on the latest release of the Web Accessibility Toolbar developed by the Accessible Information Solutions (AIS) team at the National Information and Library Service (NILS), Australia.

This Toolbar will not only help you to make your sites more accessible, it also has a great set of tools that can help you analyze the code in other sites, to enable you to develop your own skills.

Please note, this article may be freely reproduced as required to support the use of the Toolbar. All we ask is you acknowledge www.DMXzone.com and if you'd like to get back to us with any suggestions for improvments we'll try to incorporate them.

 

AIS Web Accessibility Toolbar

This gives access to a number of different websites associated with the developers, allows you to e-mail the developers and under Options, amongst other items allows you to toggle hot keys on and off. The default setting I showed at the top of the article is with the hot keys off. With them toggled on we get:

So for those who may struggle with mouse control, <ctrl> <alt><number> will yield the drop-down menu, which can then be navigated by the arrow keys.

Validate

A superb aid for quickly checking validation of either your own pages or those of the site you are visiting – choose between the W3C or the Web Design Group versions, check HTML, CSS, links and even your implementation of a P3P privacy policy.

Resize

Does what it says on the can. Allows easy checking of the appearance of the chosen page with different sized browsers. The custom sizes submenu, apart from allowing definition of parameters, also provides a link off to a screen size tester at AnyBrowser.com.

CSS

Now this unassuming dropdown contains so much educational value it's just amazing!

If you really want to just prove to yourself that all those sites on CSS Zen Garden are just all done with CSS and not mirrors and unbelievable sleight of server-side processing, then visit there and play with this option. Firstly you can toggle CSS (external sheets or just inline style elements) on and off.

The next three options all really aid in the analysis of a site; Show Style Sheet simply brings up the style sheet for the page in a new window while Show Applied Styles brings up a new window and displays just the style elements associated with the element under the mouse cursor at the time:

OK the website isn't up to much (I'll have a stern word with myself L ), but now I'll be able to understand the horrors that each of my elements contains a whole lot easier.

Please don't code like this at home ...

Then to top it all off we get the Test Styles option that brings up a new window and allows us to change styles on the fly – you can either use it to learn from the masters or even see how bad you can make things:

... but it could have been worse

Lastly here we can see what deprecated tags may have been used on the page – if you've been good a nice little dialog saying that no deprecated elements have been used pops up.