# Exploring the HTML Accessibility perspective

The HTML Accessibility perspective consists of five panes (see Figure 1). Two appear at the top: the ACTF Browser Editor is on the left, and (depending on the active mode) either the Low Vision Simulation View or the Blind Visualization View is on the right. Each pane includes function buttons. Below these panes is the Evaluation View pane. The Evaluation View pane has two kinds of Views, the Summary Report View and the Detailed Report View. The Summary Report View has the Summary Report pane and the Overall Rating pane. The Detailed Report View has the Tree View pane and the Line View pane (which together make up the Problem List) and most ACTF Visualization components are shared by both modes.

Figure 1. The user interface of HTML Accessibility perspective.

## ACTF Browser Editor

The page to be tested is opened in the ACTF Browser Editor (Figure 2). By default, this pane is at the top left of the screen. The size of the pane can be changed by dragging the edges.

At the top of the pane are the address bar, forward and backward arrow buttons, a stop button, a refresh button, and a GO button. The URL of the page to be tested is entered in the address bar and clicking GO opens the page.

Figure 2. ACTF Browser Editor.

## Simulation/Visualization View

To the right of the ACTF Browser Editor is a pane that changes depending on the active mode. In the Low Vision View, the pane is the Simulation View (Figure 3). In this pane, there is a simulated view showing the experience of what a low vision reader might see when looking at the target webpage. In the Blind Usability View, the pane is the Visualization View (Figure 4). In this view, the page shows an impression of how a blind user who relies on a voice browser is going to experience the page. By default, this pane is on the top right of the screen. The size of the pane can be changed by dragging the edges.

Clicking one of the two views at the top of the pane select the visualization type. The buttons in the row below the Low Vision and Blind Usability Views are determined by the active view.

Figure 3. Simulation View.

The buttons and check boxes specify the portions of the target page to be checked and the vision deficiency parameters the tool should use for the assessment.

Figure 4. Visualization View.

The screen capture shows the buttons that appear in this pane and the items that the tool checks when it is running in the blind mode, such as reaching time, tags that can easily be accessed by voice browsers, and the availability of intra-page links.

## Evaluation View pane

The evaluation result appears in the Evaluation View pane. This pane has two kinds of views, the Summary Report View (Figure 5) and the Detailed Report View (Figure 6). The Summary Report View has the Summary Report pane and the Overall Rating pane. The Detailed Report View has the Tree View pane and the Line View pane (which together make up the Problem List).
Figure 5. Examples of the Summary Report View.
Figure 6. Examples of the Detailed Report View.

### Summary Report pane

The Summary Report pane area provides the summary report of the target page's accessibility and usability (Figure 5).

### Overall Rating pane

The Overall Rating pane area provides the target page's overall rating for accessibility and usability (Figure 7).

Figure 7. Examples of the Overall Rating pane in the low vision mode (left) and in the blind mode (right).

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 the positions of the problems. 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 compliance rating is based on the number of problems concerned with compliance. The navigability rating reflects how well structured the Web content is by using headings, intra-page links, labels, and so on. The listenability rating denotes how appropriate the alternative texts are.

### 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 (Figure 8) categorizes the problems. The category of problems to be listed in the Line View can be selected by clicking the category name.

Figure 8. Tree View pane.

- Error: The problems that must be addressed.
- User Check: The items that must be manually examined to determine if they comply with accessibility guidelines. An item in this category may or may not be a problem.
- Information: Informational items.

### Line View pane

The line view presents the problems for the selected categories line by line. Figure 9 shows a sample of the Line View pane (blind).

Figure 9. An example of the Line View pane (blind)

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

- Symbolic icons and scores for evaluation metrics,
- The checkpoints of the accessibility guidelines related to the problem,
- The line number in the HTML document (optional), and
- A description

The Line View pane (low vision) differs slightly from that of the blind mode (Figure 9).

Figure 10. An example of the Line View pane (low vision)

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

- Symbolic icon,
- The checkpoints of accessibility guidelines related to the problem,
- A description,
- The severity,
- The foreground and background colors,
- The position, and
- The area

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:

- Clear Selection: Selecting this item clears the current selection of problems in the Line view. This is used to stop highlighting problems in the Simulation/Visualization view.
- View Guideline: Selecting this item refers to the corresponding help pages of the guideline items, which appear in a separate browser window. If there are no relevant checkpoints in any guideline, this item is not available.
- View Problem Description: Selecting this item opens a dialog box that shows the problem description of the selected problem. This is useful when the problem description is too long to read in the Line View.
- View Source HTML: Selecting this item opens the HTML source viewer in which the corresponding HTML element is highlighted. This item is available only in the blind mode.

## Status bar

The status bar shows information related to the active mode.

# Related topics

- Two types of visualization
- Accessibility and usability problems for blind users
- Accessibility and usability problems for users with low vision
- User interface menus and icons
- HTML source viewer

Go to Index