Alternate text for graphics

Lotus Notes checkpoint 3.1

Provide alternate text for important graphics.

Rationale

Adding text descriptions to graphics allows users who are blind to visualize the graphics. Screen readers use the text description (alternate text) to identify the graphics to the user. For users accessing applications on the Web with graphical Web browsers, the text descriptions also serve as placeholders for the graphics while the browser is loading the image.

When graphics are not used as links, use alternate text carefully. A person having to listen to a document cannot ignore text the way a person viewing the document can ignore a graphic. If the graphic is not important or if it is redundant, assign null alternate text so that the assistive technology will ignore the image.

Default alternate text for graphics is defined differently between R5 and Notes/Domino 6. By default in R5, graphics do not have alternate text, so the graphics will be read by a screen reader as "graphic" in a Notes Client application or as part of the image source filename in Domino. By default in Notes 6, all images are assigned null alternate text, so the images are ignored by a screen reader in a Client or Domino application.

Development techniques

The following techniques are the minimum required to meet Checkpoint 3.1 from the Lotus Notes Application Accessibility Checklist:

Provide alternate text for all graphics and graphic links.
- Select the graphic and open the Picture Properties box.
- In the Alternate Text field, enter a brief description for the image. If the image is a picture of an object, the object's name would be appropriate alternate text. For example, the alternate text for a picture of a red balloon would be "red balloon".
- If the image is not a link and is redundant or unimportant, leave the Alternate Text field is empty. This will assign null alternate text to the graphic so it will be ignored by assistive technology. This is the default behavior in Notes 6.
- If you are updating an application in R5 and you want to assign null alt text to an image, enter alt="" in the Other field in the Picture Properties box. This will assign null alt text to the image so it will be ignored by assistive technology.
Provide alternate text for applets to describe the applet's function
- Open the Java Applet Properties box and select the Basics tab.
- In the Alternate Text field, enter a brief description of the applet's function.
When using icons in views:
- If custom icons are added to views, assign a meaningful filename to the image used for the icon. You cannot assign alternate text to custom view icons, so assistive technology will read the filename for the image. The filename should describe the image. For example, an icon used to show a document is complete should have the filename complete.jpg. This function is only supported in Notes 6 or later.
- When Notes standard icons are added to views, no additional action is needed. Alternate text has already been defined for the standard icons in Notes 6 or later.
When images are added using pass-thru HTML, provide alternate text for the image. In the following example, the new.gif image is added to a view column if the document was created in the last five days. To make the image accessible, alt text is provided so a screen reader reads the information to someone who is blind. When the image is encountered, the screen reader will say "new" since that is the alt text for the image.
@If (@NOW > @ADJUST(@CREATED; 0;0;5;0;0;0); ""; "[<img src=new.gif alt="new">]")
If the graphic is the only object on a page, alternate text should always be provided. When someone using a screen reader navigates to the page, the screen reader will be silent if alternate text has not been provided for the graphic. The user will not be able to determine if there is a problem or if page is blank.

In the example below, the Picture Properties box shows the alternate text for the graphic with the text "Done".

Picture Properties box for image with alt text=Done

Recommended techniques

The techniques above are required; the following technique is recommended to enhance accessibility:

If the graphic is an image of text, the alternate text should match the text on the image. For example, if the image is the word Feedback, the alternate text should be "Feedback" and not "Click here to provide feedback".
Keep alternate text short and to the point. There are times alt text needs to be more descriptive, such as with a complicated graph or chart. In their document, Techniques For Accessibility Evaluation And Repair Tools, the Evaluation and Repair Tools Working Group of the W3C Web Accessibility Initiative recommends a maximum of 150 characters for alternate text and a maximum of 60 characters for image links.
Add a title attribute to describe where a link is going. The title can be more descriptive than the alternate text. If provided, graphical browsers will display the title text instead of the alternative text when the mouse pointer is positioned over the image. For example, the Go button on a shopping Web site may have a title attribute of "Finish shopping and check out" which describes what will happen when the user selects the link. To add the title attribute using Designer, open the Picture Properties box and go to the HTML tab. In the HTML tags group, enter a description in the Title field as shown below.

Testing techniques

Test the Web site to ensure that it complies with accessibility requirements.

Tools

Install the following tools to test this checkpoint:

A Web accessibility checking tool
A screen reader for testing with the Notes Client user interface or the Domino Web user interface.

Techniques

*The following techniques are required to verify this checkpoint:*
	Action	Result
1.	This step applies only if the application uses the Web interface. Test each page (URL) in the application with a Web checking tool to identify images missing alt="text" attributes or alt="" attributes.	Pass/Fail: See instructions in your Web checking tool to verify images.
2.	This step applies only if the application uses the Web interface. After you have tested with a Web checking tool, view the Domino Web application with a screen reader. Verify that the screen reader reads the alternative text, and that the alternative text is appropriate for the image. (The alternative text may be null for redundant or unimportant images. In that case, the screen reader will not announce the image.)	Pass: The screen reader reads alternative text for images that have non-null alt text. The alternative text is appropriate for the image. Alternative text for an image of text matches the image text. For example, the alternative text for the Submit button is [Submit]. Empty alternative text is properly assigned to the redundant or unimportant images. Fail: One or more images are missing alternative text., This error should not occur if you ran a web accessibility checker first and fixed any images with missing alternative text. The alternative text does not match the image. For example, if the image link has the text "Company Name" and the alternative text is "Welcome", the alternative text does not match what the sighted user sees. The filename is used as the alternative text, for example alt="spacer.gif". One or more alt="" are not properly used.
3.	View the Notes Client application with a screen reader to verify images have appropriate alternative text. Listen to the application to verify that images have appropriate alternative text. Tab to each image and verify that the screen reader announces appropriate alternative text for images.	Pass: Image links with alternative text are read by the screen reader. The alternative text is consistent with the image used as the link. Alternative text for an image of text matches the image text. For example, the alternative text for the Submit button is [Submit]. Fail: One or more images are missing alternative text. The screen reader reads part of the filename for the image. The alternative text does not match the image. For example, if the image link has the text "Company Name" and the alternative text is "Welcome", the alternative text does not match what the sighted user sees. The filename is used as the alternative text, for example alt="spacer.gif".

Last updated February 08, 2008.

Checklist