WCAG-A/AA-Anforderung Priorität: Schwerwiegend

Bilder haben keine Textbeschreibung

Einige Bilder haben keinen Alternativtext. Wer sie nicht sehen kann, erfährt nicht, was sie zeigen.

Dieser Text wurde automatisch übersetzt und noch nicht von Muttersprachlern geprüft.

Warum das für Ihre Kunden wichtig ist

Screenreader-Nutzer hören nichts oder einen Dateinamen wie „IMG_2041.jpg“ statt des Produkts, der Farbe oder des Angebots. Sie übersehen womöglich wichtige Details und wechseln zu einem Shop, der seine Produkte beschreibt.

Wen es betrifft

blinde Kundinnen und Kunden
Screenreader-Nutzer
Menschen mit deaktivierten Bildern oder langsamer Verbindung

So beheben Sie es

Ergänzen Sie an jedem <img> ein alt-Attribut. Beschreiben Sie in einer kurzen Formulierung, was für den Kauf wichtig ist (Produkt, Farbe, wichtiges Detail). Verwenden Sie alt="" für rein dekorative Bilder, damit sie übersprungen werden. Kein „Bild von“ und keine Keyword-Häufung.

Bei Shopify

Ergänzen Sie Alternativtexte für Produktmedien und Bilder in Theme-Sections in der Shopify-Administration. Sind Alternativtexte vorhanden, werden aber nicht ausgegeben, fehlt meist das alt-Attribut am Bild-Tag im Liquid-Template des Themes.

Bei Shoptet (CZ)

Ergänzen Sie Beschreibungen für Produkt- und Bannerbilder in der Administration, sofern das Template dies erlaubt. Gibt das Template sie nicht aus, ist meist eine Template-Änderung durch Shoptet oder eine Partneragentur nötig.

Bei PrestaShop

Produktbilder übernehmen den alt-Text meist aus der Bildlegende oder dem Produktnamen im Backoffice. Prüfen Sie, ob die .tpl-Templates des Themes das alt-Attribut ausgeben, auch in Modulen wie Slidern.

Bei WooCommerce

Füllen Sie das Feld „Alternativer Text“ in der WordPress-Mediathek aus und prüfen Sie, ob Theme oder Page-Builder ihn ausgeben. Bilder aus Plugins oder Slidern brauchen unter Umständen eigene alt-Einstellungen.

Standards

Standards
Standard	Abschnitt
WCAG 2.2	1.1.1 (A) Non-text Content
WCAG 2.1	1.1.1 (A) Non-text Content
WCAG 2.0	1.1.1 (A) Non-text Content
EN 301 549 4.1.1	9.1.1.1
EN 301 549 3.2.1	9.1.1.1
Section 508 2017	E205.4
ДСТУ EN 301 549 2022	9.1.1.1

Automatische Prüfung: axe-core-Regel image-alt. dequeuniversity.com, github.com, www.w3.org

Die Seite enthält veraltetes Markup für blinkenden Text
WCAG 2.2.2 A
Text ist wegen zu geringen Kontrasts schwer lesbar
WCAG 1.4.3 AA
Manche Beschriftungen verweisen auf das falsche Element
WCAG 4.1.2 A
Barrierefreiheits-Attribute haben falsche Werte
WCAG 4.1.2 A

Alle Regeln, die wir prüfen