Recent chats
ASKGEEZ Q&A GUIDETechnology & devices

How do I describe a complex diagram that cannot be explained in one short alt text?

Quick answer

Use concise alt text to identify the diagram and point readers to a longer description nearby. Put the detailed explanation in visible document text, such as a clearly labeled section or a figure caption, and describe the important relationships the image communicates. If the explanation needs headings or tables, do not rely on aria-describedby to convey that structure; it is exposed as continuous text. [S1]

LET’S WORK THROUGH IT

The question, the details, the next step.

Question

I have a diagram with several stages and arrows. The alt text is becoming a paragraph. What should I do instead?

Geez

Split the job into two parts: a short alternative that identifies the image and directs readers to its detailed explanation, and a longer description available in the document. W3C WAI recommends this approach for complex images, with the longer account covering essential visual information such as relationships. [S1]

For example, if a hypothetical diagram shows how a request moves through three teams, the short alt text could say, “Diagram of a request moving through three teams; detailed explanation follows.” The full description can explain the sequence, decision points, and any branches that matter. These details are placeholders for your actual diagram—not a claim about what yours contains.

Follow-up question

Can you show how to put the short alternative and the longer explanation together?

Geez

One straightforward pattern is to group the image with a clearly labeled, visible description. The label and explanation below are sample wording; replace them with content that accurately describes your image.

<figure>
  <img src="[diagram-file]"
       alt="Diagram of a request moving through three teams; detailed explanation follows.">
  <figcaption>
    <h2>Detailed explanation of the request-flow diagram</h2>
    <p>The request begins with [stage one]. It then moves to [stage two].
       If [condition], it continues to [stage three]; otherwise, it [alternative path].</p>
  </figcaption>
</figure>

WAI describes grouping an image and its detailed content in a figure as one option. It also describes using a clearly named nearby link or identifying where the description appears in the alt text. [S1] This example uses a heading so the explanation has an explicit, meaningful label. Ensure the description is available to readers, not hidden as a substitute for document content.

Follow-up question

How do I make the longer description useful rather than just narrating every arrow and shape?

Geez

Write for the information someone needs to understand the diagram. Start with its purpose, then explain the meaningful sequence, relationships, branches, or comparisons. Include labels or values when they change the meaning; skip decorative details that do not help explain it. For a process diagram, a short numbered sequence may be clearer than describing each arrow in turn.

A planning draft might look like this:

  1. Purpose: “[What this diagram explains].”
  2. Main path: “[Starting point] leads to [next stage], then [outcome].”
  3. Relationships or branches: “When [condition], [path A]; otherwise, [path B].”
  4. Important labels: “[Explain any label or symbol needed to understand the paths].”

Check the draft against the image: it should preserve the key information and connections without adding claims the diagram does not show.

Follow-up question

Could I put the whole explanation in aria-describedby instead of showing it in the document?

Geez

For a description that needs headings, tables, or other structural relationships, don’t rely on aria-describedby as the only way to provide it. WAI notes that this association is exposed as continuous text, without those structural relationships, and advises using it only when the description is text-only and does not need headings or tables. [S1] Keep the detailed explanation available in the document so readers can use its structure. The source explains these patterns, but it does not determine which description is best for your particular diagram; that depends on the information your image conveys.

A practical checklist

  • Write alt text that identifies the diagram and points to the detailed explanation.

  • Place the longer description nearby and give it a clear label.

  • Explain essential stages, relationships, branches, and meaningful labels.

  • Use headings or lists when they make the explanation easier to navigate.

  • Compare the text with the image and remove unsupported assumptions.

A few more useful answers

Should the alt text repeat the heading above the diagram?

Avoid repeating information that is already clear from nearby text. Use the alt text to identify the image and, when useful, direct readers to its detailed description.

Can the detailed description be a list?

Yes, if a list makes the sequence or branches easier to follow. Choose a structure that represents the information clearly rather than forcing the explanation into one long paragraph.

Does this pattern decide what information every diagram needs?

No. The description should reflect the specific information and relationships conveyed by your diagram. The cited guidance explains ways to provide a two-part alternative, not the content of your particular description.

Sources

References used for this guide.

  1. [S1] W3C WAI Images Tutorial: Complex Images
    w3.org · Checked

YOUR QUESTION. YOUR DETAILS.

Let’s work through your situation.

Get a tailored answer or help with your next task. Starts at $1, with a quote before you pay.

Ask your own question
← Back to Geez at Work