Alt Text Guide
Good alt text is not filler. It helps screen reader users understand what an image contributes, helps teams publish more accessible pages, and can also help search engines understand image context. This guide shows how to write alt text that is useful, concise, and realistic for real websites.
What this guide solves
Client-readyWhat alt text is supposed to do
Alt text is a text alternative for an image. Its main job is to communicate the image’s purpose or meaning when the image itself cannot be seen or should not be relied on.
That means good alt text is not simply a literal visual inventory. It should describe what matters in context. The same image can need different alt text depending on where it appears and why it is on the page.
On a page about industrial sensors, a product photo may need alt text that identifies the product and visible distinguishing detail. On a lifestyle hero banner, the same level of detail may be unnecessary. Context always comes first.
Describes everything or says nothing
Examples include “image,” “photo,” “banner,” “product image,” or a long dump of disconnected visual details that do not help the user understand the page.
Short, useful, context-aware
It explains the image’s content or purpose in the context of the page, without padding, keyword stuffing, or unnecessary label words.
Alt text is not a place to dump SEO keywords
A lot of teams treat alt text like an image SEO field first and an accessibility field second. That usually creates poor results for both. Overloaded alt text feels unnatural, repeats page keywords, and often stops being useful for real users.
Better alt text can still support search visibility because it helps search engines understand the image and how it relates to the page. But it only works well when it stays descriptive, specific, and relevant to the actual image.
Write alt text for meaning first. Let SEO benefit happen because the text is genuinely descriptive and relevant.
The 5 image types that need different alt text decisions
1. Informative images
Describe the meaningful content of the image. These include product photos, diagrams, screenshots, examples, and explanatory visuals.
2. Decorative images
If the image adds no important information and is only visual decoration, use empty alt text instead of forcing a description.
3. Functional images
If the image is a link or button, describe the action or destination, not just the picture itself.
4. Complex images
Charts, graphs, infographics, and process diagrams usually need a short alt plus a longer explanation in nearby text.
5. Images of text
When text inside the image matters, the alt should communicate that text or purpose. But whenever possible, real HTML text is better than text baked into an image.
Weak vs better alt text examples
How to write alt text for product pages
Product images are one of the easiest places to improve alt text quality because they usually have a clear subject. The goal is not to write a catalog paragraph inside the alt field. The goal is to identify the product and only the visible detail that matters.
A strong product alt pattern often includes product type, model or material when relevant, and the visible angle or distinguishing detail if it adds real value. It does not need every feature, dimension, SKU, and marketing claim.
Keep gallery images distinct. Do not copy the exact same alt text across every product image if one photo shows the front, another shows the ports, and another shows the installed use case.
When empty alt text is the correct answer
Many teams think every image must have a written description. That is not true. If an image is purely decorative, redundant, or only used for visual atmosphere, forcing descriptive alt text adds noise instead of value.
Good accessibility sometimes means not announcing the image at all. Decorative flourishes, background accents, separators, abstract shapes, and mood-only banner visuals often work better with empty alt text.
<img src="/images/curve-divider.svg" alt="" />
- Background flourishes
- Section dividers
- Pure ambiance photography with no information value
- Repeated icon patterns that add no meaning
- Hero images that carry brand meaning
- Icons used as the only label for an action
- Images that communicate steps or instructions
- Photos that support the main page message
Linked images and icon buttons need functional alt text
When an image is the clickable part of a link or button, the alt text should usually describe what the click does, not what the image looks like.
A shopping cart icon inside a link is not important because it is visually a cart. What matters is that the click takes the user to the cart or adds a product to the cart.
How to handle charts, infographics, and process diagrams
Complex images rarely fit into one perfect alt text sentence. The best pattern is usually a short alt that identifies the image and its main point, plus a fuller explanation in the surrounding text, caption, or dedicated description.
This is especially useful for charts, process flows, comparison diagrams, maps, and infographic summaries. Alt text should not try to replace an entire data table or chart narrative by itself.
Infographic with lots of information about refrigerant classification and safety.
Infographic comparing refrigerant groups by flammability and toxicity, followed by a nearby text summary of the categories and examples.
Use alt text to introduce the complex image and its point. Use normal page text to explain the detail.
A simple workflow for writing alt text at scale
Ask why the image exists
Is it informative, decorative, functional, or complex? That decision shapes the alt text immediately.
Identify the meaningful detail
Describe the detail that actually helps the user understand the page.
Keep it concise
Trim filler words, duplicate context, and marketing claims that add no real meaning.
Review page context
Make sure the alt text works with the nearby heading, caption, and body copy instead of repeating them blindly.
What to document in an alt text style guide
Document these rules
- Approved handling for decorative images
- How product images should be named
- How linked icons should be described
- How to handle charts and infographics
- When captions reduce the need for extra detail
- How much model detail or material detail to include on product pages
Why this matters
Without written rules, alt text quality becomes inconsistent across writers, uploads, regions, and page templates. A style guide turns alt text from a last-minute CMS field into a repeatable publishing standard.
Alt text mistakes that hurt usability and image quality
Keyword stuffing
Repeating target keywords inside the alt field makes the text harder to understand and less trustworthy.
Describing the obvious label
Words like image, photo, picture, or graphic usually waste space unless they add real meaning.
Using the filename as alt text
This is a common CMS shortcut and almost always poor for users.
Forcing descriptions on decorative images
Not every image should be announced. Decorative clutter becomes screen reader clutter.
Copying the same alt across all gallery images
This makes product galleries and multi-image examples much less useful.
Ignoring context
The same image may need different alt text on a category page, a blog article, or a product detail page.
Quick alt text QA before publishing
- The alt text explains the image’s purpose or meaning.
- Decorative images use empty alt when appropriate.
- Linked images describe the action or destination.
- Product gallery images are distinct where the visuals are distinct.
- There is no keyword stuffing or filename dumping.
- The alt text does not just repeat the nearby heading word for word.
- Charts and infographics have nearby explanatory text when needed.
- The most important images on the page are the most carefully described.
- Decorative flourishes are not creating unnecessary noise.
- The overall page still makes sense if the image cannot be seen.
Frequently asked questions
How long should alt text be?
There is no perfect number, but shorter and clearer is usually better. If the image needs a long explanation, use nearby text for the detail and keep the alt focused.
Should I put the exact keyword in alt text?
Only when it naturally fits the actual image and page context. Do not force keywords into the alt field just because the page targets them.
Do decorative images really need empty alt text?
Often yes. Empty alt text is usually better than making a screen reader announce unhelpful decoration.
Should every product image have different alt text?
Not automatically, but if the images show different views or useful details, the alt text should reflect those differences.
What about screenshots?
Describe the important interface or result the screenshot is meant to show, not every button and pixel in the interface.
Can captions replace alt text?
Captions help, but they do not replace the need to decide whether the image is informative, decorative, functional, or complex. Both can work together.
Turn good image descriptions into a repeatable publishing rule
Use the generator and template to standardize how your team handles product images, blog illustrations, linked icons, and decorative visuals instead of leaving alt text to guesswork.