Toolbar Tutorial

Web Accessibility Toolbar Version 1.0 – Tutorial

This page: introduction | basic information | toolbar functionality | validate | resize | CSS | images | colour | structure | tools | doc info | refs | IE options | magnify

Note: some functions and appearances have changed slightly since Version 1.0.


Introduction

Ian Blackham from www.dmxzone.com has written an informative tutorial for our Accessibility Toolbar and has given us permission to reproduce it here. Ian writes (July 2004):

So first things first, what is the purpose of the toolbar – well to quote the development team:

The Web Accessibility Toolbar has been developed to aid manual examination of web pages for a variety of aspects of accessibility. It consists of a range of functions that:

  • Identify components of a web page
  • Facilitate the use of 3rd party online applications
  • Simulate user experiences
  • Provide links to references and additional resources”

All in all then a pretty useful tool for anyone who wants to get to grips with testing their site – or as Bruce said in the previous article, learning from others by deconstructing their sites.


Basic Information

The file size to download the Toolbar and get the entire documentation is only 550Kb and the requirements are nothing too highbrow – Windows and IE 5 or higher with JavaScript enabled (it’s been tested on Win 98, 2000, NT and XP).

One thing to note is that, because the Toolbar accesses files held on other sites (the NILS and W3C ones) you’ll need to be connected to the Internet to get the full range of Toolbar function. Of course this does mean that over the lifetime of the Toolbar, you may notice some changes in the way things work if those files are revised. Furthermore, to allow for the fact development is very much an on-going process it does have an update function.

So download the file, double-click on AccessibilityToolbarSetup.exe and a couple of painless seconds later the toolbar is neatly installed into your browser (split for convenience here):

 


Toolbar Functionality

OK, I’m not going to take you exhaustively through every single piece of functionality on the Toolbar – the documentation is available from the download site, but what I will do is just run briefly through the different options and highlight the ones that grabbed my attention.

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.

TOP


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 drop down 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.

 


Images

Nice for ensuring that all the images on a page have alt attributes correctly assigned – good for checking how the chosen page is going to come across without graphics.

 


Colour

Here it’s worth noting that as yet the grayscale option doesn’t work on PNG files. Selecting Colours used will bring up an analysis and display of the various colours used in a new page, while the Contrast Analyzer takes you off to the Juicy Studio Colour Contrast Analyser.

 


Structure

Another fantastic aid – without running through all the options, this set of options will mark up all the various elements in your chosen web page. Immediately useful items for editors is to see the Heading Structure in a page.

Then for really understanding the layout of a page check out the table options and Show Divs:

To be quite honest as a newbie to using CSS I often wondered about how all the components of a site relate and I can see I’d make a great deal of use of this feature.

This feature also, according to the documentation, will display warnings and information bubbles next to onouseoveronclick and onfocus events as necessary – a feature I hadn’t experimented with at the time of writing.

 


Tools

In one of Rachel Andrew’s latest articles (Accessibility Validation) she talked about how to understand the output from the Cynthia Says validator and also about the importance of testing sites for accessibility in say text viewers such as Lynx.

This option facilitates easy access to both a variety of validators (and different options within those tools) in the top menu, while the Simulations sub-menu (shown below) gives a variety of tools for analyzing sites for specific issues – as we can see a direct link to the Lynx viewer is provided.

Within this list, examples are provided of what a site might look to a person suffering from a particular sight disorder. Having never considered some of these issues before I found experimenting with some of these simulations humbling.

Text from a page with cataract simulation applied.

 


Doc Info

The Doc Info menu carries a variety of options to assist with transmission and operation of the page. More third party tools are enlisted to support optimization and download speed analysis. Accompanying them are more administrative tools to allow page analysis (links, linked PDF’s, and frame lists).

 


Refs

A set of extremely helpful links to web based resources. Here you can jump off to WCAG and Section 508 literature, a variety of fantastically helpful websites as well as technology references for CSS, HTML 4.0, XHTML 1.0, JavaScript and W3C specs.

 


IE Options

This menu presents a variety of quick routes to altering your IE browser settings. In reading the documentation though I think it is worth flagging up two particular warnings:

  • If you disable JavaScript you will also render many of the Toolbar functions inoperative as well (as many are JavaScript based)
  • The CSS toggle is NOT a Microsoft supported function. It is worth remembering to turn this back on before shutting down IE, otherwise you may find some windows outside IE (that make use of CSS) not looking at all normal!

 


Magnify

Lastly a feature that does exactly what it advertises – zoom in and out of your web pages until your eyes go dizzy.