Bild-Button ohne Alternativtext (input-image-alt)

Die Regel input-image-alt meldet Bild-Buttons – <input type="image"> – ohne Textalternative. Ein Screenreader sagt dann nur „Schalter“ oder den Dateinamen des Bildes, und niemand weiß, ob der Button sucht, eine Bestellung abschickt oder einen Newsletter bestellt. Die Lösung ist ein alt, das die Aktion nennt, etwa alt="Suchen".

Was die Regel bedeutet

Ein <input type="image"> ist ein Absende-Button, der als Bild dargestellt wird. Seine Textalternative ist zugleich der Name des Buttons. Deshalb gelten zwei Kriterien: 1.1.1 Nicht-Text-Inhalt verlangt eine Alternative für das Bild, 4.1.2 Name, Rolle, Wert einen Namen für jedes Bedienelement.

axe akzeptiert ein nicht leeres alt, aria-label, aria-labelledby oder ein title-Attribut. Anders als bei einem normalen Bild ist alt="" hier nicht erlaubt: Eine leere Alternative würde assistiver Technik sagen, sie solle einen Button ignorieren, der etwas auslöst. axe meldet das.

Die Wortwahl beurteilt axe nicht. alt="lupe.png" oder alt="Los" neben drei weiteren „Los“-Buttons besteht die Prüfung. Ob der Name sagt, was der Button tut, beurteilt ein Mensch.

Wen es betrifft

Blinde Menschen mit Screenreader hören „Schalter“ ohne Hinweis auf den Zweck oder einen Dateinamen wie „btn Unterstrich absenden“. Wer per Sprache steuert, kann nicht „Klicke Suchen“ sagen, wenn der Button keinen passenden Namen hat. Wer Bilder abschaltet oder wessen Verbindung sie nicht lädt, sieht ein leeres Feld oder den Alternativtext – der dann für sich allein verständlich sein muss.

Warum die Prüfung anschlägt

• Suchformulare mit einer Lupe als <input type="image"> und sonst nichts.
• Ältere Newsletter-, Login- und Kontaktformulare aus Formular-Plugins oder handgebauten Templates, die aus der Zeit vor gestalteten <button>-Elementen stammen.
• Bezahl- und „Jetzt kaufen“-Buttons, die als Bild-Input aus fremden Code-Schnipseln eingebunden sind.
• Ein leeres alt="", gesetzt, um einen Linter zu beruhigen – richtig für Dekoration, falsch für einen Button.
• Templates, die den Dateinamen des Bildes ins Markup schreiben, aber kein Feld für den Alternativtext.

So beheben Sie es

1. Geben Sie jedem Bild-Button ein alt, das die Aktion nennt – „Suchen“, „Anmelden“, „Mit Karte bezahlen“ –, nicht das Motiv („Lupe“).
2. Halten Sie es passend zu sichtbarem Text daneben, damit Sprachsteuerung mit dem Gesehenen funktioniert.
3. Noch besser: Ersetzen Sie den Bild-Input durch einen echten <button>. Der lässt sich leichter gestalten und nimmt Text und Icon auf.

<!-- Vorher: Der Bild-Button hat keine Textalternative -->
<form class="suche" role="search" action="/suche/">
  <input type="search" name="q" aria-label="Website durchsuchen">
  <input type="image" src="/icons/lupe.svg" width="24" height="24">
</form>

<!-- Nachher: alt nennt, was der Button tut -->
<form class="suche" role="search" action="/suche/">
  <input type="search" name="q" aria-label="Website durchsuchen">
  <input type="image" src="/icons/lupe.svg" width="24" height="24" alt="Suchen">
</form>

Dasselbe Formular mit einem <button> – das Icon ist dekorativ, der Name kommt aus dem Text:

<button type="submit" class="suche__absenden">
  <img src="/icons/lupe.svg" width="24" height="24" alt="">
  <span class="visually-hidden">Suchen</span>
</button>

So prüfen Sie es von Hand

1. Suchen Sie die Bild-Buttons: In den Entwicklertools finden Sie sie im Elemente-Bereich über die Suche nach type="image".
2. Wählen Sie jeden aus und öffnen Sie den Bereich „Barrierefreiheit“ (Chrome, Edge) bzw. den Barrierefreiheits-Inspektor (Firefox). Die Zeile „Name“ zeigt, was ein Screenreader ansagt.
3. Fragen Sie sich: Sagt dieser Name ohne das Bild, was beim Drücken passiert?
4. Probieren Sie es mit einem Screenreader (NVDA oder VoiceOver): Springen Sie mit Tab zum Button und hören Sie zu. Mit Sprachsteuerung sagen Sie „Klicke“ und den Namen.

Zugehöriges WCAG-Kriterium

1.1.1 Nicht-Text-Inhalt und 4.1.2 Name, Rolle, Wert, beide Stufe A. Verwandt: 2.5.3 Beschriftung im Namen, wenn sichtbarer Text neben dem Button steht, und 2.4.6 Überschriften und Beschriftungen für Namen, die vorhanden sind, aber nichts sagen.

So meldet Reviseberg diese Regel

Reviseberg führt input-image-alt auf jeder gecrawlten Seite bei 1280 px aus. Die Befundliste zeigt die Regel mit Schweregrad, beiden WCAG-Kriterien und ihrer Stufe, der Zahl der betroffenen Buttons und Seiten und den Punkten, die ein Fix zurückbringt. Ein Suchformular im Header steht auf jeder Seite; eine Korrektur im Template behebt alle 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“ – etwa bei einem Bezahl-Button, den ein Anbieter kontrolliert – oder „Fehlalarm“ markieren; jede Entscheidung wird protokolliert. Ein sauberes Ergebnis markiert 1.1.1 oder 4.1.2 nie als bestanden: Ob ein Name aussagekräftig ist, bestätigt ein Mensch.

Verwandte Regeln

• undefined – normale Bilder ohne Textalternative.
• undefined – <button>-Elemente ohne zugänglichen Namen.
• undefined – <input type="submit"> und ähnliche Buttons ohne Text.

Unbenannte Buttons auf Ihrer Website finden – kostenloser Scan