Alt text best practices
How to write alt text that works for screen reader users and meets WCAG, based on the W3C Web Accessibility Initiative's images tutorial. Start with the decision tree: it answers the most common question, "does this image even need alt?"
The alt decision tree
Answer a few questions about one image. This follows the W3C WAI alt Decision Tree.
Question 1
Does the image contain text?
How to write alt text: 8 rules
- Start from purpose. Why is this image on this page? Write for that, not for everything visible.
- Be specific. "Golden retriever catching a frisbee on a beach" beats "dog".
- Front-load the important part. Screen reader users often move on after the first few words.
- Keep it short, usually one sentence. If you need more, use a caption or long description. See alt text length.
- Skip "image of" / "picture of". The screen reader already says "image". Mention the medium only if it matters (painting, screenshot, diagram).
- Include text that is in the image, word for word, if it matters.
- Don't repeat nearby text. If the caption says it, alt can be shorter or empty.
- No keyword stuffing. Natural language helps SEO; lists of keywords hurt both users and rankings.
Image types at a glance
| Type | What the alt should say |
|---|---|
| Informative photo | The essential information, one sentence |
| Decorative | alt="" |
| Linked image / icon button | The destination or action |
| Image of text | The text itself |
| Logo | Organisation name (or "Name home" if linked) |
| Chart / diagram / map | Type + key takeaway; data in a long description |
| Group of images | Alt on one, empty alt on the rest, if together they convey one thing |
| CAPTCHA | Its purpose ("CAPTCHA: type the characters shown"), plus a non-visual alternative |
Sources: W3C WAI Images Tutorial; WCAG 2.2, 1.1.1 Non-text Content; HTML Living Standard, "Requirements for providing text to act as an alternative for images".
Pre-publish checklist
- Every
<img>has analtattribute (empty counts). - Linked images describe where the link goes.
- No file names, "image of", or keyword lists.
- Text in images is in the alt, or on the page.
- Charts have a long description or data table.
- Decorative CSS backgrounds stay in CSS.
- Inline SVG icons:
aria-hidden="true"if decorative;role="img"+aria-labelif not.
Run a page through the alt text checker to catch the mechanical failures.
Questions people ask
What is the WCAG requirement for alt text?
WCAG 2.2 success criterion 1.1.1 Non-text Content (Level A) requires every non-text element to have a text alternative that serves the equivalent purpose, with exceptions such as decorative images, which must be hidden from assistive technology.
Should alt text end with a period?
It is optional. Some screen readers pause slightly longer after a period, which can help when alt is followed by more text. Be consistent within a site.
Should I start alt text with "image of"?
No. Screen readers already announce the element as an image or graphic. Mention the medium only when it matters, such as "Oil painting of…" or "Screenshot of the settings page".
Do I need alt text for decorative images?
You need the attribute, but empty: alt="". That tells screen readers to skip the image. Leaving the attribute out entirely is a failure, because many screen readers then read the file name.
How do I write alt text for a logo?
Use the organisation's name. If the logo links to the home page, describe the destination, e.g. alt="Acme home". Add the word "logo" only when the fact that it is a logo matters, such as on a partners page.
Can I reuse the same alt text for the same image on different pages?
Only if the image does the same job on each page. Alt text depends on context, so the same product photo may need different alt on a product page and in a blog post.