Praxisleitfaden Alternativtext für Bildschaltflächen
Bildschaltflächen eindeutig benennen
Ein Bildtaster ohne Alternativtext nennt seine Formularaktion nicht. Sehen Sie, warum der Bildvergleich hier gleich aussieht und der Re-Test die Korrektur trotzdem belegt.
input-image-altWCAG 1.1.1, 4.1.2
Sehen Sie, was sich durch die Korrektur ändert.
Zuletzt geprüft: Permalink: https://spanier.one/wcag-input-image-alt.html
Befund verstehen
Eine Schaltfläche ohne lesbare Aktion
Scanner-Signal
input-image-alt: .studio-imports input[type="image"] hat keinen zugänglichen Namen.
Technische Einordnung
- Regel
input-image-alt- Referenz
- WCAG 1.1.1, 4.1.2
Der orange Bildtaster rechts gehört zum Formular für die Kanalakte. Seine Grafik zeigt eine Akte und einen Papierflieger, aber keinen Text. Das input-Element besitzt weder alt noch eine andere wirksame Beschriftung, und der Absatz darüber ist im HTML nicht als Name mit dem Taster verbunden.
Bedeutung im Nutzungskontext
Wer Schaltflächen über einen Screenreader auswählt, erhält hier keinen verlässlichen Hinweis auf die Aktion. Die Rolle als Schaltfläche allein erklärt nicht, welches Formular abgeschickt wird.
Vor der Korrektur
Element: input type="image"
Bildmotiv: Akte mit Papierflieger, ohne Text
alt: fehlt
Weitere Namensquelle: keine
Axe input-image-alt: Verstoß (critical)Welche Aktion soll der Name ankündigen?
Bestimmen Sie zuerst die Formularfunktion. Das Bildmotiv allein reicht dafür nicht aus.
| Fall | Wann trifft er zu? | Passende Umsetzung |
|---|---|---|
| Bildtaster zum Absenden | Das vorhandene input type="image" ist der grafische Submit-Taster eines Formulars. | Benennen Sie die Aktion mit Verb und Objekt. Im Beispiel erhält der Taster den Namen „Kanalakte absenden“. |
| Grafik mit sichtbarem Aktionstext | Auf dem Bild steht – anders als hier – bereits eine Beschriftung wie „Suchen“. | Übernehmen Sie diesen Text in den zugänglichen Namen. Eine abweichende unsichtbare Benennung erschwert die Sprachbedienung. |
| Funktion im Altsystem ungeklärt | Es ist nicht belegt, ob der Taster speichert, sendet oder einen anderen Schritt auslöst. | Klären Sie das Verhalten vor der endgültigen Benennung. Die Kalibrierseite zeigt eine Formularstruktur, aber keine fachliche Verarbeitung der Kanalakte. |
Fundstelle ansehen
Der Bildtaster im vollständigen Importtablett
Der Ausschnitt zeigt Überschrift, Medien und das Formular zusammen. Markiert ist der orange Bildtaster rechts; darunter steht ein separates Textfeld.
„Bildtaster für die Kanalakte“ steht nur als Absatz über dem Formular. Ohne programmatische Zuordnung erhält der Taster daraus keinen Namen. Eine sichtbare Nähe ersetzt die Beschriftung im HTML nicht.
Beschriftung ergänzen
Die Aktion am input-Element benennen
Ergänzen Sie am vorhandenen Bildtaster alt="Kanalakte absenden". Dieser Name beschreibt das Absenden des Formulars. Er behauptet weder eine erfolgreiche Speicherung noch eine bestimmte Verarbeitung der Daten.
Was sich im Code ändert
Die geänderte Stelle im Beispiel. Unveränderter Anfang und Schluss sind hier ausgeblendet.
- Kommt hinzu
alt="Kanalakte absenden"
Im Formularbaukasten Suchen Sie die Beschriftung der Bildschaltfläche in der Formular-Komponente. Ein Alt-Text in der Medienbibliothek genügt nur, wenn er auch am gerenderten input-Element ausgegeben wird.
Vollständigen Code vergleichen
Vorher
<form>
<p>Bildtaster für die Kanalakte</p>
<input type="image" src="…">
</form>Nachher
<form>
<p>Bildtaster für die Kanalakte</p>
<input type="image" src="…"
alt="Kanalakte absenden">
</form>Markierte Zeilen wurden geändert
Im Projekt umsetzen
Den Namen mit dem Formular abgleichen
Prüfen Sie die erzeugte Schaltfläche im tatsächlichen Nutzerweg, einschließlich übersetzter Varianten.
- 1
Benennen Sie das Ergebnis der Betätigung, etwa „Suche starten“ oder „Anfrage senden“, passend zur tatsächlichen Funktion.
- 2
Übernehmen Sie vorhandenen sichtbaren Aktionstext in den Namen; beschreiben Sie nicht lediglich Farbe oder Symbol.
- 3
Prüfen Sie vorhandenes aria-label und aria-labelledby: Diese können die Namensbildung gegenüber alt bestimmen.
- 4
Kontrollieren Sie das veröffentlichte HTML nach dem Speichern im CMS und nach einem Sprachwechsel.
Fehlversuche vermeiden
Ein vorhandener Text ist noch kein guter Name
alt="" wie bei Dekoration
Ein bedienbarer Bildtaster braucht einen Namen. Ohne weitere wirksame Beschriftung behebt ein leeres alt den hier gezeigten Befund nicht.
Nur das Motiv beschreiben
„Akte mit Papierflieger“ würde formal Text liefern, aber die Formularaktion weiterhin verschweigen. Benennen Sie die Funktion.
value als Bildbeschriftung verwenden
Die Benennung eines normalen Submit-Inputs über value lässt sich nicht einfach auf input type="image" übertragen. Nutzen Sie hier alt für den Funktionsnamen.
Eine erfolgreiche Speicherung versprechen
Ein Name wie „Kanalakte speichern“ wäre ohne geklärte Verarbeitung eine unbelegte Aussage. Ein grüner Regeltest bestätigt keine Geschäftslogik.
Gleiche Grafik, jetzt mit Funktionsnamen
Axe meldet am selben input nach Ergänzen des alt-Attributs einen Pass für input-image-alt. Die unveränderten Bildpixel zeigen, warum der reine Sichtvergleich die Korrektur nicht belegen kann.
Verifiziert ist die Namenskorrektur an diesem Taster. Das benachbarte Textfeld, die übrigen Medien und die fachliche Formularverarbeitung sind damit nicht geprüft.
Nach der Korrektur
Element: input type="image"
alt: Kanalakte absenden
Axe input-image-alt: Pass
Bildpixel: unverändert
Formularverarbeitung: nicht geprüftPrüfgrenzen kennen
Der Scanner erkennt die fehlende Benennung
Ein technischer Pass bestätigt die Namensquelle. Die passende Formulierung verlangt Kenntnis des Formulars.
Automatisch prüfbar
- Bildschaltflächen ohne wirksame Textalternative erkennen
- Die betroffene input-Fundstelle im Seitenkontext zuordnen
- Nach der Änderung dieselbe Namensregel am Taster erneut prüfen
Im Kontext zu entscheiden
- Benennung und tatsächliche Formularaktion miteinander vergleichen
- Sichtbaren Text in der Grafik mit dem ausgegebenen Namen abgleichen
- Tastaturbedienung, Rückmeldung nach dem Absenden und den vollständigen Nutzerweg prüfen