Alt text

It is therefore the only place where an image acquires any meaning for software at all.

Alt text is also the very first success criterion of the accessibility standards: WCAG 2.1 and 2.2 list it under 1.1.1 "Non-text Content" at conformance level A. Anyone who misses the lowest level meets neither AA nor the legal requirements built on it.

What alt text has to achieve

The decisive question when writing is not "What can be seen in the image?" but "What information is lost if the image is missing?". The two only coincide for purely illustrative photos. For a button with a magnifying glass symbol, the relevant information is not "magnifying glass" but "open search".

This leads to the most important distinction in practice, which the Images Tutorial of the W3C Web Accessibility Initiative breaks down systematically: the right alt text depends on the function of the image, not on its subject. The same product photo needs a different alternative text in the gallery than in the basket thumbnail.

The image types and how to handle them

One detail is regularly done wrong: a missing alt attribute is not the same as an empty one. If the attribute is missing altogether, screen readers treat the image as possibly meaningful and, if in doubt, read out the file name, i.e. "D S C underscore 0 4 7 1 dot J P G". A deliberately empty alt="" tells the software to skip the image. For decorative graphics, the empty attribute is the right solution, not omitting it.

Alt text and the standards

The requirement appears in two places in the WCAG. Success criterion 1.1.1 Non-text Content (level A) requires an alternative for all non-text content that serves the same purpose, and explicitly names special cases: controls describe their purpose, tests and CAPTCHAs need an identifying description and an alternative form of output, and purely decorative content is made invisible to assistive technology. Success criterion 1.4.5 Images of Text (level AA) goes one step further and requires that text should, wherever possible, not be delivered as a graphic in the first place. Both can be read in the W3C's Web Content Accessibility Guidelines 2.2.

Via the harmonised standard EN 301 549, these criteria move into the European legal framework and, via the BFSG, into the obligations of German B2C shops. This makes alt text one of the few points that are at the same time legally binding, technically trivial and widely left undone. That is exactly why it almost always appears at the top of the results lists of automated testing tools: missing alternative texts can be detected unambiguously by machine, unlike, for example, the question of whether a focus order makes sense.

Real-world example: product images in Shopware 6

In Shopware 6, the alternative text is maintained on the media object, not on the product. In the administration, every file under Content → Media has the fields title and alternative text; the same fields appear in product maintenance under Catalogues → Products → Media. In the storefront template, the value is available as media.alt.

The difference in output can be shown with a concrete case. A shop carries a hiking boot in five colours, each variant with its own image. Without maintained alternative texts, a user in the gallery hears the same file name five times in a row or, if a fallback applies, the same product name five times. The information that makes switching worthwhile in the first place, namely the colour and the perspective, is completely missing. With maintained texts, this becomes "Hiking boot model Trail, colour graphite, side view", "… sole from below", "… close-up of the lacing".

A template fallback prevents the worst case but does not replace maintenance. Anyone who sets media.alt ?: product.translated.name ensures that a file name is never read out, but produces identical alternative texts for all images of a product. That is a safety net, not a target state. The sensible combination: a fallback in the template, a maintenance rule for editorial work, plus a recurring evaluation of how many media objects actually carry an alternative text.

Two Shopware-specific pitfalls come on top. First, Shopping Experiences: images in CMS blocks are often embedded via the block configuration, and the alternative text is maintained there less often than for product media. Second, the theme's icon sprites: symbol buttons render as SVG, not as <img>. An alt attribute has no effect there; what is needed is a <title> element in the SVG or an aria-label on the button. Since Shopware 6.7, the standard theme supplies corresponding labels for its own symbol buttons; for your own icons, the rule still applies to you.

Alt text and SEO

Alternative text is one of the few levers that serve accessibility and visibility at the same time. In its documentation on Google Images, Google describes alt text as one of the main sources for understanding the content of an image. Two effects have to be distinguished.

