The alt tag (strictly speaking the HTML alt attribute) provides a textual description of an image. It fulfils three central tasks at once: first, it describes the image for screen readers, making the website accessible to blind and visually impaired people. Second, it’s displayed when the image cannot be loaded, whether due to a slow connection or a broken path. Third, it helps search engines understand the image content, improving image search rankings and the understanding of the whole page. From an SEO and accessibility perspective, the alt text is thus one of the most underestimated mandatory fields of modern web development.
What an alt tag looks like in HTML
<img src="aceart-team.webp" alt="The aceArt team in front of the office entrance on Sieglestraße in Stuttgart">
Important: formally, the attribute isn’t called an “alt tag” but the alt attribute inside an <img> element. The term “alt tag” has established itself, though, and is generally understood.
What is the alt text for?
Accessibility
Screen readers (e.g. NVDA, JAWS, VoiceOver) read the alt text aloud when the cursor passes over the image. Without alt text, the image stays “empty” for blind users – a violation of Germany’s accessible IT regulation (BITV 2.0) and the WCAG guidelines.
Fallback on loading errors
If the image fails (404, wrong path, slow connection), the browser shows the alt text instead of an empty image frame. That helps users infer the context.
Search engine understanding
Google has become enormously better at understanding image content, but the search engine can’t rely on that entirely. The alt text remains the most important text signal for an image and is the lever for building visibility in Google image search.
Link text for image links
When an image is simultaneously a hyperlink (<a><img></a>), the alt text becomes the link anchor – relevant for screen readers and for SEO.
What makes a good alt text?
Concrete and descriptive
| Bad | Better |
|---|---|
alt="image" | alt="Web developer working on a laptop in the aceArt office" |
alt="logo" | alt="Logo of aceArt GmbH" |
alt="DSCN0042.jpg" | alt="Open-plan office with standing desks and plants" |
Brief and to the point
125 characters is a sensible upper limit – some screen readers cut off after that. If you need a longer text, additionally use aria-describedby or a <figcaption>.
Don’t start with “image of” or “photo of”
Screen readers announce that automatically. “Image of a dog” becomes “Image, image of a dog” – doubled up.
Consider context
The same photo can deserve different alt texts depending on what it’s used for:
- On the team page:
alt="Florian Krüger, managing director at aceArt" - In the legal notice:
alt="Managing director Florian Krüger" - In an article about web development:
alt="Florian Krüger during a code review"
Decorative images with empty alt text
Images that are purely decorative (backgrounds, dividers, ornamental icons) should get an empty alt text – alt="". That explicitly signals: this image carries no information; screen readers should skip it. Important: leaving out the attribute entirely is not the same – some screen readers then read out the file name (e.g. “IMG_2342.jpg”), which is even worse.
Special cases
Logo
alt="Logo of company X" suffices. In the header/footer, even alt="aceArt GmbH" is often enough, since the logo is part of the wordmark.
Icons with an explanatory function
A magnifying glass next to a search input: alt="Search". A telephone receiver icon: alt="Phone number". These icons carry meaning and need alt text.
SVG icons from sprites or inline
<svg> icons have no alt attribute. Instead, set role="img" + <title> or aria-label:
<svg role="img" aria-label="Search"><use href="#search"></use></svg>
Images in <figure> with a caption
When a <figcaption> already describes the image context, the alt text can be shorter, but it should differ from the caption in content, not repeat it.
SEO impact
A good alt text:
- gets the image into Google image search: a relevant traffic channel above all in e-commerce and for visual brands
- gives search engines additional context for the page content
- is a mandatory prerequisite for good Core Web Vitals and Lighthouse accessibility scores
- acts as the anchor when the image is simultaneously linked
What is no longer an SEO effect: keyword stuffing in the alt text. “Stuttgart web agency web development app software” as the alt text of a team photo now does more harm than good.
Tools for checking
- WAVE: accessibility scanner, lists all images without alt text
- Lighthouse: in the accessibility audit
- axe DevTools: browser extension, very thorough
- Screen readers themselves: VoiceOver (macOS/iOS), NVDA (Windows), TalkBack (Android); the honest litmus test
Frequently asked questions about the alt tag
Do really all images need an alt text?
Yes – every <img> element should carry an alt attribute. Decorative images get alt="" (empty, but present). Only then do screen readers and validators treat the image as “properly marked” and deliberately skip it.
What’s the difference between alt and title?
alt describes the image content (for accessibility and fallback). title is a tooltip that appears on hover. Both have different jobs; title does not replace alt.
How long may the alt text be?
Practical upper limit: ~125 characters. Longer descriptions can be moved to a <figcaption> or via aria-describedby.
Do CSS background images need an alt text?
No – CSS backgrounds are by definition decorative and invisible to screen readers. But if the image matters for the content (e.g. a hero visual with a message), it should be embedded as an <img> with an alt text.
Conclusion
The alt tag isn’t a nice-to-have but a mandatory part of every professional website – for reasons of accessibility, legal compliance and search engine visibility. An honest rule of thumb: if you read the alt text aloud, a listener should know what’s in the image and why it’s there. We’re happy to support you with accessible design or an audit of an existing site – as part of our SEO services or in a free first conversation.