A: < input type="image">-Elemente müssen einen Alternativtext besitzen (WCAG 1.1.1 + 4.1.2)

• Bedeutung
• Auswirkung
• Empfehlung
• Beispiele

Das bedeutet

Schaltflächen vom Typ input type="image" brauchen einen zugänglichen Namen. Dieser kommt in der Regel aus dem alt Attribut. Ohne Alt Text oder mit leerem Alt Text ist die Funktion für Screenreader nicht erkennbar. Hintergrundgrafiken liefern keinen Namen.

Auswirkung

Ohne verständliche Benennung wissen Nutzerinnen und Nutzer nicht, welche Aktion ausgelöst wird. Prozesse werden abgebrochen und es droht ein WCAG Verstoß.

Empfehlung

• Immer einen beschreibenden Alt Text setzen, der die Aktion nennt, zum Beispiel „Suche starten“.

• Falls kein sichtbarer Text möglich ist, kann aria-label den Namen liefern. Das alt Attribut bleibt trotzdem erforderlich.

• Für dekorative Bilder keine input type="image" verwenden. Stattdessen <button> nutzen und das Bild als rein dekorative Grafik einbinden.

Beispiel

Problematisch

<input type="image" src="/icons/search.png">
<input type="image" src="/icons/next.svg" alt="">

Besser

<input type="image" src="/icons/search.png" alt="Suche starten">
<input type="image" src="/icons/next.svg" alt="Weiter zum nächsten Schritt">
 
<!-- Alternative mit aria-label (alt bleibt technisch nötig) -->
<input type="image" src="/icons/cart.svg" alt="" aria-label="Warenkorb öffnen">
 
<!-- Bevorzugt mit Button -->
<button type="submit" aria-label="Suche starten">
  <img src="/icons/search.png" alt="">
</button>

Verknüpfte WCAG-Kriterien:
WCAG 1.1.1 - Nicht-Text-Inhalt
WCAG 4.1.2 - Name, Rolle, Wert