Element mit role="img" ohne Namen (role-img-alt)

Die Regel role-img-alt meldet Elemente mit role="img" – ein <div>, ein <span>, ein Icon –, die keinen zugänglichen Namen haben. Die Rolle sagt assistiver Technik „das hier ist ein Bild“, und dann gibt es nichts vorzulesen. Die Lösung ist ein aria-label oder aria-labelledby, das die Bedeutung nennt – oder, bei Dekoration, die Rolle zu entfernen und das Element zu verbergen.

Was die Regel bedeutet

role="img" macht aus einem beliebigen Element eine einzige Grafik im Barrierefreiheitsbaum. Sein Inhalt zählt dann nicht mehr: Sterne, Emoji oder das Zeichen einer Icon-Schrift werden Teil des Bildes, und assistive Technik liest nur den Namen, den die Autorin vergibt. Ohne Namen sagt ein Screenreader „Grafik“ oder überspringt das Element.

axe akzeptiert aria-label, aria-labelledby oder ein title-Attribut als Namen. Text im Element zählt nicht, denn ein Bild bekommt seinen Namen nicht aus seinem Inhalt. Mit aria-hidden="true" verborgene Elemente prüft die Regel nicht.

Die Regel findet einen fehlenden Namen. Ob „4 von 5 Sternen“ wirklich der angezeigten Bewertung entspricht und ob das Element role="img" überhaupt brauchte, beurteilt ein Mensch.

Wen es betrifft

Blinde und sehbehinderte Menschen mit Screenreader hören „Grafik“ – oder gar nichts –, wo Sehende eine Bewertung, ein Status-Icon oder ein Titelbild sehen. Wer eine Braillezeile nutzt, bekommt dieselbe Leerstelle. Die Information fehlt genau dort, wo die Seite auf sie setzt, etwa bei der Sternebewertung eines Produkts oder einem „ausverkauft“-Hinweis als Icon.

Warum die Prüfung anschlägt

• Sternebewertungen aus Icon-Schriften oder Unicode-Sternen, in role="img" gepackt, damit Screenreader nicht „Stern Stern Stern“ lesen – und dann nie benannt.
• CSS-Hintergrundbilder auf einem <div role="img"> für Titelbilder und Teamfotos: Die Rolle ist gesetzt, der Name fehlt.
• Emoji in <span role="img"> – ein Muster aus React-Linting-Empfehlungen – ohne das zugehörige aria-label.
• Icons aus Icon-Schriften (<i class="icon icon-lkw" role="img">) in Feature-Listen und Status-Badges.
• Komponentenbibliotheken, die die Rolle standardmäßig setzen und den Namen als optionale Eigenschaft anbieten, die niemand füllt.

So beheben Sie es

1. Entscheiden Sie, ob das Bild eine Information trägt. Wenn ja, bekommt es ein aria-label mit dieser Information – die Bewertung, den Status, was das Bild zeigt.
2. Steht die Information schon in einer sichtbaren Bildunterschrift, verweisen Sie mit aria-labelledby darauf, statt sie zu wiederholen.
3. Ist es Dekoration, entfernen Sie role="img" und setzen aria-hidden="true", damit assistive Technik das Element übergeht.

<!-- Vorher: role="img" ohne Namen – die Bewertung geht verloren -->
<div class="bewertung" role="img">
  <span aria-hidden="true">★★★★☆</span>
</div>
<!-- Vorher: ein Hintergrundbild als „Grafik“, aber ohne Namen -->
<div class="hero__bild" role="img"></div>

<!-- Nachher: der Name sagt, was die Sterne bedeuten -->
<div class="bewertung" role="img" aria-label="Bewertet mit 4 von 5 Sternen">
  <span aria-hidden="true">★★★★☆</span>
</div>
<!-- Nachher: das Titelbild heißt wie seine sichtbare Bildunterschrift -->
<div class="hero__bild" role="img" aria-labelledby="hero-unterschrift"></div>
<p id="hero-unterschrift">Unsere Werkstatt in Leipzig, Frühjahr 2026</p>

Ein rein dekoratives Icon braucht weder Rolle noch Namen:

<i class="icon icon-funkeln" aria-hidden="true"></i>

So prüfen Sie es von Hand

1. Suchen Sie im Quelltext oder im Elemente-Bereich der Entwicklertools nach role="img".
2. Wählen Sie jedes Element aus und öffnen Sie den Bereich „Barrierefreiheit“ (Chrome, Edge) bzw. den Barrierefreiheits-Inspektor von Firefox. Prüfen Sie die Zeile „Name“.
3. Vergleichen Sie den Namen mit dem Sichtbaren: Sagt er, was die Grafik Sehenden mitteilt? Eine Sternebewertung sollte als Zahl ankommen, nicht als „Sterne“.
4. Hören Sie mit einem Screenreader (NVDA oder VoiceOver) nach. Dekorative Icons bleiben stumm, informative werden einmal mit ihrer Bedeutung angesagt.

Zugehöriges WCAG-Kriterium

1.1.1 Nicht-Text-Inhalt, Stufe A. Verwandt: 1.3.1 Info und Beziehungen, wenn die Grafik für strukturierte Information wie eine Bewertung steht, und 4.1.2 Name, Rolle, Wert für den Grundsatz, dass eine Rolle einen Namen braucht.

So meldet Reviseberg diese Regel

Reviseberg führt role-img-alt auf jeder gecrawlten Seite bei 1280 px aus. Die Befundliste zeigt die Regel mit Schweregrad, WCAG-Kriterium und Stufe, der Zahl der betroffenen Elemente und Seiten und den Punkten, die ein Fix zurückbringt. Bewertungen und Badges stammen meist aus einer Komponente – eine Korrektur behebt dann oft Hunderte Vorkommen. Im Detail sehen Sie den CSS-Selektor, den HTML-Ausschnitt und jede betroffene Seite.

Befunde können Sie mit Begründung als „ignorieren“, „nicht behebbar“ oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert. Ein sauberes Ergebnis markiert 1.1.1 nie allein als bestanden: Ob jeder Name stimmt, bestätigt ein Mensch.

Verwandte Regeln

• undefined – <img>-Elemente ohne Textalternative.
• undefined – eingebettetes SVG mit role="img" ohne Namen, die SVG-Variante dieser Regel.
• undefined – ARIA-Attribute, die für die Rolle des Elements nicht erlaubt sind.

Unbenannte Grafiken auf Ihrer Website finden – kostenloser Scan