The visual disability simulator aDesigner tests the accessibility and usability of webpages for individuals who are blind or who have low vision. The tool has two types of visualization. In the low vision tab, the tool simulates how users with weak eyesight, color vision deficiencies, cataracts, and combinations of impairments perceive webpages. In the blind tab, the tool helps webpage designers understand how blind users who depend on voice browsers will experience the pages. Each mode looks at a different set of issues that reduce webpage accessibility or usability. These issues are described in the following sections.
The Blind setting of aDesigner runs three types of tests on webpages: blind usability visualization, accessibility and usability checking, and compliance checking. The identification of problems within each type and category is determined by the selections made in the Set the parameters dialog box (blind mode).
The blind mode of aDesigner visualizes the time required by a voice browser to read from the top of the page to each element (referred to as the reaching time). The reaching time of an element is expressed by the background color of that element. The longer the time needed to reach an element, the darker its background color. Elements whose reaching times are longer than the maximum permissible time (90 seconds) are blacked out. Authors can easily grasp the usability of the target page by looking at the visualized reaching times for all of the elements of the page.
Voice browsers can use several HTML tags as landmarks for Web navigation. The aDesigner recognizes the following four tags.
The <TABLE> tags are used to create both data tables and layout tables. In both cases, they may cause usability problems for blind individuals because the reading order of a voice browser is often different from the intuition of sighted people. The aDesigner has a function to draw borders for the table cells, thus allowing an author to check the table structure of the target page.
The aDesigner can show the output text from a voice browser. This function can be used to help experience the way blind people access webpages in a serialized format. For example, this form shows the amount of text that must be read before reaching the main content of a webpage.
The aDesigner checks for the existence of a "skip-to-main-content link." Providing such a link in a webpage allows blind people to jump directly from the top to the main content of the page. The aDesigner also detects intra-page links without destinations and intra-page links without readable text at their source locations.
The aDesigner detects inappropriate ALT attributes (alternate descriptions) of images. For example, "spacer" as the ALT attribute of a spacer image (an image used to create space for some layout purpose) is inappropriate, because such information is useless and irritating for blind people.
The aDesigner detects redundant text information (for example, an icon whose ALT attribute is "BluePages" followed by the text string "BluePages").
The structure of the HTML document can be visualized by coloring accessible tags and by showing the table cell structure as described in the previous section. In addition, aDesigner checks for nested tables and for the existence of heading tags. Nested tables make it difficult for the author to imagine how the page will be read by a voice browser. Authors are encouraged to make the document structure understandable for blind people. Heading tags help structure the webpages.
The aDesigner checks the target page's compliance with accessibility guidelines just as conventional accessibility checkers do. Refer to the topic Compliance and accessibility guidelines for Web content.
The low vision tab of aDesigner has two functions: low vision simulation and accessibility and usability checking.
The low vision mode of aDesigner simulates weak eyesight, color vision deficiencies, cataracts, and their combinations. See the Set the parameters dialog box (low vision mode) for more details.
The low vision mode of aDesigner detects four types of accessibility and usability problems in the target page:
The identification of problems within each category is determined by the selections made in the Set the parameters dialog box (low vision mode).