Providing Alternative Text for Images
using alt-text effectively
Important Guidelines for using Alt Text from webaim.org
Alternative text is hidden text added to the metadata of an image to identify it to screen reader and other AT (assisted technology) devices.
The alt attribute should typically:
- Be accurate and equivalent in presenting the same content and function of the image.
- Be descriptive and succinct, use more than 7 characters and less than 81.
This means the correct content (if there is content) and function (if there is a function) of the image should be presented as succinctly as is appropriate. Typically no more than a few words are necessary, though rarely a short sentence or two may be appropriate.
- NOT be redundant or provide the same information as text within the context of the image.
- NOT use the phrases "image of ..." or "graphic of ..." to describe the image. It usually apparent to the user that it is an image. And if the image is conveying content, it is typically not necessary that the user know that it is an image that is conveying the content, as opposed to text. If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.
Alternative Text Usage in AEM
- The most appropriate Alt text depends on the way in which the image is used in the page and communicates the purpose of the graphic, not its appearance.
- Do not leave the Alt text out entirely because screen readers will try to guess what the image is by reading the path to the image on the server, which would be very confusing, very long string.
- Do not use Alt text that repeats that added to the Title field or Caption.
- The Alt text field can be accessed in the Text and Text Image Component by clicking on the Advanced tab. See image below.
- The Alt Text is a required field.
Alt Text with Image Maps
PLEASE NOTE: This information is applicable with the CQ Image Component only, not the CQ Text Image Component.
When using an image as a link, the resulting image map must also have an alt attribute.
Each image map hotspot (area element) must have an equivalent Alt Text attribute. Because the hot spots are links, each one must have alternative text that describes the function of that link.