Using The Web Accessibility Toolbar

Using the Web Accessibility Toolbar

Testing a website for accessibility can be a time-consuming and laborious process. The free Web Accessibility Toolbar can do most of the hard work for you though and is an indispensable tool for anyone interested in accessibility.

The toolbar is not an automated testing tool so does require manual work from you. It's therefore able to avoid the many problems with automated accessibility testing tools. It doesn't require any technical knowledge so even the biggest technophobe can check their website for accessibility!

Installing the Web Accessibility Toolbar

You can download the toolbar for free from http://www.nils.org.au/ais/web/resources/toolbar, and after you install it, it will sit in the toolbar area of Internet Explorer. The total file size is just 550kb so the download won't take too long.

The toolbar only works on Internet Explorer on Windows, so if Internet Explorer isn't your first-choice browser you'll have to switch browsers when using it. (Alternatively, you can download the Web Developer Toolbar for Firefox which offers similar, but not identical, functionality.)

Using the Web Accessibility Toolbar

Now you've downloaded and installed the Web Accessibility Toolbar you can start using it! There are 12 buttons in total on the toolbar, each with a down arrow to the right of the text. If you click on the down arrow for any of these buttons then a dropdown menu appears with all the available options (alternatively you can use the keyboard shortcut keys assigned to each button).

Checking for document structure

One of the most useful buttons is the seventh, Structure. It's essential that the structure within the HTML code accurately reflects the visual structure of the page. This is so that visually impaired web users using screen readers can gain an understanding of the page structure.

Some of the most useful items in the Structure dropdown menu include:

Headings - Shows which items on the page are labelled as headings within the HTML code. The main page heading should be an (heading level one) and other headings should be s (heading level twos). Any sub-heading of an should be an , then and so on. Heading numbers should always be sequential - an shouldn't follow an if there's no . Headings are especially useful for screen reader users as they can call up a list of headings and jump straight to the section in which they're most interested.

List items - Shows which items on the page are labelled as lists within the HTML code, by displaying next to any list item. Lists can be horizontal or vertical, and all navigation should be marked up as a list item. Lists are very useful for screen reader users as the screen reader will announce the number of items in the list before reading the list items.

Fieldset / Label - Shows which items on the page are called labels within the HTML code. After selecting Fieldset / Label, the text next to each form should say the word label next to it - if not, that text hasn't been called a label in the code.

Table border - Places a border around each table. Nested tables within tables can cause huge difficulties for screen reader users. After selecting this item, the first table will have a black border the second blue, then green, yellow, orange, red and purple. If you see any of these last four colours it's time to take a good look at the code behind the page.

Table cell order - Shows the order in which the page is read out to screen reader users (if a table is used for layout). Hopefully, the order should be reasonably logical.

Checking the site works under all circumstances

It's important that your website doesn't depend on any one type of technology, or users whose browsers don't support that technology may be unable to access your site. You can check to see if your site depends on any one technology:

Images > Toggle Image/Alt - One of the most useful functions on the toolbar, replaces images with their ALT, or alternative, text. Alt text is read out to screen reader users or displayed to web users with images turned off, instead of the image itself (e.g. users on dial-up modems may turn off images to speed up the download time of pages). It's essential that the ALT text provides an adequate description of the image.

IE Options > Toggle JavaScript - Turns off JavaScript. After selecting this option, work through the pages on your website - is the whole site still accessible to you?

IE Options > Toggle ActiveX - Turns off ActiveX controls. Again, after selecting this, work through your website to see if the whole site is still accessible to you.

IE Options > Toggle CSS - Turns off CSS. Are pages still legible? If CSS is used for layout then you will see the page content in the order that it's read out to screen reader users. (If you toggle image/alt after this, you'll have a complete visual representation of what screen reader users will hear.)

Other useful accessibility checks

There's a huge amount of functionality available on the Web Accessibility Toolbar, but some of the other most important accessibility checks you can carry out with the toolbar include:

Validate > W3C HTML validator > Validate HTML - Checks whether the page is based on valid HTML or not. If the page is not valid, you'll be told why.

CSS > Deprecated HTML > Deprecated elements & attributes - Checks for code that shouldn't be used and is being phased out. A new window will open containing the HTML code - anything in red is deprecated and should be removed.

Doc info > Page speed report - Examines all the files used to display the web page and prepares a report on the average download speed for that page for different Internet connections.

Doc info > List links - Displays a list of all on-page links. Screen reader users can call up a list of links and jump straight to the page in which they're most interested, so it's essential that link text makes sense out of context. Link text such as ‘click here’ should be avoided at all costs!

Colour > Greyscale - Shows the page in greyscale. Great for checking colour contrast.

Other functionality

The Web Accessibility Toolbar offers some other interesting functionality:

Resize - See how your website looks for users on 640 x 480px, 800 x 600px and 1024 x 768px screen resolutions.

Tools > Simulations - Put yourself in the shoes of a special needs users with these fascinating simulations.

Conclusion

The Web Accessibility Toolbar offers an enormous amount of functionality. Download it for free from http://www.nils.org.au/ais/web/resources/toolbar and start using it. Without any technical expertise, you can perform a mini-accessibility audit on any site in just a couple of minutes.