Start with the information the reader needs
Before arranging a diagram, write a plain sentence describing what it shows. For example: “Three labelled cards: seven of hearts, queen of clubs and ace of spades.” This sentence helps decide what must stay visible when the layout becomes smaller. Decorative shadows and borders can support the design, but they should not cover rank or suit markings.
Do not make colour carry the whole message
A red outline may look different on another display and may be difficult for some readers to distinguish. Pair it with a label, a symbol or a position that is also described in words. If two groups are called A and B, show those letters beside the groups. Avoid instructions such as “look at the red cards” when the intended meaning is “look at the hearts”.
Provide a useful text equivalent
If an image contains information that is not already present in nearby text, describe that information in its text alternative. A short card list can be written directly below the image; a complex diagram may need a longer explanation. If the surrounding text already communicates everything and the image is decorative, avoid making a screen-reader user hear the same explanation twice.
Check the small-screen reading order
Place the explanation and its diagram together in the document. On a narrow screen, allow cards to wrap or stack instead of shrinking their labels until they are hard to read. Test with larger text as well as a smaller viewport. Check that a caption still refers to the right figure, and that a reader can understand the example without needing to interpret its decorative artwork.
Questions and answers
Is changing the colour palette enough?
No. Labels and a meaningful reading order remain useful even with a carefully chosen palette.
Should an image repeat an entire article in its text alternative?
No. Describe its relevant information concisely, and use nearby text for a longer explanation when needed.
Does a readable diagram guarantee accessibility?
No. It is one part of the page. Navigation, controls, contrast and keyboard behaviour also need review.