Alt text
Writing Alt Text: How to Make Images Accessible
Good alt text tells visitors who cannot see your images what they show, and helps search engines understand your images. You will read when an image needs alt text, how to write it and what to do with product photos, buttons and charts.
What is alt text?
Alt text, or alternative text, is a short description you add to an image. Visitors do not see it, but screen readers read it aloud, and the browser shows it when the image does not load.
WCAG success criterion 1.1.1 requires every informative image to have a text alternative that conveys the same information or function. Search engines also use alt text to understand what an image shows, so your images are found more easily.
How to recognise good alt text
- It describes what the image means in this place, not every detail of the picture.
- It is short: usually one sentence or less.
- It does not start with 'image of' or 'photo of', because a screen reader already announces that it is an image.
- It does not literally repeat the text that is already next to the image.
- It contains no file name and no list of keywords.
Alt text for each kind of image
Which alt text fits depends on the role of the image on the page.
| Kind of image | What you do | Example of the alt text |
|---|---|---|
| Informative photo | Describe what is relevant to the surrounding text. | Engineer replacing a boiler in a kitchen |
| Product photo | Name the product and the details that matter for the choice, such as colour, model and material. | Dark green wool jumper with round neck, back view |
| Link or button with only an image | Describe the function or destination, not the picture. | Search (for a magnifying glass icon) |
| Logo | Use the name of the organisation. If the logo links to the home page, say so too. | AccessRadar, to the home page |
| Image with text | Copy the text from the image. | 20% off all winter coats |
| Chart or diagram | Give the key point in the alt text and put the details in the text or in a table on the page. | Number of orders per month, details in the table below |
| Decorative image | Leave the alt text empty, so assistive software skips the image. | None: the alt text stays empty |
Decorative or informative?
An image is decorative if the page loses nothing when you leave it out, such as a mood photo next to text that already says everything, a divider or an icon next to a text label. Give it empty alt text, so assistive software skips it. Empty alt text is not the same as no alt text: if it is missing entirely, some screen readers read out the file name.
In doubt? Imagine reading the page aloud to someone. If you would mention the image, it is informative.
Writing alt text in four steps
Determine the function
Ask yourself why the image is on the page: to show something, to link somewhere or for atmosphere.
Look at the context
Read the text around the image. What is already there, you do not need to repeat.
Write down the essence
Describe in a short sentence what the visitor needs to know. For a product photo, those are the details that help with the choice.
Tip: Fill in the alt text right when you upload. WordPress and most other systems have a separate field for it.
Read it aloud
Does the sentence sound logical in the middle of the surrounding text? Then you have good alt text.
Improving alt text across your whole website
On a website with hundreds of images, it is hard to keep track of which alt texts are missing or say nothing. AccessRadar's AI content analysis reads your alt text together with the surrounding text and flags texts such as 'image', a file name or 'click here', with a concrete suggestion for better text.
That way you improve part of your images every week, and see in your dashboard how your website is progressing.
Automatic tests and AI content analysis
AccessRadar combines automatic tests with AI content analysis. You see not only technical errors, but also which texts truly help your visitors.
The AI analysis reads the text of your pages and gives suggestions, for example for:
- Alternative text: does the text say something meaningful, or is it 'image', a file name or 'click here'?
- Link text: do the link text and the text around it make clear where a link leads?
- Headings and labels: do they describe the topic or the field, or are they empty words such as 'Info' or 'Field 1'?
- Page titles and forms: is it clear what a page is about and what a field expects?
You get concrete suggestions for better texts, which you pick up directly in your weekly improvement plan. This way your website moves closer to WCAG 2.2 AA suitability every week and reaches more customers.
Read how tests and AI analysis work together in the improvement plan
Read also
Practical explanations of WCAG and digital accessibility.
WCAG Colour Contrast: Requirements, Exceptions and a Contrast Checker
What colour contrast does WCAG 2.2 require? Read the requirements for text, buttons and icons, and test your colours right away with the free contrast checker.
WCAG 2.2 AA Checklist: What Should You Check on Your Website?
A practical WCAG 2.2 AA checklist per category, with explanations and tips to improve right away. Useful for owners, editors and developers.
Keyboard Accessibility: Make Your Website Work Without a Mouse
Does your website work without a mouse? Read which WCAG requirements apply to keyboard operation and focus, how to test yourself and how to fix common problems.
Check your website for WCAG for free
Request the free WCAG check from AccessRadar and receive the results of an automatic scan by email, as a starting point for your improvements.
Want to keep going every week afterwards? The WCAG improvement plan adds weekly scans and AI content analysis.
A WCAG scan supports your assessment. An automated WCAG scan cannot establish full WCAG 2.2 AA compliance. Combine regular WCAG scans with manual evaluation and feedback from people with disabilities.
Frequently Asked Questions About Alt Text
How long can alt text be?
There is no fixed limit, but keep it short: usually one sentence or less. If an image needs more explanation, such as a chart, put the details in the text on the page.
Does every image need alt text?
Every informative image needs a description. Decorative images get empty alt text, so assistive software skips them.
Does alt text help SEO?
Yes. Search engines use alt text to understand images, so they are found more easily. Write alt text for people: a natural description works better than a list of keywords.
What is the difference between alt text and an image title?
Alt text replaces the image for people who cannot see it. A title appears as a tooltip when you move the mouse over the image and is not reliably read aloud. So always use alt text.
In which language do I write alt text?
In the language of the page, so a screen reader reads it aloud with the right pronunciation.