Picture someone reaching your homepage who can't see your hero photo. Maybe they're using a screen reader because they're blind, or they've turned up the zoom and contrast because their vision is low. Your page still has to work for them. Image accessibility is the set of small, practical habits that make that happen, and most of it comes down to a few clear decisions you can make as you build.
This guide keeps things grounded. No legal jargon, no fear. Just what "accessible images" actually asks of you, scenario by scenario, so you can build a page that more people can genuinely use.
What image accessibility actually means
Accessibility means people with different abilities can perceive and use your site. For images specifically, the people most affected are:
- Screen reader users, who hear the page read aloud instead of seeing it. An image they can't see needs a text description, or it's a blank gap in the story your page is telling.
- People with low vision, who may zoom in, increase contrast, or rely on text that has to stay legible over a busy background.
- People in bad conditions, like bright sunlight on a phone or a slow connection, who benefit from the same clarity everyone else needs.
That last group is the quiet reason this matters: the habits that help a screen reader user almost always make the page better for everyone. Readable text, clear descriptions, and images that don't fight the content are simply good building.
A note on scope before we go further. This post explains principles. It does not certify any image or page as "accessible" or "WCAG compliant," because conformance depends on how your whole site is built and tested, not on a single image. The Web Content Accessibility Guidelines (WCAG) are the authoritative reference for the details, and a proper review is best done by someone who does accessibility work professionally. Treat what follows as a starting foundation, then defer the specifics to those sources. For more on how we think about this, see Picdrome's editorial policy.
Alt text: describing images so they can be heard
Alt text (short for "alternative text") is a written description attached to an image. A screen reader speaks it aloud, and it also appears if the image fails to load. It's the single most important thing you can do for image accessibility.
Good alt text answers a simple question: if someone can't see this image, what do they need to know? The answer depends on the image's job on the page.
- A product photo on a shop page: describe the product as a shopper would need it. "Olive green canvas backpack with two front pockets," not "IMG_4021."
- A photo illustrating a blog section: describe what's shown and why it's there, briefly.
- A diagram or chart: convey the information it carries, not just "a chart."
Keep it concise, write it for a listener, and don't stuff it with keywords. Alt text exists for people first. It can help search engines understand your image too, but treating it purely as an SEO slot produces descriptions that are useless to the humans who actually rely on it.
A note for AI-generated images
Picdrome images are AI-generated, which changes one thing about how you describe them. An image may show a person who looks like a smiling customer or a confident team member, but that person isn't real. Your alt text and captions should never imply otherwise.
So describe the scene plainly:
- Fine: "A person working at a laptop in a bright office."
- Avoid: "Sarah, one of our happy customers, using our app."
The first describes what's in the picture. The second invents a real individual who doesn't exist. Honest description keeps you on the right side of both accessibility and basic truthfulness. If you want help drafting descriptions quickly, how to write alt text for website images gives you worked examples you can adapt.
For the full how-to, including length, punctuation, and tricky cases, see our guide on how to write alt text for website images.
Decorative versus informative images
Not every image needs a description. Some images carry meaning; others are pure decoration. Telling them apart is one of the most useful skills here, because describing decorative images out loud just clutters the experience for a screen reader user.
Ask: does this image add information the surrounding text doesn't already give?
| Image | Type | What to do |
|---|---|---|
| Product photo on a listing | Informative | Describe the product |
| Diagram explaining a process | Informative | Convey the information it shows |
| Headshot-style photo next to a quote | Informative | Identify who or what it shows (honestly) |
| Subtle texture behind a section | Decorative | Mark it as decorative (empty alt) |
| Abstract swoosh or background shape | Decorative | Mark it as decorative |
| Icon that repeats a visible text label | Decorative | Mark it as decorative |
For decorative images, the goal is for the screen reader to skip them. W3C's decorative-images guidance uses an empty alt attribute (alt=""); verify that your builder emits that markup rather than omitting the attribute or inserting a filename.
The trap is the in-between case. A background image that sits behind your headline is decorative, but if that same image contains words, those words are information and need to be available as real text, not baked into a picture.
Text over images, in plain language
Hero sections, banners, and CTA blocks often put text on top of a photo. For someone with low vision (or anyone squinting at a phone in daylight), that text has to stand clearly apart from the background.
The principle is contrast: the difference in brightness between your text and what's directly behind it. White text on a pale sky disappears. The same white text over a darkened photo reads cleanly.
A few reliable moves:
- Add a semi-transparent dark or light overlay between the photo and the text.
- Choose or generate images with a calm, low-detail area where the text will sit.
- Avoid placing text over the busiest part of an image, where small differences in color make every letter harder to pick out.
WCAG 2.2's Contrast (Minimum) criterion gives testable ratios for ordinary and large text. Measure the final rendered text against the actual area behind it rather than eyeballing the image.
Why this is just good building
It's tempting to file accessibility under "compliance," something you do because you're told to. That framing misses the point and tends to produce minimum-effort work.
The honest version is simpler. The same choices that help a screen reader user or someone with low vision also help:
- The shopper deciding between two products from a photo on a slow connection.
- The visitor reading your headline outdoors in glare.
- The person who scans before they read and needs the page to make sense fast.
Describing your images and keeping text legible makes the page clearer for everyone who lands on it. That's reason enough, separate from any standard. A good accessible image still has to do the ordinary jobs we cover in the beginner's guide to using images on your website: fit its section, load fast, and match your brand.
A starting checklist for your next page
Run through this on the page you're working on now:
- Walk the page top to bottom. For each image, ask: informative or decorative?
- Write alt text for the informative ones. Describe what matters, for a listener, in plain language.
- Mark the decorative ones to be skipped (empty alt), so they don't clutter the experience.
- Check any image with text baked into it. If it carries words people need, that text should exist as real text too.
- Look at every text-over-image block. Is the text clearly readable against what's behind it? Add an overlay or move the text if not.
- For AI-generated images of people, confirm no caption or alt text implies they're a real customer or team member.
That's a foundation, not a certification. When accessibility genuinely matters for your project, the next step is a review against WCAG by someone who does this professionally.
In Plain English
Image accessibility means making your site's images usable by people who can't see them well or at all, mainly screen reader users and people with low vision. You help them with three habits: write honest alt text for images that carry meaning, mark purely decorative images so they're skipped, and keep text readable over busy backgrounds. It helps far more people than you'd expect, because the same choices make the page clearer for everyone. Start now by walking your current page, deciding which images are informative, and describing those. This guide is general information, not professional accessibility advice, and it doesn't certify any page as compliant; for the binding details, lean on WCAG and an expert review.
The quickest way to begin: read how to write alt text for website images and draft descriptions for the images on one page, then check your hero and banner overlays using the readable-text-over-images guidance.
Where to go next
- How to write alt text for website images — the full method, with examples.
- Picking backgrounds that keep your text readable — overlays and contrast in practice.
- The complete beginner's guide to using images on your website — the broader foundation this fits into.