Three Tips for Images That Pull Their Weight
An image earns its place when it teaches something, and it has to be reachable by everyone in the room. These three habits make sure it is.
Start with these:
- Write alt text that explains the image
- Use sharp images with good contrast
- Keep real text out of images
Write Alt Text That Explains the Image
Alt text is the only version of the image some people will ever get.
A screen reader user, or anyone on a slow connection where the image fails to load, has nothing else to go on. Leave it blank and they get nothing; write “chart” and they get nothing useful. The right alt depends on why the image is on the page, so write what it is there to teach, and mark purely decorative images empty so they are skipped. Complex images, like charts and diagrams, need a fuller description in the text nearby.
Some examples:
- For a bar chart that shows a trend, “bar chart” as alt text tells the reader nothing useful. Write what it shows, such as “Enrolment rose every year from 2019 to 2024.” Then give the underlying figures in the text or a data table for anyone who needs them.
- A photo used purely for decoration carries no teaching point. Give it empty alt text, written as alt=””, so a screen reader skips past it. Otherwise the reader is stopped by a description that adds nothing.
- A water cycle diagram used to teach the stages needs alt text that names those stages in order. The fuller detail belongs in the surrounding text, where every learner can read it. That way the teaching does not live only inside an image some people cannot see.
To go further on this, two references:
Use Sharp Images With Good Contrast
A blurry or washed-out image fails the same people that low-contrast text fails.
It gets worse the moment someone zooms in to read it, which is exactly what a low-vision learner does. Pale grey and pale yellow are the usual culprits, especially on white. Start from a sharp, good-resolution source rather than blowing up something small, and check the contrast of the parts that actually carry meaning.
Here is what that looks like in practice:
- A diagram drawn in pale grey lines on a white background is hard to make out, and worse on a dim screen. The detail that carries the meaning is the part that fades. Redraw it with darker lines so the important elements hold up.
- A pixelated screenshot of a slide blurs further the moment a learner zooms in to read it. Low-vision learners zoom often, so the problem hits exactly the people who can least afford it. Use the original, sharp image instead.
- A photo with the key label set in faint white text over a bright sky hides that label from many readers. The most important words are the hardest to see. Move the label into real text beneath the image, or darken it until it can be read.
Two resources worth a read:
Don't Put Text Inside an Image
Text baked into an image cannot be read aloud, searched, selected, translated or resized.
It also turns to mush the moment a low-vision learner zooms in. Real text does all of those things and stays crisp at any size, so the default should be real text plus styling. Maths is the common trap here, so use MathJax or LaTeX for equations rather than a picture of the formula.
How it plays out:
- A “key dates” graphic with the dates drawn into the image cannot be read aloud, searched or resized. A screen reader user gets none of the dates. Put the dates in real text and style the box around them instead.
- A screenshot of an equation turns to mush when a learner enlarges it. It also cannot be read by assistive tech or copied into notes. Set the equation in MathJax or LaTeX so it scales cleanly and reads back as proper maths.
- A quote turned into a shareable image with no caption shuts out anyone using a screen reader. The words exist only as pixels. Put the same text on the page as real text, where it can be read, searched and translated.
Two places to dig deeper:
