Adding Alt Text to Images
Overview
Images are powerful teaching tools to add to documents and course sites. The use of images breaks up walls of text on documents and web pages, enhancing engagement and piquing interest. However, images require additional steps to make them accessible to all students. This page addresses the use of alt text to achieve this accessibility.
Alternative text or “alt text” is text written to describe an image for students using screen readers or other assistive devices. Alt text provides the context or meaning behind an image and is essential for accessibility. Without it, students might miss critical information, leading to a less inclusive web experience
How to Add Alt Text to Images
Context and purpose matters! Reflect on the reason that you are providing the image to the students. For example, an image of Royce Hall might simply be meant to situate the course as a UCLA course and the alt-text may simply say “Royce Hall at UCLA”. However, if the image of Royce Hall is part of a lesson on the history of the architecture at UCLA, then a much more descriptive alt text would be needed.
When uploading an image to a document or slide presentation, you may be prompted to input the alt-text as part of the upload. Once an image is already added, right click on the image to bring up options for “alt text”.
A few guidelines for writing alt-text:
Be Descriptive, Not Redundant: Provide a clear, simple description of the image that gives the same information someone would gain from viewing it.
- Bad Alt Text: “Image of a tree.”
- Good Alt Text: “A large oak tree with green leaves in a park.”
Keep It Short and Relevant: Alt text should be brief, ideally under 125 characters. Overly detailed descriptions can be cumbersome for screen reader users.
- Bad Alt Text: “A picture of a large oak tree with green leaves, standing in the middle of a park with a grassy field surrounding it. The tree has a thick trunk, and there are benches nearby.”
- Good Alt Text: “A large oak tree in a park.”
Consider the Image’s Context: The alt text should provide meaning based on the image’s context in the page. For instance, a photo of a person may need a name or title in a biography section, while a photo in a gallery may only need a description of the artwork.
- Bad Alt Text (out of context): “A smiling woman.”
- Good Alt Text (context-specific): “Professor Jane Smith giving a lecture in a classroom.”
Function-Based Descriptions for Links or Buttons: If an image is clickable (e.g., a button or a link), the alt text should describe what will happen when it’s clicked or what the action is.
- Bad Alt Text: “Logo image.”
- Good Alt Text: “Go to homepage.”
Don’t Include “Image of” or “Picture of”: Since screen readers already announce that it’s an image, there’s no need to prefix the alt text with “image of” or “picture of.”
- Bad Alt Text: “Image of a tree in a park.”
- Good Alt Text: “A tree in a park.”
Summary & Key Takeaways
- Any time you add an image to course material, create the alt text at that time. This workflow will prevent you from having to add the alt text at a later time and prevent missed alt text.
- Considering AI-generated alt-text? Many tools now include options for AI generation of alt-text. These tools can help you add alt-text more quickly, however you still need to review the generated text for accuracy.
- For complex images, such as data visualization, take the time to consider how to best describe the data for a visually impaired student. What details are important for them to know about the visualization and specific data points? You can also consider adding audio descriptions to complex data visualizations, which would benefit all students, not just those using screen readers.
- Lastly, recognize that for your own research and publication process including alt-text of your data representations is also an important responsibility (and likely to be required by journals soon if not already). Take time to make your own research digitally accessible to future readers.