The alt attribute.
What to write, when to leave it empty.

Every <img> needs an <alt> attribute. Not "should have" — needs. It's the text alternative for users who can't see the image: screen reader users, users on slow connections, users with images disabled, and search engines. This page covers what to write, when to use empty alt, and the mistakes that make alt worse than useless.

Short answer: Every image gets <alt>. For meaningful images, write a short description of what the image shows and why it matters. For decorative images, use alt="" (empty) so screen readers skip it. Never omit alt entirely — that causes screen readers to read the file name. Keep it under ~125 characters. Don't start with "Image of" — screen readers already announce that.

✅ The three cases

Meaningful, decorative, functional. Each gets different treatment.

Meaningful image

Conveys information the user needs. Write a short description of what it shows and why it matters.

Decorative image

Purely visual — adds no information. Use alt="" so screen readers skip it.

Functional image

A button or link with an image inside. The alt is the action — "Search", "Submit", "Home" — not a description.

Image of text

Contains text as pixels. The alt should be the text itself, or better — use real text with CSS.

✅ Before and after

The same image, written four ways.

bad-alt.html

<!-- No alt at all -->
<img src="team-photo.jpg">

<!-- File name as alt -->
<img src="team-photo.jpg" alt="team-photo.jpg">

<!-- "Image of" is redundant -->
<img src="team-photo.jpg" alt="Image of the team">

<!-- Keyword stuffing -->
<img src="team-photo.jpg" alt="team, staff, employees, people, office, company, business">

❌ No alt → screen reader reads "team-photo.jpg"
❌ File name → same problem, plus no information
❌ "Image of" → screen reader says "image, Image of the team"
❌ Keywords → garbage to listen to, no info conveyed

good-alt.html

<!-- Meaningful: describe what and why -->
<img src="team-photo.jpg"
alt="Six engineers at the 2026 product launch">

<!-- Decorative: empty alt, screen reader skips -->
<img src="divider.svg" alt="">

<!-- Functional: alt is the action -->
<button>
<img src="search.svg" alt="Search">
</button>

<!-- Image of text: alt is the text -->
<img src="sale-banner.png" alt="50% off all courses">

✅ Meaningful → "Six engineers at the 2026 product launch"
✅ Decorative → skipped entirely by screen reader
✅ Functional → button announced as "Search"
✅ Text image → "50% off all courses" announced

Empty alt is not the same as missing alt. alt="" tells the screen reader "this image is decorative, skip it." Missing alt ( with no alt attribute) tells the screen reader "I don't know what this is" — and the behavior varies: some read the file name, some say "unlabeled image," some skip it. Missing alt is a WCAG failure. Empty alt is correct for decorative images. Both are valid; only one is a mistake.

⚠️ Common mistakes

The alt mistakes that cost real time.

1. No alt attribute

The single most common accessibility error. Fix: add alt, even if empty.

2. alt="image" or alt="photo"

No information. Fix: describe what's shown.

3. alt starting with "Image of"

Screen reader already says "image". Fix: just describe the content.

4. File name as alt

alt="team-photo.jpg" — useless. Fix: a real description.

5. Keyword stuffing

Long comma-separated lists. Fix: one sentence describing the image.

6. Empty alt on meaningful images

Hides information from screen readers. Fix: real alt for meaningful images.

7. Duplicating adjacent text

Image alt repeats the caption. Fix: if the caption already says it, use empty alt.

8. Long descriptions in alt

Hundreds of characters. Fix: keep alt short (~125 chars); put long description in surrounding text.

❓ Frequently asked

What is the alt attribute in HTML?

The alt attribute on an img element provides a text alternative for the image. Screen readers announce it, search engines read it, and it displays when the image fails to load. Every img needs an alt attribute. For meaningful images, write a short description of what the image shows and why it matters. For decorative images, use alt='' (empty string) so screen readers skip it. Omitting alt entirely is different from empty alt — the former is an accessibility error.

When should I use empty alt?

Use alt='' for decorative images that add no information — background patterns, dividers, purely visual flourishes, icons that duplicate adjacent text. Empty alt tells screen readers to skip the image entirely. It is not the same as missing alt. Missing alt causes screen readers to read the file name (image123.jpg), which is worse than useless. If the image has a functional role (like a button icon), it needs a real label — either alt text or aria-label on the button.

Does alt text help SEO?

Indirectly. Search engines use alt text to understand what an image shows, which helps image search and can contribute to overall page relevance. But alt text is not a ranking factor on its own. The bigger benefit is accessibility — a well-described image serves blind users and gets shared more. The best alt text is specific and describes the image's role on the page, not just what's literally in it. Don't stuff keywords — write for a user who can't see the image.

How long should alt text be?

Short — around 125 characters or less. Screen readers read alt text aloud, so long descriptions are tedious. Describe the image in a sentence. If the image needs a longer explanation (like a complex chart), put the description nearby in the page text and use a short alt like 'Sales chart — see description below.' Do not start with 'Image of' or 'Picture of' — screen readers already announce that it is an image. Just describe what's shown.

What should I write for a logo's alt?

The company name — for example, alt='Acme Corp'. Not 'logo of Acme Corp', not 'Acme logo'. Screen readers already announce 'image', so 'logo of Acme Corp' becomes 'image, logo of Acme Corp' — redundant. If the logo is a link to the home page, the alt should be the company name, and that becomes the link's accessible name. If the same logo appears in a footer where it's just decorative, use alt='' instead.

What happens if I forget alt on an image?

The image still renders. But screen readers have nothing to announce — some read the file name (photo-2026.jpg), some say 'unlabeled image', some skip it entirely. Behavior varies across screen readers, which is worse than empty alt. Automated accessibility tools (Lighthouse, axe, WAVE) flag every img without alt as a failure. Search engines have less context. It is the most common accessibility issue on the web, and one of the easiest to fix.