OTTODesign System

FoundationsAccessibility

Image alt texts

Alt text (alternative text) is a short description of an image that's embedded in the HTML code of a webpage. It serves several accessibility purposes, helps with SEO and serves a fallback, if an image fails to load.

Note: Alt text must be provided for all non-decorative images to describe their purpose or content.

If an image and text are enclosed within a link, the image may have an empty alt attribute (alt="") if the text sufficiently describes the link target. That is mainly the case for product images, if the product title is part of the link.

Writing principles

Be Descriptive and Specific:
Don't just say "image." Describe what is in the image. What are the key elements, and what is happening?

Keep it Concise:
Aim for a length of around 120 characters. Longer descriptions may be cut off by screen readers.

Context Matters:
Tailor your alt text to the surrounding content. What is the purpose of the image in this specific context?

No need to add "image of" or "picture of":
Screen readers announce images as images, so you don't need to add that information.

Write in German:
Our users are German. That is the language we use. However, Anglicisms are okay.

For indexed images (those intended to appear in image search results),
alt text requires extra attention for SEO. While incorporating target keywords is valuable, prioritize accurate and descriptive language that reflects the image's content. Avoid keyword stuffing; overly optimized alt text can be penalized. Focus on being specific, truthful, and descriptive about what the image depicts for both users and search engines.

Best practices

Do

Depending on your context some of the following Best practices may be applied. It should not be your goal to take all of them into account - remember concise 120 characters.

Include the Product Name and Brand:
Use the official product name or a common variation.
alt="Nike Air Max 270 React - Men's Running Shoes"

Include Key Product Attributes:
Specify key features or details that distinguish the product:

  • Color:alt="Levi's 501 Original Fit Jeans - Dark Wash"
  • Size (if relevant and visually apparent):alt="Large Blue Ceramic Vase"
  • Material:alt="Cashmere Scarf - Heather Gray"
  • Style:alt="Bohemian Print Maxi Dress"
  • Intended Use:alt="Outdoor Patio Dining Set"

Describe the Action/View (if applicable):
If the image shows the product in use or from a specific angle, describe it.

alt="Woman wearing a red scarf and black coat walking in snow" (shows product in use)

alt="Close-up of textured fabric on a linen sofa" (shows a detail)

Focus on the Unique Selling Proposition:
If the image highlights a unique feature or benefit, mention it.

alt="Ergonomic Office Chair with Adjustable Lumbar Support"

Don't

Just Use the Product Name (alone): This is too generic. Add descriptive details.

Keyword Stuff: Avoid repeating the same keywords multiple times or using irrelevant keywords.

alt="red bag red purse red handbag cheap red bags"

Assume User Knowledge: Describe the product as if the user has never seen it before.

Use ALL CAPS: It's harder to read, looks unprofessional and it feels like you are shouting at you user.

Examples

Product

Doalt="Schwarze TOM TAILOR Geldbörse LARY aus Leder, geöffnet mit mehreren Kartenfächern und Münzfach"
Don'talt="Leder Portemonnaie"

Topic

Doalt="Zwei Hände formen ein Herz als Symbol für Liebesbeweis"
Don'talt="Herz"

Outfit

Doalt="Person trägt schwarzen Adidas Trainingsanzug mit weißen Streifen und rosa Cap, lehnt sich an weißen Hocker"
Don'talt="Trainingsanzug"

Status

Updated 10 June 2026