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
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.
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:
- 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.
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