ppclift
Home › Guides › Mobile and accessibility

Writing useful image alt text

Alt text describes an image to anyone or anything that can't see it: screen reader users, search engines, and visitors whose images failed to load.

What it is

The alt attribute holds a short text description of an image. A screen reader speaks it aloud in place of the picture.

It's also the main way a search engine understands image content, which is what makes image search work.

Why it matters

In Australia, accessible websites are a legal consideration under the Disability Discrimination Act, and WCAG treats missing alt text as a failure.

For businesses whose work is visual, such as landscapers, builders and hairdressers, image search is a genuine source of enquiries that missing alt text forfeits entirely.

Alt text for common local business images

A few image types come up on almost every small business site. A logo that links to the home page should have the business name as its alt text, because that is what the link does. Photos of completed work deserve a specific description of the job and, where it is natural, the place. Staff photos can simply name the person and their role.

Icons beside text that already says the same thing, such as a phone icon next to the phone number, are decorative and should have empty alt text. Before-and-after pairs need each image to say which it is. An image used as a button or link should describe where it goes or what it does, not what it looks like: 'Book a service' rather than 'blue arrow'.

When alt text isn't enough

Text inside an image is a problem that alt text can only partly solve. A banner announcing a sale, a price list saved as a picture or a menu uploaded as a photo can't be read by search engines, can't be enlarged cleanly on a phone, and can't be translated. Put that information on the page as real text, and keep images for things that genuinely need to be seen.

Charts and diagrams need their meaning available in text, either in a nearby paragraph or a caption, because a short alt attribute can't hold a table of figures. File names help in a small way too. A photo saved as 'bluestone-retaining-wall-sebastopol.jpg' tells search engines more than 'IMG_4821.jpg', and costs nothing to rename before uploading.

Fixing alt text across a whole site

Most content management systems store alt text in two places: in the media library, where it becomes the default for that image, and on each page where the image is inserted. Updating the media library doesn't always change images already placed on pages, so after a clean-up, check a few pages in the browser to see what was actually published.

A site crawler or an accessibility checker will list every image with a missing alt attribute. Work through them in order of importance: the home page and main service pages first, then project galleries, then older blog posts. Decide for each image whether it is informative or decorative, and remember that decorative images still need the attribute, just left empty.

Watch for images added as CSS backgrounds by page builders. They can't carry alt text at all, so if one of them shows something a visitor needs, such as a certification badge or a map of the service area, the same information has to appear somewhere as text. Hero banners with a headline over a background photo are fine as long as the headline itself is real text.

Once the backlog is cleared, make alt text part of the routine for every new upload. Whoever adds photos to the site, whether that is the owner, a staff member or an agency, should write the description at the moment of uploading, when they know what the picture shows and why it is there. Writing it months later, for a gallery of unlabelled photos, takes far longer and usually produces vaguer descriptions.

How to fix it

  1. Describe what the image shows and why it's on the page, in a short phrase.
  2. Include relevant detail naturally: 'Rebuilt bluestone retaining wall in Sebastopol' rather than 'wall'.
  3. Leave alt empty for purely decorative images so screen readers skip them. Empty alt is correct here; a missing attribute isn't.
  4. Do not begin with 'image of' or 'photo of'; the screen reader already says so.
  5. Write the alt text when the image is uploaded, while you still know exactly what it shows and why it is on the page.

What good looks like

<!-- Informative -->
<img src="wall.jpg" alt="Rebuilt bluestone retaining wall in Sebastopol">

<!-- Decorative: intentionally empty -->
<img src="divider.svg" alt="">

Common mistakes

  • Using the file name, so the description reads 'IMG_4821'.
  • Stuffing keywords into alt text, which helps nobody and is easily detected.
  • Omitting the attribute on decorative images instead of setting it to empty.
  • Writing the same alt text for every image in a gallery, which tells a screen reader user nothing about how the photos differ.

Check your own site. ppclift checks this automatically on every page it audits. Run a free audit and see every check on one page, with no account required.

Doing this for a client? This is one of 15 checks. ppclift is SEO lead generation software that audits every local business in a suburb at once, so you can find SEO clients who already need this work. Free plan, no card.