Zum Inhalt springen
Pandus

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

Einige Grafiken haben keine Textbeschreibung

Einige Elemente sind als Bild ausgezeichnet, haben aber keine Textalternative, zum Beispiel Sternebewertungen oder Icon-Grafiken.

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

Warum das für Ihre Kunden wichtig ist

Screenreader-Nutzer erfahren nicht, was die Grafik zeigt, etwa eine Bewertung von 4,5 Sternen oder ein Badge „Kostenloser Versand“. Das kann die Kaufentscheidung beeinflussen.

Wen es betrifft

  • blinde Kundinnen und Kunden
  • Screenreader-Nutzer

So beheben Sie es

Geben Sie jedem Element mit role="img" einen Namen per aria-label oder aria-labelledby, zum Beispiel aria-label="Bewertet mit 4,5 von 5". Ist die Grafik dekorativ, entfernen Sie role="img" und blenden Sie sie mit aria-hidden="true" aus.

Bei Shopify

Oft Bewertungssterne aus Bewertungs-Apps oder Icons im Theme. Ergänzen Sie Namen in den Liquid-Snippets des Themes; Markup von Bewertungs-Apps muss der App-Entwickler korrigieren.

Bei Shoptet (CZ)

Oft Bewertungen oder Icons im Template. Melden Sie es Shoptet oder einer Partneragentur.

Bei PrestaShop

Oft Bewertungs- oder Icon-Elemente aus Modulen. Korrigieren Sie es in überschriebenen Modul-Templates oder melden Sie es dem Modul-Entwickler.

Bei WooCommerce

Oft Bewertungssterne aus WooCommerce oder Bewertungs-Plugins oder Icon-Fonts im Theme. Korrigieren Sie es in Child-Theme-Templates oder melden Sie es dem Plugin-Entwickler.

Standards

Standards
StandardAbschnitt
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 role-img-alt. dequeuniversity.com, github.com, www.w3.org

Alle Regeln, die wir prüfen