Alt-Text der Bildschaltfläche
Silktide findet Bildschaltflächen in Ihren Formularen, die keinen haben. Eine Bildschaltfläche ohne Textalternative bietet Personen, die sie nicht sehen können, keine Möglichkeit zu erkennen, was ein Druck darauf bewirkt.
<!-- Problem: kein alt-Attribut -->
<input type="image" src="button.png">
<!-- Problem: leeres alt -->
<input type="image" src="button.png" alt="">
<!-- Behoben: Der Alt-Text benennt die Aktion -->
<input type="image" src="button.png" alt="Nachricht senden">
Warum das wichtig ist
Eine Bildschaltfläche (<input type="image">) verwendet ein Bild anstelle einer Textbeschriftung, daher ist das alt-Attribut der einzige Name, den ein ansagen kann. Ohne dieses wird die Schaltfläche nur als "Schaltfläche" oder über ihren Dateinamen angekündigt. Wenn die Absenden-Schaltfläche eines Formulars nicht identifiziert werden kann, können manche Besucher es nicht mit Sicherheit ausfüllen – eine direkte Hürde für Anfragen, Anmeldungen und Käufe.
Im Gegensatz zu gewöhnlichen Bildern kann eine Schaltfläche niemals nur dekorativ sein: Sie führt immer eine Aktion aus und benötigt daher immer einen Namen.
So beheben Sie das Problem
- Fügen Sie ein
alt-Attribut hinzu, das die durch die Schaltfläche ausgeführte Aktion benennt, z. B. "Suchen" oder "Nachricht senden", wie im obigen Beispiel. - Lassen Sie das Attribut nicht leer – ein leeres
alt=""verbirgt den Namen der Schaltfläche, ohne die Schaltfläche selbst zu verbergen. - Ersetzen Sie die Bildschaltfläche alternativ durch ein
<button>-Element mit echtem Text; das ist einfacher zu gestalten und standardmäßig barrierefrei.
So testet Silktide das
- Findet jede Bildschaltfläche (
<input type="image">) auf jeder Seite. - Überspringt Schaltflächen, die vor Screenreadern verborgen sind.
- Meldet jede Schaltfläche, deren
alt-Attribut fehlt oder leer ist.
Schaltflächen, deren Alt-Text zwar existiert, aber wenig hilfreich erscheint, werden durch die separate Prüfung Alt-Text der Absenden-Schaltfläche abgedeckt.