Free Web Development Tools: The Accessibility Toolbar

Please note a free article detailing the 1.0 release version of this Toolbar is now available here.

Many people find that learning a new web language like CSS or XHTML is tricky from a book which is heavy on the theory, and find they learn best by looking at other people’s sites and seeing how they work. Of course, you can always “view source” in the browser to see the mark-up and check the location of the CSS file to download it, but, as Dreamweaver users, we tend to like the visual approach. Well, now for those using IE under Windows, there’s a free toolbar that offers many options for visual, one-click investigations of the structure of sites, developed by the Accessible Information Solutions (AIS) team at the National Information and Library Service (NILS), Australia.

Don’t be fooled by the name - even if you’re not designing accessible sites, it’s a great way to develop your CSS and HTML skills as well, of course, check accessibility. It gives you all kinds of information about the structure and styles of the site you’re visiting – invaluable if you’re wondering how they made that stylesheet, or learning modern coding techniques.

Amnesty International

o       Headers. This shows you all <h1> to <h6> tags, Looking at the Amnesty International site, http://www.amnesty.org/ shows an interesting structural anomaly.

Headers in amnesty.org

The first header - an <h1> - says "Stop Child Executions", and is followed by an <h2> with further details. This is followed by two subsequent <h2> tags about North Korea and Germany. The fact that they're "under" the Child execution header suggests that they're in that subject matter - but they're not. They should be <h1> tags in their own right. (Other schools of thought suggest that there should only be one <h1> tag per page, and everything else should be "under" that. Either way, the Amnesty site's headers are incorrectly marked up.)

o       List items. This shows all list tags. If we look at Molly's personal site, molly.com, we can see that she does indeed practice the Web Standards mark-up that she preaches. There's two lists in the screenshot below, the left-hand list being navigation, styled to omit bullets:

List items in molly.com

o       The next interesting items are those to do with Tables. Here's Microsoft.com with the Simple Date Table item chosen:

of nested table cells in www.microsoft.com

further Table options are show table borders which is great if you're trying to strip out nested  tables and replace them with CSS as Rachel describes in her article "Taking CSS Further". Here's the BBC site with coloured lines describing the table structure:

BBC

The BBC website with table borders coloured in.

A great option to help you develop Accessible pages is the 'Linearize: Remove Tables", which shows you the order that your site would be read out using a screenreader.

o       Show DIVs. On sites with CSS, this option shows the order that the DIVs appear in the source (not necessarily anything to do with their positions on the screen), and therefore the order that a screen-reader would read them. On my own site (again, yes I know, but I knew it would fit the example!) you can see that, although the navigation is on the left, before the main content, the nav is div 3 and the content is div 2, meaning that the content would be read out first:

Order of DIVs in source (not on-screen order) displayed.

       Colours. This option is mostly for accessibility development; you can see a site in greyscale, get an analysis of the contrast of a site (so expect a rebuke for those designery grey-text-on-white-background sites!). A useful function lists all the (html) colours in a page - so you can quickly get the hex codes for some colours that take your fancy - but only if they're in the mark-up or css; coloured graphics don't get listed. Here's the listing for google; note that the red, green and yellow in the logo aren't listed as they're contained in a graphic.

• Tools - this is another option aimed predominantly for the accessibility designer; the option to submit the current page to various accessibility evaluators (Bobby, Cynthia Says etc). There's useful options to (temporarily) disable mouse clicks, JavaScript etc to see if your page will still work, and a useful links analyser from Juicy Studios that tests every link in your page.
• Meta Information - shows Metadata, page weight, lists links, tables, PDFs etc
• References - quick links to W3 specs, a JavaScript, CSS, HTML, XHTML reference, and web accessibility references.