Brauchen dekorative Bilder Alt-Text?

Nein - und ihnen einen beschreibenden Alt-Text zu geben, wäre sogar falsch. Ein rein dekoratives Bild (ein Hintergrund-Element, eine Trennlinie) sollte alt="" bekommen (ein leeres, aber vorhandenes Attribut), damit Screenreader es stillschweigend überspringen, statt eine bedeutungslose Beschreibung vorzulesen.

Wie viele fehlende Alt-Texte meldet Scanverra pro Scan?

Bis zu 10 pro Scan - jeder mit der zugehörigen Bildquelle, damit Sie ihn schnell finden. Fehlen auf Ihrer Seite mehr als 10, hilft es, die erste Charge zu beheben und erneut zu scannen, um den Rest sichtbar zu machen.

Beeinflusst Alt-Text tatsächlich das SEO-Ranking, oder ist es rein eine Frage der Barrierefreiheit?

Beides. Screenreader sind darauf angewiesen, um Nutzern, die Bilder nicht sehen können, deren Inhalt zu beschreiben, und es ist zugleich eines der wenigen Signale, die Suchmaschinen dafür haben, was ein Bild tatsächlich zeigt, da sie Pixel nicht so zuverlässig interpretieren können wie ein Mensch.

Was sollte ich für ein rein funktionales Icon wie eine Lupe als Such-Button schreiben?

Beschreiben Sie die Aktion, nicht das Icon - alt="Suchen" oder aria-label="Suchen", nicht alt="Lupen-Symbol". Steht neben dem Icon bereits sichtbarer Text wie "Suchen", markieren Sie das Icon stattdessen als dekorativ, damit es nicht doppelt vorgelesen wird.

Unterscheidet sich ein fehlendes alt-Attribut von einem leeren?

Ja, und der Unterschied ist wichtig. Ein fehlendes alt-Attribut (gar kein Attribut) wird als Fehler behandelt - Screenreader lesen dann oft ersatzweise den Dateinamen vor. Ein bewusst leeres alt="" ist dagegen ein gültiges, beabsichtigtes Signal dafür, dass das Bild dekorativ ist.

Fehlenden Alt-Text bei Bildern beheben

Alt-Text ist die Textalternative, die an ein <img>-Tag angehängt wird - das, was ein Screenreader anstelle des Bildes vorliest, und das, woran Suchmaschinen erkennen, was auf dem Bild eigentlich zu sehen ist. Ein Bild ganz ohne alt-Attribut ist gleichzeitig ein Barrierefreiheits-Fehler und eine verschenkte SEO-Chance.

Warum Alt-Text fehlt

Fehlender Alt-Text ist selten Absicht. Die häufigsten Ursachen:

CMS-Uploads ohne Pflichtfeld. Die meisten Content-Editoren lassen ein Bild veröffentlichen, ohne je nach Alt-Text zu fragen - das Feld bleibt dann stillschweigend leer.
Kopierte Markup-Vorlagen. Ein <img>-Tag, das aus einem anderen Bereich der Website (oder aus einem Beispiel einer Komponenten-Bibliothek) kopiert wurde, bringt den Alt-Text des Originals mit - oder eben dessen Fehlen.
Icon-Komponenten, die standardmäßig als Dekoration gelten. SVG-Icon-Bibliotheken und Icon-Fonts liefern oft keinen zugänglichen Namen mit, wenn man ihn nicht explizit ergänzt - und man geht leicht davon aus, dass die umgebende Komponente das schon regelt, obwohl sie es nicht tut.
Aussagekräftige Bilder werden fälschlich als dekorativ markiert, oder umgekehrt. Diese Unterscheidung falsch zu treffen kommt fast genauso häufig vor wie sie ganz zu vergessen.

So findet man jede fehlende Stelle

Das ist einer der wenigen Checks, die Scanverra direkt bewertet und nicht nur anzeigt. Während eines Browser-Tests führt Scanverra Array.from(document.querySelectorAll("img")).filter((img) => !img.alt) gegen die gerenderte Seite aus und meldet jeden Treffer als eigenständiges Problem "Fehlendes alt-Attribut", inklusive der Bildquelle für die ersten 10 Treffer pro Scan, damit man sie schnell findet. Zusätzlich fließt ein echter Lighthouse-image-alt-Audit in den Accessibility-Score ein - ein fehlender Alt-Text taucht also an zwei Stellen auf, nicht nur als vage Vermutung.

So behebt man es

1. Für aussagekräftige Bilder eine echte Beschreibung schreiben

Beschreiben Sie, was das Bild im jeweiligen Kontext aussagt, nicht was es rein technisch ist - "Bild von" oder "Foto von" kann entfallen, denn Screenreader kündigen es ohnehin schon als Bild an:

Den Inhalt beschreiben, nicht die Dateitypescript

1<img
2  src="/keyboard-side-profile.webp"
3  alt="Mechanical keyboard with low-profile keys and RGB backlighting"
4  width={480}
5  height={320}
6/>

2. Rein dekorative Bilder als leer markieren, nicht als fehlend

Ein leeres alt sagt Screenreadern, das Bild zu überspringen, statt zu ratentypescript

1<img src="/divider-flourish.svg" alt="" role="presentation" />

3. Funktionalen Icons einen zugänglichen Namen für die ausgeführte Aktion geben

Die Aktion des Buttons beschreiben, nicht die Form des Iconstypescript

1<button aria-label="Search">
2  <SearchIcon aria-hidden="true" />
3</button>

4. Alt-Text nicht mit Keywords vollstopfen

Alt-Text, der wie eine Aneinanderreihung von SEO-Keywords klingt statt wie eine echte Beschreibung, verfehlt sowohl den Zweck der Barrierefreiheit (er nützt einem Screenreader-Nutzer nichts) als auch in der Praxis das Ranking - schreiben Sie ihn für die Person, die das Bild nicht sehen kann.

Wie Scanverra Alt-Text-Probleme erkennt

Scanverras Browser-Test prüft tatsächlich jedes gerenderte <img>-Element auf der Seite und bewertet fehlenden Alt-Text als echtes Accessibility-Problem, begrenzt auf die ersten 10 Treffer pro Scan - das ist kein reines Anzeigefeld, sondern fließt in Ihren Score ein.