Using the AIS Web Accessibility Toolbar

Author: Steven Faulkner of Accessible Information Solutions - external link
Date: August 2005

web accessibility toolbar in two sections (section 1)toolbar section 2

Article Contents

  1. Introduction
  2. Using the '3rd Party Online Tool' Functions
    1. Example using the 'W3C HTML Online Validator'
  3. Using the Page Transformation Functions
    1. Example using the 'List Items' function
    2. Example using the 'Metadata Information' function
  4. Using the Browser Settings (IE Options) Functions
    1. Example using the Toggle CSS function
  5. Further Reading

Translations

A translation of this article is available in Belorussian - External Link - courtesy of WebHostingRating - External Link.

Introduction

The Web Accessibility Toolbar- external link is a free extension for Internet Explorer (version 5 and above, Windows), it contains many features that can help in the assessment of the accessibility of web pages.

The toolbar functions can be roughly divided into 3 types:

  1. Functions that submit the URL of the page, currently viewed in the browser, to 3rd party online tools. Examples of these functions include:
    • Tools > The Wave > Check Accessibility Issues
    • Tools > Juicy Studio Tools > Readability Test
    • Validate > W3C HTML Validator > Validate HTML
  2. Functions that perform transformations on the content of the page currently viewed in the browser, these functions either:
    • Identify specific aspects of the page (code and/or content) inline. Examples of these functions include:
      • Structure > List Items
      • Doc Info> Show Lang attributes
    • Provide detailed information, about specific aspects of the page, organized in a tabular or list format. Usually this information is shown in a new browser window. Examples of these functions include:
      • Doc Info> Metadata information
      • Structure > Frame Name & Title
  3. Functions that modify browser settings. Examples of these functions include:
    • IE Options > Toggle Javascript
    • IE Options > Toggle CSS

Using the '3rd Party Online Tool' Functions

The toolbar allows easy access to many of the online accessibility testing and validation tools. To check a web page with these tools is a simple process:

  1. In Internet Explorer, navigate to the web page that you want to check or test.
  2. Choose the tool you want to use by either accessing the menu item using a mouse or use the access keys - external link to activate a menu, then move through the menu items using the 'arrow' keys and press the Enter key to activate the function.
  3. The Toolbar will submit the address (URL) of the page to the online tool, the results of the submission can either be viewed in a new a window or the current window (replaces the current page).

Example using the 'W3C HTML Online Validator':

An HTML validator can be used to test a pages conformance with the Web Content Accessibility Guidelines (WCAG) 1.0 - external link, Checkpoint 3.2 Create documents that validate to published formal grammars.

  1. Navigate to Web Accessibility Toolbar- external link Home page
  2. Choose the W3C HTML Validator > Check HTML [new window] menu item in the Validation menu. This will submit the (URL) of the current page to the W3C HTML Validator - external link.
    Partial screenshot of a browser window showing the toolbar validation menu, with the 'Check HTML [new window]' menu item highlighted.
  3. A new window will open containing the results of the validation check. In this example, the page was found to be Valid XHTML 1.0 Transitional. This means that the page tested conforms with WCAG 1.0 Checkpoint 3.2.

    It is quite often the case that the HTML code of a page will contain errors, if so the results page will list, very useful, details and explanations of any errors found.

    Partial screenshot of a browser window showing the W3C HTML validator results page

Please Note: Accessing the online tools via the Toolbar does not always give you the opportunity to use the full range of a particular online tools capabilities. Check the web site of each tool for further information. Links to the web sites of all the online tools accessed via the toolbar can be found in the toolbar documentation - external link.

Using the Page Transformation Functions

The toolbar contains many functions that identify and display specific aspects of a web pages' code and/or content, either by inserting information into the current page or displaying information about the page in a new window These are designed to help identify the use, misuse or absence of particular HTML markup and presentational properties (CSS) that can affect the accessibility of the page. To use these functions

  1. In Internet Explorer, navigate to the web page that you want to check or test.
  2. Choose the tool you want to use by either accessing the menu item using a mouse or use the access keys - external link to activate a menu, then move through the menu items using the 'arrow' keys and press the Enter key to activate the function.

