Logo des colloques

aDesigner : a customizable tool to control and monitor web accessibility

Jean-Louis Carvès
IBM Accessibility Center E.M.E.A., France


Printable version of the page

Speaker's information

Jean-Louis Carvès is responsible for the Marketing & Sales support at IBM Accessibility Center Europe Middle East Asia.


Overview of aDesigner

Web authors can use aDesigner to ensure that the Web pages they create are accessible to individuals who are blind or visually impaired.

The aDesigner Version 1.10 is not only for Web designers and Web developers but also for Web administrators and Web auditors, because it provides site-wide analyzing features. It is also aimed at being used IBM consultants for Web accessibility services.

Voice browsers, such as I.B.M. Home Page Reader, read aloud the text on Web pages and are used by visually impaired people. However, these programs are less effective with certain kinds of content, including highly graphical material.

Web content developers can use aDesigner to test the accessibility and usability of Web pages for low vision and blind individuals. The tool looks at such elements as the degree of color contrast on the page, the ability of users to change the font size, the appropriateness of alternate text for images, and the availability of links to promote navigability within the page.

The tool also checks the pages's compliance with accessibility guidelines. (You can choose the accessibility Guidelines Set you want: WCAG 1.0 P1, P2, P3 or U.S. Section 508 or Japan Industry Standards) The result of this analysis is a report that lists the problems that would limit accessibility and usability by visually impaired users. In addition, each page is given an overall score. With this information, Web content developers get immediate feedback and can make the necessary modifications to address these obstacles before the content is published.

Exploring the aDesigner workspace

The aDesigner workspace consists of five panes (sub-windows) : Two appear on the top: the Browser View pane is on the left, and (depending on the mode you are in) either the Simulation View pane or the Visualization View pane is on the right. Each pane includes function buttons. Below these panes is the Evaluation View pane. Evaluation View pane has two kinds of tabs, the Summary Report tab and the Detailed Report tab. Summary Report tab has the Summary Report pane and the Overall Rating pane. Detailed Report tab has the Tree View pane and the Line View pane (which together make up the Problem List) and the Most aDesigner components are shared by both modes.

Browser View pane

The page you want to test opens in the Browser View pane.

Simulation/Visualization View pane

To the right of the Browser View pane is a pane that changes depending on the mode you have selected :

Evaluation View pane

The evaluation result is appear in Evaluation View pane. This pane has two kinds of tabs, the Summary Report tab and the Detailed Report tab.

In the low vision mode, the pane provides an overall rating that is based on the total severity values of the problems and a problem map that indicates visually the positions of the problems on the page.

In the blind mode, the pane provides an overall page rating that is based on the number of the problems and a radar chart that visually shows the target page's rating in terms of compliance, navigability, and listenability.

The page is rated with a rating of 300 points max (100 points per criteria).

Tree View pane

When accessibility problems are detected, they appear in the Problem List. The list consists of two parts: the Tree View pane and the Line View pane.

The Tree View categorizes the problems. The category of problems to be listed in the Line View can be selected by clicking the category name.

The Line View presents the problems of the selected categories line by line.

In the blind mode, each line provides the following information about a problem:

In the low vision mode, each line provides the following information about a problem:

Left-click a line in this view to highlight the element that corresponds to the problem in the Simulation/Visualization view.

Right-click a line or press Shift+F10 to open a context menu. The items in the context menu are as follows:

Site-wide Analyzer

Site-wide Analyzer is a tool for analyzing the structure of an entire Web site. It reads the crawling results using aDesigner and analyzes them to present graphical representation and statistical data for the Web site.

The detected problems of the site are also collected and displayed, which helps Web authors identify the location of problems, fix them, and enhance the rating of the Web site. It also provides tools for checking the heading structures of pages and for analyzing the ALT text information attached to image files.

Site-wide Analyzer accepts data from several Web sites at one time, which is useful when comparing the accessibility of Web site to the competition. The user can compare not only accessibility scores; but also various statistical data, such as the numbers of errors for images, the maximum reaching times, the number of pages that use Flash or Javascript, and so on.

aDesigner Customization

Guideline checking function of aDesigner can be customized by using two types of XML files.

Guideline XML

You can add new guideline by adding guideline X.M.L. into aDesigner's guidelines directory. There already exists some guideline X.M.L. files, such as IBMguideline.xml and w3v8.xml which is the set of guidelines specific to our Intranet.

If you add new guideline X.M.L. into the directory, new guideline item will be appeared into Guideline Checker Options dialog box and Line View Pane. After adding new guideline, you have to modify CheckItem X.M.L. to associate each guideline item with aDesigner's checking functions.

So if we want to check an I.B.M. Intranet Web set of pages, the pages will be rated on 400 instead of 300, 100 on accessibility standards compliance, 100 on listenability, 100 on navigability and 100 on meeting the I.B.M. Intranet design guidelines.

These additional set of guidelines can be customized to meet most of your organization requirement for web page design.

CheckItem XML

You can customize association between guideline items and aDesigner's checking functions by modifying CheckItem X.M.L. You can also customize the severity, corresponding evaluation metrics and scores for each check item.

In other words, you can make this tool yours !

See the French version

Back to home

Valid XHTML 1.0 Transitional Valid CSS!