To create accessible web pages, you need to mark up page elements with information for assistive technologies, such as screen readers. For example, each image on a page should be given a text equivalent, called alternative text (or alt text), which a screen reader conveys to users in place of the image.
Alternative text appears on the image placeholder while the image is downloading from the web; it also substitutes for graphics that fail to download. In some newer versions of browsers, the text appears next to the pointer as a ToolTip.
Adding alternative text to a slice or hotspot
Alternative text
Adobe® Illustrator® software provides a web graphics production tool for developers to insert alternative text within the design tool itself. The Slice Options panel allows alternative text attributes to be assigned to each individual image slice. With the inclusion of alternative text, images can be interpreted by text-only assistive devices.
W3C reference: Alternative text for images
Adding alternative text to a slice or hotspot
To specify alternative text for a selected slice, choose Object > Slice > Slice Options from the Illustrator menu to access the Slice Options dialog box.
The alternative text can be added to the Alt field.
The screen reader will anounce the text in the alt tag field to describe the image to the user. Make sure that the alternative text correctly conveys the information contained in the image. If the image is decorative or irrelevant, the alt tag field can be left empty. This will cause an empty alt attribute to be added during export to HTML, which means that the screen reader will ignore the image.
Exporting HTML from Photoshop
When you export (by choosing File > Save for Web & Devices) or copy HTML from Illustrator, the following code and files are generated so that your Illustrator image can be re-created on a web page:
- The HTML code necessary to reassemble sliced images and any JavaScript code if the document contains interactive elements: Illustrator HTML contains links to the exported images and sets the web page background color to the canvas color.
- One or more image files, depending on how many slices are in your document and how many states you include in buttons.
- A file called spacer.gif, if necessary, which is a transparent, 1-pixel-by-1-pixel GIF file that Illustrator uses to fix spacing problems when sliced images are reassembled in an HTML table. You can specify whether Illustrator exports a spacer. By default, Illustrator CS6 adds an empty alt attribute to spacer images and images that have no alternative text specified. This alerts screen readers that this image holds no content. The spacer image is therefore ignored, unless it is linked or clickable.
Selecting Edit Output Settings from the Save for Web & Devices dialog box brings up the Output Settings dialog box where you can tell Illustrator to always add the alternative attribute to the image. If you specified a value in the alt tag field of the Slice Options window, that value will appear in the exported HTML code.
Adding alternative text in an external application
When an image created in Illustrator is used in a web environment, you must ensure that alternative text is applied in your web editing application.
W3C Reference: Using alt attributes on img elements