Accessible diagrams and relationships
Preserve a diagram’s relationships in readable text.
Name the entities, relations, direction and limits. Give readers a complete explanation that remains useful without the image or its interaction.
Free learning from Semantec SEO.
Decide what meaning must survive without the diagram.
An accessible diagram explanation preserves the entities, relationships, direction, sequence, states and qualifications that the visual communicates. A short alt phrase can identify the diagram; it cannot replace a complete account of a dense network. Start by writing the answer the reader must understand before choosing the graphic treatment.
List the material information and any action the reader needs. A founder-and-publisher graph may need distinct person, organization, article and page identities, plus named relationships. A process diagram may need prerequisites and branches. Do not reduce either to “a set of connected circles” and assume the task is preserved.
W3C guidance for complex images describes short identification together with a fuller equivalent. Keep that equivalent available to everyone near the model or through a clearly named route. Native headings, paragraphs, lists and tables can preserve structure that a single long alt attribute cannot.Name the nodes and the relationships explicitly.
A graph joins subjects to objects through named relations. State who or what each node represents, which way each edge runs and what the relationship means. A line between a person and company does not reveal if the person founded it, works for it or merely wrote about it. Those predicates are different claims with different evidence burdens.
The W3C RDF concepts provide a formal subject-predicate-object model. An educational relationship diagram does not need to expose technical syntax, but the explanation still needs the same precision. Use names consistently and distinguish a real entity from a page describing it.
Preserve limitations beside the related edge. A founding relationship does not prove current employment. A publisher relationship does not prove authorship. A draft relationship should not look accepted merely because it uses the same color as verified ones. State the source and status in words.
Read this complete fictional entity graph in text.
This fictional publishing example has five nodes and six directed edges. No real business or person is described. The nodes are O, Example Press, an organization; P, Rowan Cole, a person; A, “Choosing a content home,” an article; F, Rowan’s profile document; and W, Example Press’s website. The stipulated visible records support only the relationships listed below.
| Edge | Subject → relation → object | Meaning and stipulated support | Limit |
|---|---|---|---|
| E1 | O Example Press → founder → P Rowan Cole | The organization record says Rowan founded Example Press | No current employment inferred |
| E2 | A Article → author → P Rowan Cole | The article visibly credits Rowan as its author | No authorship claim for other articles |
| E3 | A Article → publisher → O Example Press | The article names Example Press as publisher | Publisher remains distinct from the person |
| E4 | F Profile document → main subject → P Rowan Cole | The profile chiefly describes Rowan | The page is not the person |
| E5 | F Profile document → publisher → O Example Press | The profile names Example Press as publisher | No claim about unrelated external profiles |
| E6 | F Profile document → part of → W Website | The profile is one document on this website | Website is not identical to its publisher |
Read E2 from the article to Rowan: Rowan wrote this article. E3 connects that same article to Example Press as publisher, so author and publisher remain distinct. E1 explains a founding relationship between the organization and person; it does not add a current works-for edge. E4 identifies the profile’s subject, while E5 and E6 describe the profile as a published document on a website.
The article and profile both connect to Rowan, but they do not become the same document. The profile and website are connected through containment, not identity. No edge states that Rowan owns the website, that Example Press is a person, or that the article has won an award. The complete graph consists of these five nodes and six edges only; omitted relationships must not be inferred from proximity.
A reader can answer the intended questions from this text: who wrote the article, who published it, who founded the organization, what the profile describes and where the profile belongs. That is the task equivalent. “A network of five nodes” would identify the picture’s form while losing those answers.
Use non-color cues and a meaningful reading order.
Label entities and relations in ordinary text. Use direction indicators together with named source and destination; do not ask the reader to deduce direction solely from position. If status matters, write “accepted,” “draft” or “unresolved” and provide a reason. Shape, line pattern or grouping can reinforce the distinction, but color alone must not carry it.
Choose a reading order that explains the graph. Introduce the node types, state the principal question, then give related edges in an intelligible sequence. Keep a table’s headers and row labels associated with its cells. A visual arrangement can be spatially flexible while the text equivalent remains ordered and complete.
For this example, read the node definitions first, the article’s author/publisher edges next, then the founding and profile relationships. The table’s edge IDs allow a reader to refer to a specific statement without saying “the green line on the right.” W3C’s color criterion supports communicating beyond color, while meaningful sequence addresses order.
Specify a component-level fallback brief.
An accessibility brief needs operation and failure conditions beyond alt text. This populated fictional record keeps those fields attached to the relationship task. It does not claim that a real interactive map has passed testing.
| Field | Required content or behavior | Acceptance check |
|---|---|---|
| Task | Identify author, publisher, founder and profile subject | All answers available from ordinary text |
| Component | Optional relationship diagram plus native definitions and edge table | No fact exists only in an image or hover state |
| Equivalent | All five nodes, six edges, directions, evidence limits and omitted inferences | Reviewer compares each visual assertion with the table |
| Reading order | Definitions, main question, grouped relationships, limits, next route | DOM sequence makes sense without visual position |
| Operation if interaction is added | Named keyboard controls, visible focus and touch access; no hover-only information | Keyboard and touch testing required before release |
| Failure states | Missing image or script leaves complete static explanation | The same decisions remain available without the enhancement |
| Scope and owner | Fictional source record; editor owns edges, developer owns operation | Reopen when a node, relation, source or component changes |
A static explanation is often the smallest suitable answer. If an interaction is added elsewhere, do not make an inaccessible control acceptable merely by placing an unrelated paragraph below it. Both the interaction and the alternative need to fulfill their respective jobs. Video or audio components require their own captions, transcripts or descriptions as appropriate; a diagram’s alt text does not cover those media.
Test equivalence and access as separate questions.
Compare the visual assertion inventory against the equivalent line by line. Check every node, edge, direction, status, unit and qualification. Then inspect operation and reading conditions: source order, headings, zoom, narrow layout, keyboard, focus, touch and missing-media behavior. A complete text account can coexist with a broken interaction, so record both results.
Ask a reviewer to answer the graph’s task questions from the text alone. Ask another to identify claims the visual suggests that the text does not state. A missing relationship requires content repair; a misleading visual requires model repair. Do not solve a contradiction by adding vague alt text.
Automated checks can reveal some structural defects, but they cannot establish that the equivalent preserves the graph’s full meaning. Keep the exact artifact version and evidence for every check. A draft table is not a claim of WCAG conformance.
Keep the equivalent current when the model changes.
An updated graph can leave an old text account describing the wrong founder, page owner or sequence. Maintain one assertion record from which both treatments are reviewed. Record the owner, accepted source, version, exceptions and change trigger. Recheck reused diagrams in their new context rather than assuming the original explanation travels with them.
If the model becomes too dense, divide it into coherent questions while preserving the full relationship record. A simpler diagram plus complete native text can serve the task better than a large decorative network. Do not erase uncertainty or collapse distinct entities solely to make the layout fit.
Return to the visual meaning and usable pages hub for the wider composition and consistency work. The learning overview connects accessible explanation with source ownership and page purpose.