Images and Accessibility: Alt Text, Contrast and Compression

Why image accessibility matters

Not everyone sees images the same way. People who are blind use screen readers that read out a text alternative instead of the picture. People with low vision may zoom in or use high contrast settings. People on slow connections may never receive the file, and some people turn off images to save data. An accessible page works for all of them, and most of the work is simple.

Accessibility is also a legal requirement in many countries for public bodies and, increasingly, for businesses, and it is closely related to good search optimization: the same descriptions that help a screen reader user help a search engine understand the picture.

Alt text that works

The alt attribute holds a short text alternative. The Web Content Accessibility Guidelines require that non-text content has a text alternative that serves the same purpose. Write what a person needs to know, in the context of the page: for a photo of a team at a workshop, something like a group of colleagues around a table with laptops, not a list of keywords and not the words image of.

Keep it short, usually one sentence. If the picture is a chart, give the key finding in the alt text and the data in a table or caption nearby. If a picture is a link or a button, the alt text should describe where it leads or what it does, not what it looks like.

Decorative images

Some images add nothing to the content, such as a decorative divider or a background texture. For these, use an empty alt attribute, alt with no text between the quotation marks, so that screen readers skip the image. Leaving the attribute out is different: a screen reader may then read the file name aloud, which is confusing.

If an image is purely decorative, you can also add it with CSS as a background. Choose carefully, though: when an image carries meaning, such as a product photo or an icon that tells you what a button does, it needs a text alternative.

Text in images

Avoid putting important text into pictures. Text in a picture cannot be resized by the reader, does not adapt to high contrast modes, is not translated by page translation tools and is often not reliably read by search engines unless you repeat it in the alt text. WCAG includes a rule that favors real text over images of text, with exceptions for logos.

When text in an image cannot be avoided, such as a screenshot, repeat the information in the surrounding text or in the alt text, and make sure the image is sharp enough to read when compressed. Heavy JPEG compression blurs letters, so choose a high quality or a lossless format.

Contrast and legibility

Compression can lower the contrast of fine details, and a picture that is dark or low in contrast becomes harder to read when it is compressed hard. For charts, diagrams and screenshots, use a high quality, and check that thin lines and small text remain visible. WCAG sets minimum contrast ratios for text, which also apply to text inside images when it carries information.

Do not rely on color alone to convey meaning. A chart where categories differ only by color is hard to read for people with color vision deficiencies, and it becomes worse when compression blurs the colors. Add labels, patterns or direct annotations.

Animations and motion

Moving content can distract and can cause discomfort for some people. WCAG asks that content that moves automatically for more than five seconds can be paused, stopped or hidden. Animated images and looping videos need controls or should be short. Operating systems offer a reduce motion setting, and the prefers-reduced-motion media query lets a page respect it.

Also avoid flashing content, which can trigger seizures in a few people. Rather than a long animated GIF, consider a static image with a link to a video that has controls.

Zoom and small screens

People with low vision often zoom the page to 200 percent or more. A picture that is too small in pixels becomes blurry when it is zoomed, while a larger one stays clear. For important images, supply enough pixels for zoomed display, using responsive images so that small screens do not download more than they need.

For images that explain something, make sure the key detail is large enough to see at normal size, so that readers do not need to zoom in at all.

A checklist

Give every meaningful image a useful alt text, and every decorative image an empty one. Avoid text in images. Keep contrast high and compression moderate for charts and screenshots. Provide enough pixels for zooming. Limit motion and give controls. And test with a screen reader or at least by turning off images, to see what is left.

With these steps, compression becomes an ally of accessibility instead of an enemy: lighter images load for everyone, including people on weak connections who depend on your page working.