How to Create Accessible Images

Accessible Images = “Alt” Text Required

To create accessible images, those meant to convey meaning must include an alternative or “alt” text description. Since images are “unreadable” content, screen readers will read the alt text description when an image is found.

If no alt text is assigned to that image, then an accessibility checker will flag the missing object description as an error in your document, presentation, or web page. Your goal is to provide a textual equivalent saying what you want your students to perceive from the image.

Decorative Images

Decorative images, by contrast, add no meaning to your content. Typically, we hide decorative images from screen readers since they add no value to students’ learning experiences.

1. If you distribute a Word document, students will encounter all images when traversing the document. Thus, you should insert “decorative” into the alt text for all decorative images. This word tells students they are not missing anything if they cannot see the image.
2. If you want to provide a PDF, check the box that says “Mark as decorative.” As a result, screen readers will skip the decorative image(s) when students traverse the PDF.

How to Write Alt Text

Guidelines — Alt Text Should:

• Be accurate and equivalent – present the same content or function as the image
• Be succinct – a small phrase or a sentence. It’s best to keep this at 125 characters or less.
• End with a period (.) so screen readers will pause after reading the description
• NOT be redundant – don’t provide info already in the surrounding text
• NOT use phrases like “image of…” or “graphic of…” Screen readers already state when they encounter a “graphic.”

Writing Alt Text Resources

• Alternative Text Guide (WebAIM)
• Image Alt Text Best Practices (Siteimprove)
• Context is Critical for Alt Text
• Poet Training Tool: Helping You Write Effective Image Descriptions
• Writing Alt Text for the Web

Alt Text Examples

Possible Alt Text for this image:

• Man who is blind walks with his cane and carries his guitar to practice.
• Man who is blind walks using his cane down a busy street in Puebla, Mexico. Signs and graffiti circle the post behind him.
• Visually-impaired pedestrians can now walk safely, given metal rails installed on Mexico sidewalks.

Any of these examples could work for this image, but the text you choose should depend on the surrounding content. What is essential for your students to know about your image?

Adding Alt Text to Microsoft Office

• Word 365 & PowerPoint 365
• Word 2019 & PowerPoint 2019
• Word 2013/2016 & PowerPoint 2013/2016
• Word 2010 & PowerPoint 2010

Image Layout in Word Documents (and PDFs)

Lastly, images within Word documents must have their layout set to “In Line with Text.” This layout setting tells screen readers in what order to read text surrounding your image and the image’s alt text. Otherwise, your image “floats” within the text, and screen readers may not tell students the image even exists.

For this reason, it’s essential to keep images “In Line with Text,” so the alt text is reachable to those using assistive technology.

“In Line with Text” Layout Instructions

Do the following in Microsoft Word to ensure your image alt text is accessible:

1. Select the image.
2. Select the “Layout Options” icon at the top-right corner of the image.
   
3. Select “In Line with Text” from the Layout Options popup menu.
   

Once you’ve correctly set the layout, you can convert the Word document to a PDF, and the proper order will transfer over.

Conclusion

In summary, images meant to convey meaning to your students should always include corresponding alternative (“alt”) text. In contrast, decorative images that add no meaning to your content should be hidden from screen readers or marked as “decorative.”

Also, setting your image’s layout to “In Line with Text” in Word documents ensures your text and image alt text is read aloud in the proper order by screen readers. (Even when it’s converted to a PDF.)

Including alt text for your images (and setting their layout to “In Line with Text”) ensures you do not create barriers to your content but provide access to all that need it.