Images

• Student experience
• Step 1: Determine image's purpose
• Step 2: Microsoft Word tutorial 
• Images that contain words
• Complex graphs or charts
• Resources

Student experience

Watch this video to understand how a screen reader navigates images. 

• Duration
• 00:47

Step 1: Determine image's purpose

Images not only provide visual appeal to our pages, but they also convey important information. The problem occurs when we add an image that provides pedagogical content to our students, but fail to provide an adequate text alternative for students who are visually impaired. The alternative text (called alt text for short) feature allows you to provide a description of the image. 

General rules for alt text

The accessibility experts at WebAim provide the following guidelines. The alt text should: 

• Be equivalent in presenting the same content in and function of the image.
• Be succinct. This means the correct content (if there is content) and function (if there is a function) of the image should be presented as concisely as is appropriate. Typically no more than 10 words.
• Refrain from using "image of" or "graphic of" to describe the image. The screen reader will announce to your learner that the object is an image. If the medium of the image is an important aspect (such as a photograph or oil painting), then the medium should be included.
• Refrain from adding file extensions such as .jpg or .png. 

What is the pedagogical intention of your image? Or is it decorative (not required to pass your course)? 

Watch this intro video about screen readers' perspective, common mistakes, and how to write descriptive images.

• Duration
• 3:39

Images that are purely decorative, and have no pedagogical value (other than to provide visual appeal to a page) do not require a descriptive alt text.

The marble colored banner on the Canvas Accessibility Overview screenshot serves as a decorative feature to add interest and sets a friendly tone.

 

Step 2: Microsoft Word tutorial 

• Duration
• 2:07

1. Select and right-click the image.
2. Select Edit Alt Text…
   Or select Mark as Decorative for images that do not support content.
3. Provide a brief and concise description and select “X” or close the window.

1. Select image.
2. In the menu, select Picture.
3. Select Alt Text.
4. In the Format Picture  window:
   • If image supports content, write a brief description.
   • If image is decorative, we recommend using the desktop version to "mark as decorative", write "" to indicate image is decorative, or deleting the image to streamline content information.

 

Images that contain words

According to WCAG 2.0, when possible, we need to refrain from adding a large amount of text in decorative banners. Limit the number of banners or images that contain text. In general, if the image contains words, the alt text should also convey those words. 

The alt text for the image below might be "Microsoft Word Accessibility Self-Paced Micro-Course".

Complex graphs or charts

Complex images contain substantial information – more than can be conveyed in a short phrase or sentence:

• Graphs and charts, including flow charts and organizational charts
• Diagrams and illustrations where the page text relies on the user being able to understand the image
• Maps showing locations or other information such as weather systems

The image below contains a chart, text, and a table.

1. Write the text and format using the Microsoft Word rich content editor. 
2. Write a couple of sentences or a paragraph to convey essential information. This long description is placed directly on the Microsoft Word doc near the complex image. 

Accessible Microsoft Word Version of Reasons for Inaccessibility Example Download Reasons for Inaccessibility Example

Resources

"Images Concepts" Links to an external site. by Web Accessibility Initiative Links to an external site. is licensed under CC BY 4.0 Links to an external site.

"WebAIM" Links to an external site. is licensed under CC BY-NC 4.0 Links to an external site. / A derivative from the original work Links to an external site.