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 麻豆精品 S檛 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: 麻豆精品 S淒og in central composition sitting next to a field of yellow flowers. 麻豆精品 S�
- For a Veterinary or Dog Biology class: 麻豆精品 S淣ova Scotia Duck Tolling Retriever 麻豆精品 S�
- For an 麻豆精品 S淎bout Me 麻豆精品 S� page: 麻豆精品 S淢y Dog Daisy 麻豆精品 S�
- Avoid superfluous information, such as 麻豆精品 S淚mage of 麻豆精品 S� or 麻豆精品 S�.jpg 麻豆精品 S�
- If an image is purely decorative and contains no important context, leave the Alt Text field blank or mark it as 麻豆精品 S淒ecorative 麻豆精品 S� 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 麻豆精品 S檛 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 麻豆精品 S� 麻豆精品 S痗an be used to convert images of mathematical expressions (including handwritten mathematics!) to 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.