Learning Commons: Digital Accessibility: Write Alt Text for Images

Write Alt Text for Images

Alternative (Alt) Text provides a brief, meaningful description of an image so that users who rely on screen readers or other assistive technologies can access the same information as sighted readers. Alt text should communicate the purpose of the image, not just what it looks like.

What Happens When Alt Text is Missing?

For Images with a File Name or URL: The screen reader may read the file name or image URL aloud. Example: IMG1234.png will be read as "IMG1234 dot PNG.”
For Inline Images: the screen reader may say "graphic" or "image" without additional context.
Impact on User Experience: Missing alt text results in confusion or gaps in understanding, as users are not given any meaningful context about the image.
This is particularly problematic for images conveying critical information, as it excludes screen reader users from accessing that information.

What Exactly is Alt Text?

A concise written description providing equivalent information for all learners.
Purpose of Alt Text: Deliver the same experience and information to everyone.
Core Idea: Clarity about the purpose of the image makes writing alt text easier and more effective.

To Write Effective Text, Ask Yourself These Four Critical Questions:

Alt text should explain the image in a way that supports the surrounding content. When writing it, consider:

Why is this image included?
What information does it provide?
What function does it serve?
If the image were removed, what words would replace it?

Keep alt text clear and concise—aim for under 15 words when possible.

Complex Images (Charts, Graphs, or Infographics)

Definition: Complex images convey detailed or substantial information, such as graphs, charts, diagrams, and maps. These images require more than a short phrase or sentence to explain their meaning. For example, flow charts and organizational charts often present intricate relationships, while maps might show locations, weather details, or other layered information.

Since these images can be challenging to understand—especially for people with low vision, learning disabilities, or limited prior knowledge—it’s essential to provide long descriptions alongside them.

A two-part approach is recommended for alternative text:

Alt Text: A short description identifying the images and if needed, pointing to the location of the long description.
Long Description: A detailed textual description of image’s essential information.

How to Provide Long Descriptions:

Text below the Image: Place the long description directly beneath the image on the same page. This approach ensures all users can easily locate and access the detailed explanation.
Link to Separate Document: Provide a link to a word document, PDF, or a separate webpage containing the long description.

Key Practices:

Ensure the location of the long description is clear from the alt text or context.
Maintain accessibility standards for any linked documents (use descriptive text for links).

Decorative Images

Definition: Images that do not provide additional information to the content.
Examples: Used as part of page design.
- ” Provide ambiance or “eye candy
- Have adjacent that text that explains their purpose (no alt text needed).

Alt Text: Mark the image as decorative so that screen readers can skip these images, improving navigation for users.

Action/Functional Images

Definition: Action images are interactive elements, such as buttons or links.
Alt Text: Should describe the action initiated or the outcome of clicking on the images.
- Avoid describing visual appearance.
Missing alt text causes screen readers to announce the file name or URL, which is not helpful.

Images of Text

Definition: Images of text are visuals that display text intended to be read.

Key Consideration:

Resizing Issues: prone to distortion and pixelation when resized, making them harder to read.
Screen readers cannot interpret or read the text embedded within the image.

Best Practices:

Avoid images of text
Provide accurate alt text: ensure to include the exact same text presented in the image.
High Contrast and Readability: minimum color contrast ratios for readability (4.5: 1).

Digital Accessibility