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.

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.

It's free to download from http://www.nils.org.au/ais/web/resources/toolbar/AccessibilityToolbarSetup.exe. This is what it looks like after the two-minute installation (and at 450K it's a fast download, too):

Clicking on many of the menu options causes a window to pop-up with the information that you need (so, if like me, you're running the Google toolbar as well, you'll need to temporarily enable pop-up windows).

Going left to right across the toolbar, the options are

• Accessible Info Solutions.
• his leads to the developers' web site, National Information Library Service, and their services
• Help and Update the Toolbar (currently in beta 0.9)
• Uninstall toolbar. (As an aside, I love applications which have an easy-to-find uninstall mechanism. How come every app doesn't do this?)
• Help, About,  and 'Contact Us' which fires up your mail client.
• Validation

This is a great timesaver, as it allows you to submit the currently browsed URL to the W3C validators for (X)HTML, CSS, as well as P3P (privacy) validation and the Web Design Group's HTML validator. As you know, you can validate your own sites in Dreamweaver, but this is a great way of testing to compliance of competitor's sites.

• Resolution

This is a handy way of checking how "much" of a site can be seen in a browser of certain common screen resolutions - 640 x 480, 800 x 600 and 1024 x 768. It doesn't change your display characteristics, but resizes the browser to that resolution, allowing you to see what is above and below the fold in those different sizes.

• Styles

Now things get really interesting! With this button you can:

• Turn CSS on or off, which is helpful to see how a non-CSS browser will render a page (e.g., PDA, ancient browsers, screen readers). Here's www.zeldman.com with the CSS on, then off - and even without styling, you can get all the in formation and it all reads in the correct order:

Zeldman.com with CSS (IE6 Win)

Zeldman.com, unstyled.

o       Toggle all inline CSS on/ off

o       Report any deprecated HTML.

Home page of Amazon

This redisplays the page, with any deprecated HTML tags shown in red. Here's the homepage of amazon.com:

Amazon.com with deprecated tags highlighted

as you can see, there's a couple of <center> tags and two <font> tags.

o       Show style sheet.

Ever wanted to see how other people do their stuff? Make sure your pop-up blocker is off, if you have one, and select this option. Here's DMXzone:

DMXzone

DMXzone's stylesheet pops up in a new window.

Sometimes, the style sheet doesn't show because it's in a different directory. For example, if you try Zeldman's site, a window pops up saying "@import url( /c/z.css );". "Hacking" the URL to www.zeldman.com/c/z.css will allow you to see the CSS. Assuming Dreamweaver is on your system with its default set-up, the system will automatically fire up Dreamweaver and import that CSS. Obviously, I don't need to point out that CSS files are copyright, just like designs or HTML and JavaScript; the fact that you can see them doesn't mean you can borrow them, unless a comment in the file explicitly says that you can.

o       Test StyleSheet.

A very cool option; a window pops up and you can input your own CSS rules and watch them amend the site you're browsing! Here's my own site with a new CSS rule turning my beautiful text into evil Comic Sans MS.

Yikes! It's Comic Sans! Nooooooo!

Fortunately, the changes only show when the rule-input window is open and, of course, only affect your machine's local copy of the site. Phew! Fun to play with and see how someone else's site works; if you can't see what a rule does, change it to something daft and see the results.

·        Images

Options under this menu are:

o       Image List, which spawns a new window, displaying each image used in the page, the html of each <img> tag, the real pixel dimensions of the image (not necessarily the dimensions it is displayed with in the tag) and the size of the image in bytes.

o       Toggle Image/ Alt turns off images and replaces them with their <alt> text, so you can check for accessibility of a site's images.

o       Show Images - this option displays the img alt text in red next to the image.

·        Document Structure

The next option allows you to see various structural items in the current page. If you click on each one after the other, the page will soon fill up with red tags. If, after looking at one set of structural items, you want to clear them before looking at another set of structural tags, hit refresh.