Alt Text Examples
Alt text is the short HTML text used to describe an image’s content or function for screen readers and assistive technologies.
- Also called
- alt attribute, alt tag
- Applies to
- images, image buttons, linked images
- Commonly confused with
- title attribute, caption, image description
Key points
- Keep alt text concise, typically 125–150 characters, describing the image’s purpose or meaning.
- Do not start alt text with “image of” or “picture of” because screen readers already announce it as an image.
- Use empty alt text (alt="") for decorative images so screen readers skip them.
- For linked images, describe the destination or action, not the visual appearance.
- Avoid keyword stuffing; use keywords only when naturally relevant to the image.
Why it matters
Alt text directly affects accessibility: without it, screen reader users cannot understand what an image conveys. For SEO, accurate alt text helps search engines interpret image context, which can improve rankings for image search and support overall onpage seo. It also acts as a fallback when images fail to load, preserving the page’s meaning. Poor alt text—or none at all—breaks the experience for assistive technology users and misses an opportunity to reinforce content for search engines.
Where it changes your decision
- When choosing whether to use a decorative image: use empty alt text (alt="") so screen readers ignore it, rather than forcing a redundant description.
- When writing alt text for a linked image or image button: describe the destination or action (e.g., “View product details”) instead of the visual appearance, because the user needs to know where the link goes.
- When handling a chart or complex graphic: summarise the key point in alt text and provide the full explanation in nearby text or a separate long description, rather than trying to describe every data point.
What it is not
- Alt text is not just for SEO: its primary purpose is accessibility for screen reader users; SEO benefit is secondary.
- Alt text is not a caption: captions are visible to all users and often add context, while alt text is hidden and must convey the image’s function or content.
- Alt text is not a place to stuff keywords: search engines can penalise keyword-stuffed alt text, and it harms the user experience for assistive technology.
- Alt text is not optional for meaningful images: leaving a meaningful image without alt text (or with alt="") makes that content invisible to screen readers.
Common mistakes
- Writing generic alt text like “photo” or “image”: fails to convey any useful information and wastes an opportunity for accessibility and image seo.
- Stuffing alt text with keywords: harms accessibility by confusing screen reader users and may trigger search engine penalties for unnatural optimisation.
- Repeating nearby on-page copy verbatim: adds no new context and makes the alt text redundant; instead, describe what the image adds that the text does not.
- Leaving meaningful images without alt text: makes the content inaccessible to screen reader users and can hurt the page’s overall content optimisation.
- Marking decorative images incorrectly (e.g., using alt="image" instead of alt=""): forces screen readers to announce irrelevant content, cluttering the user’s experience.
Questions people ask
What is alt text for images?
Alt text for images is the HTML attribute (alt) that provides a text description of the image’s content or function. It is read aloud by screen readers for users who cannot see the image, and it helps search engines understand what the image shows. Good alt text is concise, accurate, and relevant to the surrounding page content.
How to write alt text?
Write alt text by describing the image’s purpose or meaning in context, not every visual detail. Keep it short, usually 125–150 characters. Do not start with “image of” or “picture of”. For decorative images, use empty alt text (alt=""). For linked images, describe the destination or action. Use natural language and avoid keyword stuffing.
Why is alt text important?
Alt text is important because it makes images accessible to people who use screen readers, ensuring they can understand the content. It also helps search engines index images correctly, which can improve visibility in image search. Additionally, alt text appears when an image fails to load, preserving the page’s meaning for all users.
What is alt text for accessibility?
Alt text for accessibility is the text alternative that screen readers convey to users who are blind or have low vision. It must describe the image’s function or content so that the user can understand the page without seeing the image. Following accessibility guidelines—such as using empty alt for decorative images and writing clear descriptions—ensures that the page is usable by everyone.
Sources
- Google Search Central Google’s guidance on image SEO and helping search systems understand image content.
- Google Technical Writing: Write helpful alt text Clear, practical guidance on concise, contextual alt text.
- WebAIM: Alternative Text Widely cited accessibility guidance on accurate, succinct alt text.
- W3C WCAG Technique H37 Standards-based examples for meaningful alternative text.
- Section 508: Authoring Meaningful Alternative Text Government accessibility guidance on concise, context-aware alt text.