Favelets for human review

• The human review favelets
• General favelets
• Installation
• The human review process
• Scoring the human review process

You can see how the favelets work on this page by activating the favelet links further down on this page. For example, selecting (and activating) the link for the "Headings" favelet will highlight the headings on this page. Note that most of the favelets will have little to say about this page. And this is not how they are to be used in general. I will explain how to save them in your favorites folder so they can be used on any page.

 

The human review favelets

Active Images The "Active Images" favelet counts alt-text errors and highlights alt text on active images to review. Active images include images inside anchor tags (image links), <input> elements with type="image" and <area> elements for image maps. This favelet does not add markup text for image errors although all image borders are highlighted.

Larger Images The "Larger Images" favelet counts alt-text errors and highlights alt text on larger images to review. Larger images are <img> elements which are not active and whose height and width are both greater than 9 pixels. Like the Active Images favelet, this favelet does not add markup text for image errors although all image borders are highlighted.

Long Description The "Long Description" Highlights and provides links to view long descriptions when present.

Formatting Images The "Formatting Images" favelet counts alt-text errors and highlights alt-text on formatting images for review. Formatting images are defined here as images which are not active and which have height or width less than 10 pixels. This favelet does not add markup text for formatting image errors although all image borders are highlighted.

Form Labels The "Form Labels" favelet highlights form labeling and counts form labeling errors. Errors are also highlighted unlike the case with all the image favelets.

Data Tables The "Data Tables" favelet simply displays all accessible table markup - th, summary, scope, axis, id, and headers. In this way, the human reviewer can see if necessary accessible table markup is present. The favelet also draws borders around all tables.

Skip Links The Skip Links favelet highlights the location of in-page links and where input focus will land when each link is activated.

Headings The Headings favelet counts and highlights all HTML headings (h1, h2, ..., h6) on the page.

 

General Favelets

These favelets are not specifically part of the Human Review Process but may be helpful in unusual situations.

Frame Borders The Frame Borders favelet puts borders around the individual frames on the page.

Partial Source The Partial Source favelet displays in a new window the source code for the content that has been highlighted on the current page.

Show All Images The Show All Images favelet highlights and marks up the page showing the alt text for all images on the page.

Dom Inspector The powerful and technical Dom Inspector favelet follows the mouse pointer and provides a text popup of the DOM structure of any object of the page. To recover the natural use of your mouse pointer, refresh the page.

 

Installation

Use the following sequence steps to install the 12 Favelets above.

1. Create a folder, say "JT-Favelets"
• Favorites | Organize Favorites | Create Folder



• Enter the name, "My Favelets," in the edit field that becomes available. Then close the Organize folders dialog (Alt+L).
2. Open the favorites side panel so that the new folder is visible ( View | Explorer Bar | Favorites or Crtl+I).
3. Drag each favelet from this page to the My-Favelets folder - Select "Yes" on each security warning.



This process can be accomplished from the keyboard although the functions of most favelets are purely visual. Give focus to the desired favelet. Open the context menu with Shift+F10. Choose "Add to Favorites" (F). The Security warning will open, select "Yes." Then in the Add Favorite dialog, find the folder HRC Favelets in the "Create In" list and select OK (Enter).

 

Human Review Process

1. New Page

1. Open the next page
2. Record the URL of the page

2. Active alt-text (Score 10)

1. Apply the Active Images favelet to the page.
2. If a new window is opened containing a list of <frame> elements, skip top step number 9.
3. Record the number of active image errors, the number of active images, and the number of active images to review as reported by the favelet.
4. Record number [up to 3] of objects (images, image buttons, areas) with inappropriate alt-text, like alt-text is too long, doesn't match the image, is generic or otherwise useless. Comment as appropriate. Make sure the alt-text conveys the function of the image. If the image is text, the alt-text should (usually) be that text.

3. Inactive alt-text on non-formatting images (Score 8)

1. Use F5 to refresh page.
2. Apply the Larger Images favelet to the page.
3. Record the number of larger image errors, the number of larger images, and the number of larger images to review as reported by the favelet.
4. Record number [up to 3] of larger images with inappropriate alt-text, like alt-text is too long, doesn't match the image. Comment as appropriate. Watch especially for generic and useless alt-text. Perhaps the image should have alt="" if it is just providing "eye candy".

4. Long Descriptions (Score 10)

