Making complex images accessible on WordPress websites

When to use this method

Use accessible complex images on WordPress posts (articles) when you need to:

• Display charts, graphs or infographics with detailed data
• Share maps or diagrams that convey essential information
• Ensure everyone can access the complete meaning 

Use UW Theme's built-in tools when working on WordPress pages.

The template

Copy this HTML code into WordPress classic editor's text tab:

<figure style="max-width: 100%; margin: 1em 0;">
  <img
    src="[Image URL]"
    alt="[Brief summary under 150 characters]"
    style="width: 100%; height: auto;"
    loading="lazy"
    decoding="async">
  <figcaption>
    <strong>[Figure 1: Descriptive title]</strong><br>
    [Detailed description of the image. Include context, important details,
    and any information needed to understand the image without seeing it.]
  </figcaption>
</figure>

Step-by-step instructions

Step 1: Upload your image

1. Use "Add Media" to upload your chart/graph
2. Copy the image URL from the Media Library

Step 2: Add the code

1. Switch to the text tab (not visual)
2. Paste the template where you want your image
3. Replace YOUR-IMAGE-URL with your actual image URL

Step 3: Write your copy

• Alt text: Brief summary under 150 characters (chart type + main finding)
• Title: Clear, descriptive heading in sentence case
• Description: Detailed explanation of all data, trends & key points

Writing helpful descriptions

Include these details in your descriptions for complex images:

• Specific numbers, percentages or ranges
• Trends (increases, decreases, patterns)
• Highest/lowest values or significant differences
• Time periods & context

Think: "How would I explain this chart to someone who can't see it?"

Get AI help

Many AI tools can generate useful image descriptions and alt text, saving time and enabling greater accessibility. Try this prompt when uploading an image to an AI chatbot:

"Create accessible alt text & description for this chart that meets university web standards. Include: 1) Brief alt text under 150 characters, 2) Detailed description with specific data points, 3) No phrases like 'image of' or 'chart showing'"

Please note when getting AI help: 

• You must follow university guidelines around AI use. You may only use approved AI tools when working with university data (exception: data classified as "public" is OK to use in non-approved tools).

• You must always verify an AI tool's output before using it on the web. AI tools can sometimes misinterpret images and make mistakes, potentially introducing errors into your work. You are responsible for ensuring your alt text and image descriptions are correct, helpful and meet accessibility standards.