Example using the 'List Items' function:

The List items function can be used to check if page content that is visually displayed as a list, is marked up using the appropriate HTML elements, indicating conformance with Web Content Accessibility Guidelines (WCAG) 1.0 - external link, Checkpoint 3.6 Mark up lists and list items properly.

  1. Navigate to the Juicy Studio Home page - external link
  2. Examine the page, is any of the content visually displayed as a list?
    Juicy studio home page with a section of content, that looks like list, circled.
  3. Check the coding of content you have identified as a list by activating the Structure > List Items Function. If there are any list elements (ul, ol, li, dl, dt, dl) found within page code, the elements will be identified:
    Partial screenshot of a browser window showing the Juicy studio home page with underlying HTML list elements displayed

    In the event that some lists on the page have been marked up correctly and others haven't this will be apparent due to the lack of markup display around the lists that have not been marked up correctly.

  4. When no list elements are found within the HTML code of the page an alert box will be displayed:
    alert box - No list elements

Example using the 'Metadata Information' function:

The Metadata Information function can be used to check the information contained within the title element, meta elements and link elements found within a page's HTML code, checking for the presence of these elements and examination of their content will help determine conformance with Web Content Accessibility Guidelines (WCAG) 1.0 - external link, Checkpoint 13.2 Provide metadata to add semantic information to pages and sites.

  1. Navigate to the W3C Home page - external link
  2. Activate the Doc Info > Metadata Information function
    partial screenshot of a browser window showing the toolbar metadata information menu item highlighted
  3. A new window will open containing details of the title element content, a table detailing the content of the name, content and http-equiv attributes of any meta elements and details of any link elements found within the HTML code of the current page. If no instances of these elements are found it will be indicated within the new window.
    partial screenshow of a browser window containing details of the title,meta and link elements found

Using the Browser Settings (IE Options) Functions

The IE options functions provide simple access to some Internet Explorer's settings that are useful for accessibility checking, In some cases changing of these settings normally involves multiple steps and the opening and closing of a number of dialogs or in the case of the Toggle CSS function it is not a user setting normally available within IE.
Note: Unlike other toolbar functions, once activated, the effect of an IE Options function will persist until the function is deactivated. To disable CSS on the current page only use the CSS > Disable CSS' function.

Example using the Toggle CSS function :

The Toggle CSS function can be used to visually examine how the content of a web page is displayed without the presentational effects of Cascading Style Sheets. Checking if the content is understandable, legible and well structured when CSS is disabled will help determine conformance with the Web Content Accessibility Guidelines (WCAG) 1.0 - external link, Checkpoint 6.1 Organize documents so they may be read without style sheets. For example, when an HTML document is rendered without associated style sheets, it must still be possible to read the document.

  1. Navigate to the WebAIM Home page
    Partial screenshot of the toolbar IE options menu with the Toggle CSS menu item highlighted.
  2. Activate the IE Options > Toggle CSS function, the page will refresh and the page will be presented without CSS presentational effects.
    Partial screenshot of the Webaim home page viewed without CSS support
  3. CSS support will be disabled for all sites viewed within Internet Explorer until the Toggle CSS is re-activated.
    Note: Some people may inadvertently activate this function or forget to reactivate CSS before closing IE. This will have the effect that IE will render all web pages without CSS, and it will also modify the display of other windows dialogs (example: add/remove programs) that use CSS for styling content. If you have any problems refer to the Toolbar Blog - external link.

Further Reading

The Web Accessibility Toolbar has over 70 different functions, to learn more about the Toolbar and how it can used as an aid to web accessibility testing refer to the following:

WebAIM is an initiative of:
Center for Persons with Disabilities (CPD) Utah State University