Testing for image markup using the Firefox Accessibility Extension

Overview

The Firefox Accessibility Extension supports people with disabilities and web developers in navigating, styling and accessing text equivalents that are useful to people with disabilities. Developers can use the tool to test their web resources for functional accessibility features based on the iCITA HTML Best Practices

Strengths

  • Provides a convenient table of the images and associated alt text of a web page
  • Errors are flagged by color coding the row of the img listing.
  • Selecting an image in the table of images window also highlights the image in the web browser window to assist in identification.

Weakness

  • No major weaknesses.

Step 1: Enter the URL of the Page to Evaluate

Procedure

  1. Select the “Text Equivalents” icon on the FAE tool bar.
  2. Select the “List of Images” item from the “Text Equivalents” pull-down menu.

Screenshot

Screen shot of Enter the URL of the Page to Evaluate

Step 2: Identify alt text Associated with page images

Procedure

  1. Verify that every image element has an alt attribute. (Non-informational images should have null or empty values.) Images lacking an alt attribute will be flagged with a red row background color and a ”(No Alt or Title)” error message.
  2. Selecting the row in the list of images displays more information in the “FAE Rule – Accessibility Information” pane at the bottom of the window.
  3. Verify that every informative image element has meaningful alt text containing 7 to 90 characters.
  4. Verify that the alt attribute does not include the file name of the image.
  5. Verify that the alt attribute does not contain information that is redundant with the img element. For example, avoid using words like “image”, “picture”, “graphic”, “photo” and “photograph”.

Screenshot

Screen shot of Identify alt text Associated with page images

Step 3: Visually inspect selected image on page (Optional)

Procedure

  1. Selecting the row in the list of images highlights the image in the browser window.

Screenshot

Screen shot of Visually inspect selected image on page (Optional)

Rules Evaluated with this Technique

Rules evaluated with Firefox Accessibility Extension
Test
Type
Description
Automatic

Every img element must have alt attribute.

Manual

Descriptions should be meaningful and contain at least 7 and less than 90 characters.

Manual

The alt attribute content should not include file name of the image.

Manual

The alt attribute content should not include information that is redundant with the img element.