Did you know that a colourful school diagram can look complete while leaving a reader who cannot see it with almost no information? Writing ‘diagram of a process’ as its alternative text may identify the object but not explain the choices, relationships or sequence that the learner needs for the task.
Alternative text, or alt text, is a short textual alternative that communicates an image’s purpose or essential information. For a complex school diagram, a short alt description may need to point to a longer explanation in the page itself, where the labels, directions and relationships can be stated in words. Start by asking, ‘What should a reader understand or do after encountering this diagram?’ Then describe that essential meaning without inventing details the picture does not show.
First identify what kind of image is on the page
Not every image needs the same kind of description. A decorative flourish usually has no learning information. An informative drawing, such as a labelled plant structure, may need its key labels explained. A complex chart, scientific process or flowchart may contain more information than can fit clearly into a short sentence. The W3C Web Accessibility Initiative’s images tutorial explains these distinctions; its complex-image guidance recommends pairing a brief image description with access to the essential detailed information.
The purpose is not to narrate every pixel, frame or decorative shape. It is to provide an equivalent route to the information. If learners must choose a path through a flowchart, they need the decision condition and both branches. If they must compare bars on a graph, they need values, units, scale and patterns, often in nearby ordinary text or a data table.
Worked example: a library return flowchart
Imagine a fictional school-library exercise. Its invented flowchart contains a starting box labelled ‘Return book’, an arrow to ‘Inspect book’, then a decision diamond labelled ‘Damage noticed?’ The branch marked Yes leads to ‘Record damage and ask librarian’, followed by ‘Place at service desk’. The branch marked No leads directly to ‘Place on reshelving trolley’. These are illustrative classroom instructions, not a statement of any actual school’s borrowing or book-repair policy.
A weak alt text might say: ‘Blue, green and yellow boxes connected by black arrows.’ A second weak version would say only: ‘Library book flowchart.’ The first describes appearance without the decision; the second names the subject without giving the procedure.
A useful short alt description is: ‘Flowchart of returned-book handling, showing different paths depending on whether damage is noticed; the steps are described below.’ This tells the reader what the image is for and where to find the complete explanation.
A complete visible text description could say: ‘Start by returning the book, then inspect it. If damage is noticed, record the damage, ask the librarian and place the book at the service desk. If no damage is noticed, place the book on the reshelving trolley.’ That captures the start, sequence, decision condition and both branch destinations. A reader who cannot see the shapes can now answer the same basic question as a reader who sees the diagram.
Check the example by asking three real comprehension questions
Question one: what happens before the damage decision? Return and inspect the book. Question two: does the No branch lead to the service desk? No; it leads to the reshelving trolley. Question three: does the diagram say the pupil personally repairs the book? No. The presence of ‘ask librarian’ does not authorise us to invent a repair task.
That last question is important. Good alternative text must not silently complete an unclear process with what the writer assumes would normally happen. If a label or arrow is missing, say the diagram does not specify it, or have the diagram author correct the source. Accessibility and accuracy are not competing goals.
Six features of a useful description
- Purpose: identify the process, comparison or relationship that the diagram communicates.
- Entities: name the relevant items, labels or categories rather than describing colour alone.
- Direction: state which arrow goes from what to what, especially in a sequence or cycle.
- Conditions: retain Yes/No or other branching criteria without reversing them.
- Numbers and units: when a chart contains data needed for a task, provide the actual values, units and scale in accessible text or a table.
- Uncertainty: acknowledge an illegible label, absent key or ambiguous arrow rather than guessing what it means.
Short alt text versus a long description
Suppose a diagram has twelve labels and several arrows. Packing every label into a single alt attribute can become cumbersome to listen to and difficult to navigate. A clearer design identifies the diagram briefly in its alt text and places a structured explanation immediately below it or at an explicitly linked location. The surrounding page can use headings, lists and tables to expose relationships that a single long sentence would bury.
When the image repeats information already expressed fully in nearby text, a shorter alt may be appropriate. When it adds essential information that does not appear elsewhere, that information needs a text route. A decorative border that does not convey meaning may use an empty alt attribute, written alt="" in HTML, so it does not distract readers. But a teaching diagram is not decorative merely because it happens to be colourful.
A learner diagnostic: what is missing from this description?
Present a fictional chart showing three labelled containers with values in millilitres: A = 150 mL, B = 250 mL and C = 200 mL. The student writes, ‘A bar chart with three tall coloured bars.’ Ask whether a reader could answer, ‘Which container has the largest volume, and by how much more than A?’ They cannot: the description omitted values and units.
A better accessible statement is: ‘The chart compares volumes for containers A, B and C: A contains 150 mL, B 250 mL and C 200 mL. B is largest, exceeding A by 250 − 150 = 100 mL.’ The difference is hand-checked. This is a separate invented chart, not data from a real science experiment; it demonstrates what information the text needs to carry.
Ask the learner to notice a second error: ‘tall coloured bars’ would be especially misleading if the vertical axis began at 100 mL rather than zero. The values in the text remain clear; the graphical scale still needs accurate explanation if visual proportions are part of the task.
Guided practice: translate a diagram into plain language
Use a paper exercise with four labelled boxes: ‘Read question’ → ‘Check units’ → ‘Calculate’ → ‘Review answer’. First, ask a younger learner to tell the process orally while pointing to each arrow. Then have the learner write an alt description: ‘Four-step process for solving a question, from reading and checking units to calculating and reviewing.’
Next ask them to write one sentence that makes the sequence explicit: ‘Read the question, check the units, calculate, and review the answer.’ Compare the sentence with the actual arrows. If the learner reverses ‘calculate’ and ‘check units’, the problem is interpretation of order, not spelling or screen-reader technology.
Finally replace the arrow between ‘Check units’ and ‘Calculate’ with a decision: ‘Units compatible?’ Yes goes to Calculate; No goes back to Check units. Ask the student to update the explanation. This is where the ability to describe a branching path becomes more valuable than listing box labels.
Independent practice: let another reader test your description
Give learners a new invented process described only through its elements: an oval ‘Start’; a box ‘Draft explanation’; a diamond ‘Evidence supports claim?’; Yes leads to ‘Submit’; No leads to ‘Revise claim’ and an arrow loops back to ‘Draft explanation’. The student independently writes a one-sentence alt description and a clear long description.
An acceptable short description is: ‘Flowchart for checking a written claim against evidence, including a revision loop.’ An acceptable long version says: ‘Start by drafting an explanation. Check whether the evidence supports the claim. If Yes, submit. If No, revise the claim and return to drafting before checking again.’ The loop is essential; omitting it changes the instructional meaning.
To test the result, let a classmate read only the text, not the diagram, and answer what happens after the No branch. If the classmate cannot explain the path, the description needs revision. This is a comprehension test, not a claim that every screen-reader user will experience the page identically.
What parents, tutors and teachers can do this week
Parents: use an ordinary homework diagram and ask your child to explain it as though speaking over the telephone to someone who cannot see the page. The goal is not beautiful wording. Look for accurate labels, direction, units and the main conclusion. Avoid insisting that every visual detail be verbalised.
Tutors: diagnose whether a student’s weak explanation comes from misreading the diagram or struggling to write. Let the pupil point and explain aloud first; only then work on a written description. This separates the visual reasoning demand from the writing demand and makes support more precise.
Teachers: ensure that school worksheets and uploaded resources expose essential diagram information in a form that can be read without relying solely on sight or colour. Where a long description would be unwieldy, provide adjacent structured text or a data table. Invite learners using assistive technology to report whether the information is actually usable rather than assuming technical compliance guarantees comprehension.
Observable progress: assess information transfer, not word count
Use three diagrams with increasing complexity: one labelled item, one linear sequence and one branching flowchart. For each, count whether the student’s explanation preserved the task purpose, key labels, relevant quantities and arrow relationships. Then ask another reader to solve a short question using only the written description. Improvement means that the reader can recover essential meaning with fewer clarifying questions. Longer is not automatically better.
Limitations and misconceptions
Alt text cannot repair a scientific diagram whose labels are actually wrong. It cannot create missing measurements. Nor can one short sentence necessarily represent a complex chart or map adequately. If a graphic’s essential information is too detailed, provide an appropriately structured long explanation or table. Where a diagram is interactive or has changing states, additional accessible controls and descriptions may be needed.
Do not assume that colour labels are sufficient. ‘Follow the red arrow’ excludes a reader without reliable access to colour; ‘follow the arrow marked Yes from the decision diamond to the service desk’ communicates the route through labels and relationships. Do not assume every image requires a paragraph either: a purely decorative flourish may need no spoken text.
Frequently asked questions
Should alt text describe every colour and shape?
Only when colour or shape is itself essential to the information. Name relationships and labels first. If colour encodes categories, give those categories in text as well.
Can I place the full explanation in the picture caption?
A caption or nearby visible text can help, provided it conveys the essential information and users can find it from the brief alternative. For complex data, structured text or a table is often more readable than one enormous line.
What if the diagram does not show the answer?
Say what it shows and what it does not establish. Never add a hidden step, missing measurement or causal claim solely because it would make the explanation sound complete.
Related reading and next steps
The neighbouring Core Aim guide to school presentations that do not rely on colour explains another accessibility habit. The guide to reading cutaway diagrams develops visual interpretation. A specialist case study, When School Diagrams Have Alt Text but Students Still Cannot Read the Data, explores the distinction between a filled field and usable information. Find wider approaches in the eduKate Education Hub and diagnosis-first practice in the Clementi Secondary 1 Mathematics reference.
The core question
Before considering a diagram accessible, ask a simple question: If a learner cannot see this image, can they still reach the information needed to do the same learning task? Writing truthful alt text and a clear description is one concrete way to make the answer more often ‘yes’.