• Image search. For e-commerce, image search is an entry channel in its own right, especially for visually driven ranges such as fashion, furniture and decoration. Precise alternative texts, meaningful file names and surrounding text work together here.
• Linked images. If an image is embedded in a link and the link contains no text, Google treats the alt text as anchor text. For product tiles in a listing that are linked across their full area, this is the rule.

This is no licence for keyword stuffing. Strings of search terms miss the purpose of the attribute, are annoying for screen reader users and count as a spam signal. The usable alt text is the one a person would say on the phone when describing the image: a natural phrase in which the relevant term occurs anyway.

Common mistakes

• "Image of" or "graphic" as an introduction. Screen readers already announce the element type themselves. The duplication only costs time.
• The file name as alt text. Often generated automatically by imports from the PIM or from supplier data.
• Decorative images get text, informative ones do not. A described background gradient and a silent product image is a surprisingly widespread pattern.
• Size charts as images. The classic trap in fashion retail. A graphic with twelve rows cannot be packed sensibly into an alternative text; it belongs on the page as an HTML table.
• The title attribute misconception. title creates a mouse tooltip and does not replace alt. On touch devices it is practically unreachable.
• CSS background images with content. A banner embedded via background-image has no alt. If it carries information, it needs visibly marked-up text.
• No maintenance for new stock. The initial stock is tidied up, and the next range import brings empty fields again. Without a process, the clean-up is just a snapshot.

Misconceptions

"Alt texts may be no longer than 125 characters." This figure is not in any specification. It goes back to the behaviour of older versions of JAWS, which output longer texts in blocks. Neither HTML nor the WCAG names an upper limit. Brevity still makes sense: anyone who needs more than two sentences has a complex image in front of them, and thus a case for a detailed description in the body text.

"Automatically generated descriptions take care of it." Image recognition delivers usable rough drafts and can speed up the start with large legacy stocks. But it knows neither the variant nor the function nor the context: whether an image is linked, which of the five colours is currently shown, whether the graphic carries information or merely decorates, cannot be derived from the pixel content. Generated texts belong in an editorial review, not directly in the database.

"An empty alt attribute is an error." The opposite is the case. For decorative images, alt="" is the intended and correct markup. Testing tools accordingly do not report it as a violation.

"The image is described right next to it." If the information really is in the surrounding text word for word, the image is decorative and gets alt="". The error arises when this assumption is true but the image still receives a description, or when it is not true and the image is marked up as empty.

How to proceed with existing shops

With ranges that have grown over time, full coverage can rarely be achieved in one step. Prioritising by impact is more practical than working through the media pool alphabetically. First the images in the purchase path, i.e. product detail page, listing tiles, basket and checkout. Then the functional graphics, i.e. logo, icon buttons, payment and shipping symbols, because an unnamed button is more serious than an undescribed mood image. After that, category and campaign pages. Finally, archive and magazine content.

At the same time, the obligation belongs in the process: a mandatory field in the PIM, an approval rule in the editorial team and an automated test in delivery that flags a page with missing alternative texts. The effort per image is a few seconds, whereas the effort for retrofitting a stock of several tens of thousands of media objects runs to person-days. This asymmetry is the real argument for anchoring the rule early. In newly built web applications, the alt field belongs in the data model as a mandatory field instead of being added later.

FAQ

How long should alt text be? As long as necessary, usually a short phrase. There is no formal upper limit. If one sentence is not enough, a detailed description in the body text or a real table is the right way.

Do decorative images need alt text? No, they need an empty alt="". Omitting the attribute is the mistake, not leaving it empty.

What applies to SVG icons? Inline SVG has no alt. Either the SVG gets a <title> element and is marked up as an image with role="img", or the surrounding interactive element gets an aria-label.

Does alt text count as a ranking factor? It is a signal for understanding image content and has an effect in image search and as anchor text for linked images. As an isolated lever for rankings in web search, it is not suitable.

Is it enough to generate alt texts automatically? As a first pass for large legacy stocks, yes; as a final state, no. The function, variant and context of an image are not in the image.