1. Record the number of large images from the previous step (Step 3) that are charts, graphs, or presentation slides, for which alt-text does not convey the important information in the image and a long description is needed.
2. If a long description is in-line no long description attribute is necessary.
3. Apply the Long Description favelet to the page.
4. Look at long descriptions for the large images (links are made available for those by the favelet).
5. Record the number [up to3] of images in Step 4.1 that do not have in-line descriptions and do not have long descriptions or for which the in-line or long description is inadequate.

5. Alt text on formatting images (Score 4)

1. Use F5 to refresh page.
2. Apply the Formatting images favelet to the page.
3. Record the number of formatting image errors, the number of formatting images, and the number of formatting images to review as reported by the favelet.
4. Record number [up to 3] of formatting images with inappropriate alt-text. Comment as appropriate. Watch especially for things like "spacer", "1_pix.gif" or "rule".

6. Form labeling (label elements or title attributes). (Score 10)

1. Use F5 to refresh page.
2. Apply the Form labels favelet to the page.
3. Record the number of form controls, the number of form control errors and the number of corm controls to check out as reported by the favelet.
4. Review the labels or titles, when specified, for adequacy. Record the number (up to 3) of form elements in which the label/title is present and not adequate. Watch for both title and label. If significantly different it is an error .Comment as appropriate.

7. Data tables (Score 10)

1. Use F5 to refresh page.
2. Count and record the number of data tables on the page.
3. Apply the Data Tables favelet to the page.
4. Record the number of data tables observed.
5. Record the number [up to 3] of Data Table markup errors. Any missing TH on a heading cell is an error. If the table is complex the, any header cell without an id or data cell without a headers attribute is an error.

8. Skip links (Score 10)

1. Use F5 to refresh page.
2. If there are 5 or more navigation links preceding the main content of the page, the record 1 for human review for skip links.
3. Apply the Skip Links favelet to the page.
4. If there is a skip link at the top of the page, check that its target is correct - the top of blue border should be the top of the main content. If it is not, there is a skip link error.
5. If there is no skip link, check the headings on the page by applying the Headings favelet to the page. If there is a heading at the top of the main content then there is no skip link error; if there is no such heading then there is a skip link error.
6. Comment as appropriate.
7. The review is complete; skip step 9.

The following screen shot shows the results of the Skip Links favelet having been applied to the IBM Web Accessibility Guidelines page, Checkpoint 8.



There are 6 in-page links on this IBM page. Four of those are visible in the screen shot. The target of all is the object with the navy blue border wihch is OK for the skip link but not good for the other in page links. As it turns out for each of those inpage links (Ratinale, Techniques, Testing) the tab after following the link will return input focus to the "Rationale" link, an annoying fact for the kwyboard user.

9. Frames (Score 10)

1. This step is to be followed only if a frame list is opened in step 2. The window opened in step 2 above contains a list of <frame> elements with the associated name and title attributes. Each missing or inadequate title attribute is an error.
2. All other items score 0 errors.

Further tests for Human Review

After validating/fine tuning the human review process with the favelets so far described, additional favelets will be added to test for certain other accessibility concerns, especially to check for the effects on readability of the page when CSS is not enabled and for the existence of unusual media types suggesting possible multimedia and/or applet/plugging accessibility errors requiring human review. Rather than including all at the start, the tests listed here are the ones most likely to raise concerns/errors on common web pages and a productive subset of all possible human tests.

If a frameset page is encountered, the favelets above will open a window with a list of the frames, so that individual frame pages could be examined. That window will list the name and title attribues of the <frame> elements.

 

Scoring the human review process

The scoring is based on system used for judging in the AIR Programs hosted by Knowbility, Inc. In the classic format of the AIR event, tech teams are trained in accessible web development and paired with non-profit organizations. In a one-day rally, each tech team builds a web site for its non-profit. Then the web sites are judged by a team of accessibility experts. The judging process is based on a judging form which has been developed over the years for ease of use and accurracy. For us the key ingredient of that form is the idea that you only need to count a few errors, three in particular. If there are three active image errors, then the team receives 0 points in the active image category. The idea is that by the time there are three failures - it is clear the page developer has failed that test, and that more errors do not significantlty cange the situation. The other part of the idea is that this eases the burden on judges in that there is no need to count more than three errors. Since our goal is to complete this review in a very short time this is a significant saving.

The following table shows the way each of the human review steps is scored. The maximum score is 62 for a page with no errors.

Number of errors	0	1	2	3
Active alt-text	10	5	1	0
Inactive alt-text	8	4	1	0
Long descriptions	10	5	1	0
Formatting Images	4	2	1	0
Form Labels	10	5	1	0
Data Tables	10	5	1	0
Skip links	10	0	0	0
Frames	10	5	1	0
Max Score	62