Images, including graphs and diagrams, are valuable for visualizing concepts, processes, or data. However, people 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 users who cannot visually perceive the image access to its content in its context.
Best Practices
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. For example, here’s a picture of a dog next to some yellow flowers and some possible alt text options for different situations.
- If there are no image options to edit alt text, you can do so through the HTML with the alt attribute on the img. Example:
alt="Write your alt text here" - For a photography class: “Dog in central composition sitting next to a field of yellow flowers.”
- For a Veterinary or Dog Biology class: “Nova Scotia Duck Tolling Retriever”
- For an “About Me” page: “My Dog Daisy”
- Avoid superfluous information, such as “Image of” or “.jpg”
- If an image is purely decorative and contains no important context, leave the Alt Text field blank or mark it as “Decorative” in the alt text interface. This essentially tells screen readers to skip the image because it’s not important.
Alt text can be beneficial for all users; for example, alt text shows up on the screen if the image does not load properly, so someone with a bad connection or older device can still understand the content, even if the image itself does not fully load.
Avoid using animated gifs that serve no contextual purpose, as they can negatively affect those with cognitive disabilities.
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 in close proximity to the image, 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., HTML text 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 content 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 content have images of mathematical equations? 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 equations 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.