August 2008

Web Accessibility Toolbar

By Brian Hardy, National Manager Market Development, Vision Australia

Toolbar Functions

A full list of features of the toolbar can be viewed at www.visionaustralia.org.au/info.aspx?page=619(External Link) and at www.paciellogroup.com/resources/wat-ie-documentation.html(External Link). The following is an introduction to some of the features of the toolbar.

Validate

Validates your (X)HTML and CSS code by passing it to online validators.

Resize

Shows how a Web page looks when viewed in a smaller screen size; for example, a 800X600 screen size.

CSS

Turning off CSS shows the page content in the source code order (if style sheets are used) - this is the sequence that screen reader users read content. It's very important that the sequence in the source code is the same as the logical reading order.

Images

Reveals the alt-text of images. This means that the alt-text can be inspected together with the image and surrounding content.

This is one of the most important and basic checks to be done on Web pages. The alt-text of images is announced by screen readers and is meant to describe the visual content of the image, no more, no less.

The challenge is to use the right wording in the alt-text. Two basic rules for writing alt-text are:

• Decorative images should have an empty alt-text (alt=""). Decorative images are not limited to borders and patterns. The context of the image determines if it is purely decorative.
• Images that convey information, which is already given in the text should have an empty alt-text (alt="").

Colour

The Colour Contrast Analyser is a program that reveals if the colours used for the text and background have sufficient contrast. You need to simply click on the text and the background to get a reading.

Structure

These functions are very helpful to reveal parts of the markup (HTML code) on the page. For example, it can outline headings, lists, frames, datatables, event handlers, access keys, and tabindex. This is another very important check to make. Only content that is properly marked up using, for example, using heading tags (h1 - h2) (rather than just bolding the heading text) enables screen reader users to identify headings and jump from heading to heading.