Digital images, including graphs and diagrams, are valuable for visualizing concepts, processes, or data. However, students who need assistive technologies, such as a screen reader, may not be able to access the content of an image unless it is accompanied by a textual equivalent. When thinking about the best way to provide equivalent text for an image, keep in mind the goal is to provide students who cannot visually perceive the image access to its content in its context.

What are Some Ways your Online Course can be Designed to Meet this Standard?

A textual equivalent of an image may be provided through alt text, a caption, or its own section of text, depending on its content and function in context.

Alt Text

If a textual equivalent of an image can be provided concisely (e.g., a short phrase or sentence) use the alt attribute in the image.

• To add alt text to an existing image, either left click or right click on the image to open its editing options, which should include alt text in most documents or applications.
• Concisely describe image content that is relevant to its purpose. Think how you would describe the image in its context to someone who can’t see it.
• Avoid superfluous information, such as “Image of” or “.jpg”
• If an image conveys no information, mark it as “Decorative” in the alt text interface.

Caption

A caption for an image that conveys all the relevant information for its context can serve as a universal design approach that provides access to all users.

Other Equivalent Text

If an image conveys more content than can be captured in alt text or a caption (e.g., infographic, chart, diagram), provide the content in its own section of text, using bulleted or numbered lists as appropriate to enhance readability. Alt text should still be used to communicate the general content of the image.

Images of Text

Assistive technologies do not read text in images at the time of this writing, so it is generally better to use real text (i.e., styled with CSS), rather than images of text, when possible. If your digital content currently has images of text, don’t despair, though.

• If an image contains a short amount of text, such as a logo, alt text that contains the same text as in the image is appropriate.
• If an image has a larger amount of text, optical character recognition (OCR) software can be used to convert images of text into real text.
  • Does your course have pdfs composed of images of text rather than real text? Tools such as Adobe Acrobat Pro include OCR software to convert images of text to real text. OCR conversion is not always perfect, so be sure to proofread converted text and edit as needed.
  • Does your course have images of mathematical expressions? An OCR tool such as MathPix can be used to convert images of mathematical expressions (including handwritten mathematics!) to Mathematical Markup Language so you can replace or supplement images of mathematical expressions with real text that can be read by assistive technologies. At the time of this writing, Mathpix has a limited free version for educators and students.

Resources

• Use the UDOIT tool in Webcourses@UCF to check for (and fix) existing issues related to images. While in UDOIT, you can check for and fix other accessibility issues as well. Note that UDOIT scans only Pages, Assignments, Quizzes, etc., in Webcourses@UCF; it does not scan your course files (e.g., Word docs, PDFs, PPTs). So, course files need to be reviewed for accessibility issues separately.
• Refer to W3C Web Accessibility Initiative Images Tutorial for more details and tips.
• Refer to Web Accessibility in Mind’s (WebAIM) Alternative Text  for more details and tips.
• Enroll in Digital Accessibility Basics in Webcourses@UCF for information about UCF’s Digital Accessibility Policy and strategies to make content more accessible.

What Does This Look Like in a Real Online Course?

Example 1: Alt Text

Brigitte Kovacevich, ANT3145, Archaeology of Complex Societies

The alt text of Figure 1 describes its content relevant to its purpose: “The Great Ziggurat (temple) located at the city of Ur from the Mesopotamian civilization.” To view the alt text of an image without a screen-reader, right-click on the image and then select “Inspect” to open the source code of the webpage. The code related to the image, including the alt attribute, will be highlighted.

Figure 1. The Great Ziggurat of Ur

Example 2: Caption

Stacey DiLiberto, HUM3460, Latin American Humanities

The caption under Figure 2 describes its relevant content, providing access to all students in one place.

Figure 2. Wall carving in the Great Ballcourt at Chichen Itza depicting sacrifice by decapitation. The figure at left holds the severed head of the figure at right, who spouts blood in the form of serpents from his neck. The ball has a skull on it, symbolizing death. Creative Commons, 2009

Example 3: Other Equivalent Text

IDL6543, Interactive Distributed Learning

There is more content in the UCF Students at a Glance Spring 2022 Infographic in Figure 3 than can be appropriately explained in alt text or a caption, so IDL6543 provides a link below the infographic to a separate page in the course that provides an accessible text version.

Figure 3: Infographic created by CDL Graphics

If interested, explore an accessible text version of the UCF Students at a Glance Spring 2022 Infographic that is located above.

The accessible text version: