Alt text is the short written description a screen reader announces in place of an image, and what users see when an image fails to load. Writing it well is one of the highest-leverage accessibility skills a content editor can have: it takes seconds per image, it directly shapes how blind and low-vision visitors experience your pages, and it is a hard requirement under WCAG 2.2 success criterion 1.1.1. Yet most alt text in the wild is missing, auto-generated nonsense, or a keyword-stuffed afterthought.
This guide skips the theory and shows you exactly what to type into that alt field for the images you actually publish: product photos, hero images, charts, logos, icons, and purely decorative graphics. Every rule below comes with a concrete good and bad example you can copy the pattern from today.
First question: is the image informative or decorative?
Before you write a single word, classify the image. An informative image carries meaning a sighted person gets from looking at it. A decorative image adds visual polish but no information: background textures, dividers, mood-setting stock photos that just echo the adjacent heading. Get this wrong and you either hide content from screen reader users or flood them with noise.
Decorative images should have an empty alt attribute (alt="", with nothing inside), which tells assistive technology to skip them. Do not delete the attribute and do not write alt="decorative image" or alt="spacer" — both force the screen reader to announce something pointless. In most CMS editors, leaving the alt field blank produces alt="" automatically, which is what you want for decoration.
- Informative (write a description): a chart, a product photo, a screenshot showing a step, a photo of a named person, a logo that is also a link.
- Decorative (use empty alt): a swoosh behind a heading, a gradient banner, an icon sitting next to a text label that already says the same thing.
Alt text for photos and informative images
Describe the content and function, not the file. Aim for roughly a sentence — most screen readers and the accessibility community treat anything past about 125 characters as long enough to belong in a caption or body text instead. Skip phrases like "image of" or "photo of": the screen reader already announces that it is a graphic.
Context decides the wording. The same photo needs different alt text depending on why it is on the page. A running shoe on a product page should name the product; the identical photo in a blog post about marathon training might describe the action.
- Bad:
alt="IMG_4821.jpg"— the filename tells a blind user nothing. - Bad:
alt="shoe running fast best running shoes buy cheap trainers"— keyword stuffing, which hurts users and is treated as spam. - Good (product page):
alt="Nimbus 12 road running shoe in teal, side view" - Good (blog context):
alt="Runner lacing a teal trainer at the start line of a city marathon"
Charts, graphs, and data visualizations
This is where most teams fail. A chart's alt text must convey the insight, not just label the object. "Bar chart of revenue" describes the container and hides the actual data. State the trend or the key numbers, because that is what a sighted reader takes away in one glance.
- Bad:
alt="sales chart"— announces a shape, delivers zero data. - Good:
alt="Bar chart: quarterly revenue rose from €1.2M in Q1 to €2.1M in Q4, with the steepest jump in Q3."
When the data set is too rich for a sentence, keep the alt text to the headline takeaway and put the full figures in an adjacent data table, an expandable summary, or the body copy. A screen reader user can then navigate the exact numbers in a format a flat image can never provide. This also helps SEO, since the underlying data becomes real indexable text.
Logos, icons, and images that are links
For a logo, describe the brand, not the artwork. The alt text for your masthead is simply the company name — alt="AccessScan" — not alt="AccessScan logo with blue checkmark icon". Adding "logo" is usually redundant noise.
The decisive rule for any image inside a link or button: the alt text must describe where the link goes or what the button does, because it becomes the link's accessible name. A header logo that links home should read alt="AccessScan home". A magnifying-glass icon that submits a search should read alt="Search", never alt="magnifying glass". If an icon sits beside visible text that already names the action, the icon is decorative — give it alt="" so the action is not announced twice.
- Bad (icon link):
alt="envelope icon"for a contact button — describes the picture, not the destination. - Good:
alt="Contact us" - Bad (logo link):
alt="company logo PNG transparent" - Good:
alt="AccessScan home"
Why this matters for compliance, not just courtesy
Missing and meaningless alt text is consistently one of the most common failures found in automated and manual audits, and it maps directly to the first principle of accessibility — Perceivable. Under the European Accessibility Act, which applies from 28 June 2025, the baseline is WCAG 2.2 Level A and AA as referenced through EN 301 549. Text alternatives for non-text content (1.1.1) is a Level A requirement — the most basic tier — so there is no version of compliance that skips it.
Microenterprises providing services (fewer than 10 staff and under €2,000,000 annual turnover) are largely exempt for services, but for everyone else enforcement is real: fines vary by member state and can reach tens of thousands of euros. The practical fix is cheap. Run a free accessibility scan to flag images missing alt text across a page in seconds, then work through them using the patterns above. For a broader sweep, the accessibility checklist covers images alongside forms, contrast, and keyboard access.