← Alle Regeln

Textalternativen

Elemente mit role="img" brauchen einen Namen

• Regel: role-img-alt
• Schweregrad: Schwerwiegend
• WCAG-Stufe A

Warum das wichtig ist

role="img" sagt Hilfsmitteln „das ist ein Bild“ und liefert dann nichts dazu. Eine in CSS gezeichnete Sternebewertung wird zu einem angesagten, aber leeren Bild.

So beheben Sie es

1. Ergänzen Sie aria-label mit dem, was die Darstellung vermittelt („Bewertet mit 4 von 5“).
2. Nutzen Sie aria-labelledby, wenn die Beschreibung bereits als sichtbarer Text existiert.
3. Ist es rein dekorativ, entfernen Sie role="img" und setzen aria-hidden="true".

Im Markup

<div role="img" class="star-rating"></div>

<div role="img" class="star-rating" aria-label="Rated 4 out of 5"></div>

Die Anforderung dahinter

Diese Regel ist eine Art, die folgenden WCAG-2.2-Erfolgskriterien zu verfehlen. Das W3C, das den Standard herausgibt, erläutert jedes davon:

• 1.1.1 Nicht-Text-Inhalte (öffnet in neuem Tab) — WCAG-Stufe A

Weiterführende Quellen

Deque University zu role-img-alt (öffnet in neuem Tab)

Deque entwickelt axe-core, die quelloffene Prüf-Engine unseres Scanners. Ihre Seite dokumentiert die Regel so, wie die Engine sie umsetzt.

Automatische Prüfungen finden Fehler, die ein Browser nachweisen kann. Ob eine Untertitelspur inhaltlich stimmt, ob ein Alternativtext wirklich hilft oder ob sich eine Seite durchgängig mit der Tastatur bedienen lässt, kann nur ein Mensch beurteilen.