Alternative Text
Related WCAG Reference
To make your documents accessible to all, you must provide alternative text to non-text content. Alternative text (also known as alt text) are descriptive words applied to visual information, such as images, charts, and diagrams. It is especially helpful for people who are unable to see visual information and rely on screen reader technology to have the content read to them. Alternative text is embedded and usually hidden; when a screen reader application encounters an image, it reads out whatever alternative text is attached to it.
When using MS Word or MS PowerPoint, you can add alternative text to images by right-clicking on the image and choosing “View Alt Text”.
The following example shows the dialog box that appears when you right click and choose “View Alt Text”. In this example we have typed the following description into the input box: Woman holding a cane and crossing a street with a service dog.
Most other tools, including email systems, also have built in tools to add descriptive text.
Many applications, including Microsoft applications, will generate automatic descriptions of an image. Do not rely on these descriptions as they are often poor quality. Although technology is getting better at recognizing what an image depicts, it cannot understand what an image means within the context of the overall page. A maple leaf might represent Canada, or it might just illustrate the leaf of a tree. Authors must provide alternative text that represents the content and function of their images.
Alternative text should:
- be accurate and equivalent in representing content and function.
- be succinct - content and function, if there is such, should be presented as succinctly as possible, without sacrificing accuracy. Typically, only 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 near the image on the page or slide.
- not include phrases like "image of ..." or "graphic of ...", etc. This would be redundant since screen readers already announce "graphic" along with the alt 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.
Avoid images of text
Related WCAG Reference
WCAG 2.1 Success Criterion 1.4.9 Images of Text (No Exception)
Images of text can distort or pixelate when resized, which is problematic for users with low vision and users of mobile devices. When images of text are required, the text alternative should contain the exact same text contained within the image.
Images should not contain informative text unless it is an essential part of the image. For example, the text that forms part of a brand or logo is essential, but an image that contains a paragraph of information below a flow chart is not essential because it can be cropped out of the image and typed on the page instead.
Decorative Images
Related WCAG Reference
A "decorative" image is one that does not present important content or function information. Perhaps it is only used for layout or non-informative purposes. For example, a decorative line that divides a page: while the image does convey a separation between document sections, it is just a visual reinforcement of a structure that is already presented in text.
When deciding if an image should be decorative, ask yourself: if the image were deleted, would important information be lost? Often, we may add images to make a document more visually appealing. Writing a descriptive alt text for images of that nature forces screen reader users to listen to what may be meaningless, redundant, verbose descriptions that slow down their progress through the document. Screen reader users may become frustrated and feel as though their time is being wasted.
In MS Word or PowerPoint, right click on the image and choose “View Alt Text” to find a checkbox labeled “Mark as Decorative”. Select the checkbox if you would like the image to not appear to screen readers.
Visit the WebAIM: Alternative Text site for further examples and descriptions of appropriate alt text approaches.