Missing or poor alt text is one of the most common accessibility problems on the web, and one of the easiest to fix once you know how. This guide walks you through writing alt text step by step, with real examples for photos, logos, buttons, charts and more.
What alt text is and what it does
Alt text (short for “alternative text”) is a short written description attached to an image. Sighted visitors don’t see it, but a screen reader reads it aloud in place of the image. It also shows if the image fails to load, and search engines use it to understand what an image shows.
Alt text is required by WCAG success criterion 1.1.1 Non-text Content. It is a Level A requirement, which means it is one of the most basic checks in any accessibility audit.
How to write alt text, step by step
- Decide if the image is informative or decorative. If the image adds information the reader would miss without it, it needs alt text. If it is only there for looks, or the same information is already in the text next to it, it should have empty alt text (see below).
- Ask why the image is on the page. The same photo can need different alt text on different pages. Think about what the image is meant to tell this reader, here.
- Describe what matters, not everything you can see. Pick the details that carry the meaning. Leave out details that don’t help the reader understand the point.
- Keep it short. Most alt text is one sentence. There is no official character limit, but if you need more than a sentence or two, put the detail in the page text or a caption instead.
- Include any text in the image. If the image contains words that matter, such as a sign, a slogan or a date, include those words.
- Leave out “image of” and “picture of”. Screen readers already announce that it is an image. Do mention the type if it matters, such as “Screenshot”, “Map” or “Illustration”.
- Read it in context. Read the sentence before the image, then your alt text, then the sentence after. If it repeats the text around it, or the meaning doesn’t flow, rewrite it.
Alt text examples
These examples show weak alt text next to better alt text, and why the better version works.
Photos of people
A photo on a disability support provider’s home page:
- Weak: “Woman smiling”
- Better: “A support worker helps a young man fill in a form at his kitchen table.”
The better version tells the reader what the service looks like, which is why the photo is there. Only describe things like age, gender or disability when they are relevant to the point.
The same image in different contexts
A photo of the Sydney Harbour Bridge at night could need three different descriptions:
- On a travel page: “Sydney Harbour Bridge lit up at night, seen from Circular Quay.”
- On a New Year’s Eve event page: “Fireworks exploding over Sydney Harbour Bridge at midnight.”
- On an engineering page: “The steel arch of Sydney Harbour Bridge, showing the main truss and the four granite pylons.”
Product photos
- Weak: “Shoe”
- Better: “Black leather work boot with a steel cap and elastic sides, shown from the side.”
Shoppers who can’t see the photo need the details that help them decide, such as colour, material and key features.
Logos
- Weak: “Logo”
- Better: “Accessibility Online”
For a logo, the alt text is usually just the organisation’s name. If the logo links to your home page, use “Accessibility Online home”.
Buttons and icons
Describe what the button does, not what the icon looks like.
- Magnifying glass that opens search: “Search”, not “magnifying glass icon”
- Three lines that open the menu: “Menu”, not “hamburger icon”
- A cross that closes a pop-up: “Close”, not “X”
- A printer icon: “Print this page”
Images that are links
- Weak: “Blue arrow”
- Better: “Read our guide to the Disability Discrimination Act”
When an image is the only thing inside a link, its alt text becomes the link text. Say where the link goes.
Social media icons follow the same rule: “Facebook” or “Follow us on LinkedIn”, not “blue square with white f”.
Charts and graphs
- Weak: “Bar chart”
- Better: “Bar chart showing complaints rose from 120 in 2021 to 310 in 2025. Full figures are in the table below.”
Give the main message of the chart in the alt text, then provide the full data as a table or text on the page. A screen reader user can’t take in 20 data points from one sentence.
Images of text, flyers and infographics
- Weak: “Event flyer”
- Better: “Community open day, Saturday 14 March, 10 am to 2 pm, at the community hall. Free entry.”
Include the words that matter. For a long flyer or infographic, put the full information on the page as real text instead, and keep the alt text short.
Maps
- Weak: “Map”
- Better: “Map of the venue. Parking is on Smith Street and the accessible entrance is on the north side.”
Describe what the reader needs from the map, such as where to go, rather than every street on it. Put directions in the page text as well.
Screenshots
- Weak: “Screenshot”
- Better: “Screenshot of the WordPress image settings, with the Alternative text field highlighted.”
Describe the part of the screenshot that matters for the instructions around it.
When to leave alt text empty on purpose
Some images should have empty alt text, written in the code as alt="". This tells a screen reader to skip the image completely. Use it when an image:
- is purely decorative, such as a background pattern, divider line or swirl
- repeats information that is already in the text next to it, such as a phone icon next to the word “Phone”
- is a stock photo that adds mood but no information
Empty alt text is not the same as no alt text. If the alt attribute is missing completely, many screen readers read out the file name instead, such as “IMG underscore 2034 dot jpg”. That is exactly the clutter you are trying to avoid.
How to add alt text in common tools
- WordPress: select the image in the editor and fill in “Alternative text” in the block settings. You can also add it in the Media Library, but check it still makes sense wherever the image is used.
- Word and PowerPoint: right-click the image and choose “View Alt Text”. Type your description, or tick “Mark as decorative” for decorative images.
- PDFs: alt text is best added in the original Word or design file before you export. To fix an existing PDF, use the accessibility tools in Adobe Acrobat Pro, or ask us to remediate your PDFs.
- HTML: add the alt attribute to the image tag, for example
<img src="team.jpg" alt="Our support team at the office">.
What free scanners miss with alt text
Free tools such as WAVE, axe and Lighthouse can tell you when an image has no alt attribute at all. That is useful, but it is only half the job. A scanner cannot tell you whether the alt text is any good. All of these pass an automated check:
- alt text that is just the file name, such as “DSC_0045”
- alt text that says “image”, “photo” or “logo” and nothing else
- alt text that describes the wrong thing, or a photo that was swapped
- a chart with alt text but no data anywhere on the page
- decorative images with long descriptions that slow screen reader users down
- alt text stuffed with keywords for search engines
Judging whether alt text is accurate and useful takes a person. Read more about what free accessibility tools can and can’t catch.
Common mistakes
- starting with “image of” or “picture of”
- describing the colour or shape of a button instead of what it does
- writing the same alt text for every image on a page
- copying the caption into the alt text, so it is read twice
- leaving the alt attribute out completely instead of leaving it empty
- putting important information only inside an image
Quick checklist before you publish
- Does every informative image have alt text that explains why it is there?
- Do decorative images have empty alt text?
- Do linked images and icon buttons say where they go or what they do?
- Is any important text in the image also in the alt text or on the page?
- Do charts have their data available as text?
- If you covered the image with your hand, would the alt text still give you what you need?
Alt text in PDFs and Word documents
Images in PDFs and Word files need alt text too, and they are often missed. Our PDF remediation service adds alt text along with tags, headings and reading order.
Got hundreds of images to check?
An accessibility audit checks your images along with everything else on your website, and our document remediation service fixes alt text across your PDFs and Word documents. Contact us for a fixed quote.