Alt Text for Diagrams and Flowcharts: 12 Examples
By AutoBoost Team · 2026-10-29 · 7 min read
The flowcharts we found had either no alt text or just a title, and none of our 12 examples was a good flowchart with branches. On 29 October 2026 we fetched the HTML of pages on 72 sites, looking for diagrams and flowcharts in education sites, engineering guides and process explainers. 46 sites loaded. 26 blocked us, timed out or had no page at the address we tried, so we skipped them. Many of the 46 that loaded had no diagram in the page source. This guide uses 12 diagrams from 10 sites where we could read the alt text. Each is quoted exactly as it appears in the HTML, with the page it came from.
Key takeaways
- Only 4 of the 12 diagrams had alt text that told you what the diagram shows. 5 had a clear fault.
- The most common fault was no description at all: 2 missing and 1 empty. Both missing cases were on pages about flowcharts and software design.
- The good examples named the parts and how they connect, in 96 to 147 characters.
- Two different images on the Observer pattern page at Refactoring Guru share the same alt text, so a listener cannot tell them apart.
Twelve diagrams and what they said
| Site | Alt text | Characters | Verdict |
|---|---|---|---|
| Wikipedia, Flowchart | Missing (the lamp troubleshooting flowchart, no alt attribute) | 0 | Fault: missing |
| Wikipedia, Business process model and notation | Empty (a BPMN process with normal flow) | 0 | Fault: empty on a diagram that carries information |
| Wikipedia, Nitrogen cycle | Diagram of nitrogen cycle above and below ground. Atmospheric nitrogen goes to nitrogen-fixing bacteria in legumes and the soil, then ammonium, then nitrifying bacteria into nitrites then nitrates (which is also produced by lightning), then back to the atmosphere or assimilated by plants, then animals. Nitrogen in animals and plants become ammonium through decomposers (bacteria and fungi). | 392 | Fine: follows the flow, but far too long |
| Microsoft Learn, Azure architecture styles | Logical diagram of an N-tier architecture style. | 48 | Fine: names the diagram, not the layers |
| AWS Lambda Developer Guide, runtime environment | Diagram showing the steps of a Lambda cold start including downloading code and setting up the execution environment. | 117 | Good |
| MDN, An overview of HTTP | An HTTP request from a client forwarded by several proxies to a server and a response taking the same route back to the client. | 127 | Good |
| Kubernetes, Cluster architecture | The control plane (kube-apiserver, etcd, kube-controller-manager, kube-scheduler) and several nodes. Each node is running a kubelet and kube-proxy. | 147 | Good |
| web.dev, Rendering performance | The full pixel pipeline, containing five steps: JavaScript, Style, Layout, Paint, and Composite. | 96 | Good |
| Refactoring Guru, Observer pattern | Structure of the Observer design pattern | 40 | Fault: same alt on two different images |
| GeeksforGeeks, Agile development models | steps_in_agile_sdlc_model | 25 | Fault: file name |
| Martin Fowler, CQRS | Missing (the single model diagram, no alt attribute) | 0 | Fault: missing |
| Tutorialspoint, Software development life cycle | Spiral Model | 12 | Fine: names the model, not what the diagram shows |
A few notes on the table. The Refactoring Guru page has two different pictures of the pattern: one plain (structure.png) and one with numbered callouts (structure-indexed.png). Both have the alt text "Structure of the Observer design pattern". The GeeksforGeeks alt text is the upload name of the image file with the extension removed. Wikipedia puts most of its explanation in the caption under each figure, which is why many of its diagrams have nothing in the alt attribute. A screen reader user gets the caption, but the diagram itself is still unlabelled.
Parts, connections and order
The four good examples came from AWS, MDN, Kubernetes and web.dev, and they have the same shape.
- They name the parts. "kube-apiserver, etcd, kube-controller-manager, kube-scheduler". "JavaScript, Style, Layout, Paint, and Composite". A diagram is made of named boxes, so the box names are the content.
- They say how the parts connect. "A request from a client forwarded by several proxies to a server and a response taking the same route back." The arrows are the point of a flowchart, and the good examples put the direction into words.
- They give the order for a process. "The steps of a Lambda cold start including downloading code and setting up the execution environment." The word "steps" tells a listener to expect a sequence.
- They stop at the overview. None of the good ones read out every box. The Kubernetes example lists the control plane parts and the two node parts, then stops.
Left out of all four: colours, shapes and line styles. Not one says a box is blue or a line is dashed. Only one of the four used the word "diagram" at all, and that was to say what the steps were. And none reads out the full text of the figure. The Nitrogen cycle example, at 392 characters, does exactly that, and that is the job of a caption or a text version under the picture.
Flowcharts with branches: where alt text runs out
For a flowchart with real decisions, such as the lamp troubleshooting chart on the Wikipedia Flowchart page, alt text cannot carry every yes and no branch. Write one sentence on what the chart decides, then put the full steps in a numbered list in the text. Our examples did not include a good flowchart with branches, which is itself a finding.
Missing, empty and repeated
Counted from the table, 5 of the 12 had a fault.
- Missing alt attribute: 2. The Wikipedia flowchart and the Martin Fowler CQRS diagram. A screen reader may read out the file name instead.
- Empty alt: 1. The Wikipedia BPMN process. Empty alt text is right for decoration. A process diagram is not decoration.
- File name: 1. "steps_in_agile_sdlc_model" is the upload name. It hints at the subject, but nobody wrote it for a reader.
- Same alt on different images: 1. Refactoring Guru uses one sentence for a plain diagram and a numbered one.
The other 7 were good or fine. Of those, 3 were fine but weak: a very long one (392 characters), a label with no content ("Logical diagram of an N-tier architecture style.") and a bare title ("Spiral Model"). Nothing we found was keyword stuffed, and none described colour. The mistakes on diagrams were too little text, or too much of it.
One or two sentences, not the whole figure
From the 9 examples with text: the three shortest, "Spiral Model" at 12 characters, "steps_in_agile_sdlc_model" at 25 and "Structure of the Observer design pattern" at 40, named the diagram and nothing else. The N-tier label, at 48 characters, said which style but not what the layers are. The four good ones ran from 96 to 147 characters, which is one or two sentences. The longest, at 392 characters, is accurate and easy to follow, but it is nearly three times the length of the longest good example.
A working rule from this sample: aim for one or two short sentences, around 100 to 150 characters, naming the main parts and how they connect. If the diagram needs more than that, put the full steps in text beside it.
Tip: give the full steps their own list
Diagrams exported from drawing tools usually land in the media library under whatever name the tool gave the file, with no alt text at all. That is the same as the missing and file-name faults above. Write a one-line summary for the alt, and give the full sequence its own numbered list in the post. For a draft, check that it names the main parts and how they connect, and leaves out colours and shapes. Related guides cover chart alt text, table alt text and screenshot alt text, and the main bulk alt text guide covers the whole library.
The free AutoBoost SEO plugin connects WordPress to the AutoBoost SEO app. The app writes missing alt text for the images in your posts in bulk, you approve each one, and it saves to the post and the media library.