Layer 8Ehrlicher Tech-Support

Screenreader liest Bilder und Schaltflächen nicht vor

Das Vorleseprogramm sagt nur „Grafik“ oder „Schaltfläche“. Warum die Textalternative fehlt, was WCAG 1.1.1 und 4.1.2 wörtlich verlangen.

Aufwand:
ca. 45 Min.
Voraussetzung:
Ein Screenreader (VoiceOver, TalkBack, Sprachausgabe, NVDA oder Orca), Die Entwicklerwerkzeuge des Browsers, Eine Tastatur
Gilt für:
Webseiten und Web-Anwendungen, Android-Apps, WCAG 2.2 in der Fassung vom 12.12.2024

Das Symptom

Jemand schaltet das Vorleseprogramm ein und hört sich die Seite an. Was herauskommt, klingt ungefähr so: „Grafik. Grafik. Link. Schaltfläche. Schaltfläche. Eingabefeld. Eingabefeld. Schaltfläche.“ Auf dem Bildschirm steht alles Nötige — ein Diagramm mit Beschriftung, ein Knopf mit Lupe, ein Formular mit Überschriften über den Feldern. Nur ist davon nichts angekommen. Die Seite ist nicht kaputt; sie ist stumm.

Die „Layer 8“-Wahrheit

Ein Vorleseprogramm liest nicht den Bildschirm. Es liest den Baum aus Namen und Rollen, den die Seite dem Betriebssystem übergibt — und was dort nicht eingetragen ist, existiert für diesen Weg nicht. Deshalb ist die Frage nie „warum sieht der Screenreader das Bild nicht“, sondern „was steht als Text daneben“. Erfolgskriterium 1.1.1 der WCAG verlangt genau das: Jeder Nicht-Text-Inhalt, der dem Benutzer dargeboten wird, hat eine Textalternative, die denselben Zweck erfüllt. Mit ausdrücklichen Ausnahmen — und die wichtigste davon wird ständig missverstanden.

Denn 1.1.1 verlangt gerade nicht, dass jedes Bild beschrieben wird. Reine Dekoration soll laut Ausnahme so eingebunden sein, dass sie von der assistiven Technik ignoriert werden kann. Das heißt: Ein leeres Alternativattribut ist eine richtige Antwort, keine faule. Falsch ist nur die dritte Möglichkeit, das Attribut wegzulassen. Dann steht dort weder eine Beschreibung noch die Anweisung zu schweigen, und das Vorleseprogramm behilft sich mit dem Einzigen, was da ist: dem Dateinamen. Wer je gehört hat, wie eine Seite dreizehnmal „I M G Unterstrich 4 4 7 1 Punkt p n g“ vorliest, versteht, warum die Ausnahme kein Schlupfloch, sondern eine Pflicht ist.

Die zweite Hälfte des Problems sitzt bei den Bedienelementen und heißt 4.1.2: Für alle Bedienelemente müssen Name und Rolle programmatisch ermittelbar sein, vom Benutzer setzbare Zustände und Werte programmatisch setzbar, und Änderungen daran müssen gemeldet werden. Ein Knopf, auf dem nur eine Lupe zu sehen ist, hat eine Rolle, aber keinen Namen. Ein Formularfeld, über dem optisch „Postleitzahl“ steht, hat einen Namen — nur eben nicht seinen eigenen, sondern den eines Absatzes irgendwo in der Nähe. Optische Nähe ist keine Verbindung. Sie ist eine Verabredung zwischen Gestalter und sehendem Leser, an der der Rest nicht teilnimmt.

Der reflexhafte Reparaturversuch besteht darin, ARIA-Attribute über alles zu gießen. Das W3C selbst rät als Erstes davon ab: Wenn es ein natives Element mit der gewünschten Bedeutung und dem gewünschten Verhalten gibt, soll man es nehmen, statt ein anderes umzuwidmen. Das Dokument, in dem diese Regel steht, ist inzwischen als Discontinued Draft eingestuft — die vier Regeln wurden ausdrücklich zur Weiterverwendung darin belassen, und das Verständnisdokument zu 4.1.2 sagt sachlich dasselbe: Standard-Steuerelemente erfüllen das Kriterium bereits, wenn man sie spezifikationsgemäß verwendet. Ein Kasten mit aufgeklebter Knopfrolle erfüllt gar nichts; er behauptet nur etwas, und Fokus, Tastaturbedienung und Zustandsmeldung muss man danach von Hand nachbauen. Das kann gelingen. Es gelingt nur selten, und niemand merkt es, weil es beim Danebenklicken funktioniert.

In Apps ist die Lage identisch, nur das Vokabular wechselt: Dort heißt die Textalternative contentDescription, und Androids eigene Anleitung sagt bemerkenswert genau, was hineingehört — Zweck und Ergebnis der Bedienung, nicht das Aussehen. Sie warnt sogar vor dem Überfüllen: Bei einem Knopf, der etwas absendet, gehört „Absenden“ hinein und nicht „Absenden-Knopf“, weil die Rolle ohnehin mitgesprochen wird. Und Textelemente brauchen überhaupt nichts, weil ihr Text bereits vorgelesen wird.

Was diesen Fehler so hartnäckig macht: Er ist auf dem Bildschirm unsichtbar. Keine Meldung, kein roter Rahmen, keine Fehlerkonsole. Die einzige Prüfung, die ihn zuverlässig findet, ist die, die niemand macht — die Seite einmal anhören, statt sie anzusehen. Zehn Minuten, kein Werkzeug, kein Budget. Und danach eine Liste, die sich abarbeiten lässt, statt eines Gefühls, dass „da bestimmt noch was ist“.

Die echte, verifizierte Lösung

1000 % faktenbasiert. Jeder Befehl ist real, jeder Pfad existiert. Schritt für Schritt:

  1. 1.

    Erst zuhören, statt zu schauen

    Der Befund kostet zehn Minuten und keine Software: Vorleseprogramm des Systems einschalten, Bildschirm abwenden und die eigene Seite einmal von oben nach unten durchhören. Notiere jede Stelle, an der du nur eine Gattung hörst statt eines Namens — „Grafik“, „Schaltfläche“, „Link“, „Eingabefeld“. Genau diese Liste ist die Arbeitsliste. Alles andere ist Vermutung.

  2. 2.

    Bei jedem Bild entscheiden: beschreiben oder ausdrücklich schweigen

    Ein Bild, das Information trägt, bekommt eine Alternative, die denselben Zweck erfüllt. Ein Bild, das nur schmückt, bekommt eine leere Alternative — das ist kein Schludern, sondern die von 1.1.1 vorgesehene Behandlung von reiner Dekoration. Nur das Weglassen ist in beiden Fällen falsch:

    <img src="umsatz.png" alt="Umsatz je Quartal 2025, Anstieg von 12 auf 19 Prozent">
    <img src="zierleiste.png" alt="">
    
  3. 3.

    Symbolschaltflächen einen Namen geben

    Ein Knopf mit Lupe, Mülleimer oder Zahnrad hat für das Vorleseprogramm keinen Inhalt. Der Name kommt entweder aus sichtbarem Text im Element oder aus einer Beschriftung am Element; das Symbol selbst wird dabei ausdrücklich stummgeschaltet, damit es nicht zusätzlich als Grafik auftaucht:

    <button type="button" aria-label="Suche starten">
      <svg aria-hidden="true" focusable="false"><use href="#lupe" /></svg>
    </button>
    
  4. 4.

    Formularfelder mit ihrer Beschriftung verbinden, nicht nur danebenstellen

    Ein Text, der optisch über dem Feld steht, ist für die Maschine kein Etikett — er ist ein Absatz in der Nähe. Die Verbindung entsteht über die Verknüpfung von Beschriftung und Feld. Danach liest das Vorleseprogramm beim Hineinspringen den Namen mit, statt nur „Eingabefeld“ zu melden:

    <label for="plz">Postleitzahl</label>
    <input id="plz" name="plz" type="text" autocomplete="postal-code">
    
  5. 5.

    Vor jedem ARIA-Attribut prüfen, ob es das Element schon gibt

    Die erste Regel im W3C-Dokument zu ARIA lautet: Wenn es ein natives Element mit der gewünschten Bedeutung und dem gewünschten Verhalten gibt, nimm es. Die untere Zeile bringt Name, Rolle, Fokusreihenfolge, Eingabetaste und Leertaste von selbst mit. Die obere behauptet nur eine Rolle und lässt dich den Rest nachbauen:

    <div role="button" tabindex="0">Senden</div>
    <button type="submit">Senden</button>
    
  6. 6.

    Prüfen, ob der vorgelesene Name den sichtbaren enthält

    Ein häufiger, unsichtbarer Fehler: Auf dem Knopf steht „Weiter“, hinterlegt ist aber „Schritt 3 fortsetzen“. Wer per Sprache bedient und „Weiter“ sagt, trifft nichts. Erfolgskriterium 2.5.3 verlangt deshalb für Bedienelemente mit sichtbarer Textbeschriftung, dass der Name den sichtbar dargestellten Text enthält; als bewährte Praxis steht er am Anfang des Namens.

  7. 7.

    In Apps dieselbe Prüfung mit anderen Vokabeln machen

    In einer Android-App heißt die Textalternative contentDescription. Sie beschreibt Zweck und Ergebnis der Bedienung, nicht das Aussehen, und sie bleibt bei reinen Textelementen weg, weil der Text ohnehin vorgelesen wird. Rein dekorative Elemente werden ausdrücklich als solche markiert, statt sie mit einer erfundenen Beschreibung zu füllen:

    Icon(
      imageVector = Icons.Filled.Share,
      contentDescription = stringResource(R.string.label_share),
    )
    

Häufige Fragen (FAQ)

?Braucht wirklich jedes Bild einen Alternativtext?

Einen Alternativtext braucht nicht jedes Bild, eine Entscheidung schon. Erfolgskriterium 1.1.1 der WCAG 2.2 verlangt: „All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below.“ Eine dieser Ausnahmen ist ausdrücklich der Zierrat: „If non-text content is pure decoration, is used only for visual formatting, or is not presented to users, then it is implemented in a way that it can be ignored by assistive technology.“ Es gibt also zwei richtige Antworten pro Bild — beschreiben oder ausdrücklich ignorierbar machen — und eine falsche: das Attribut ganz weglassen. Dann bleibt dem Vorleseprogramm nur der Dateiname, und der lautet erfahrungsgemäß IMG_4471.

?Warum sagt der Screenreader bei meiner Schaltfläche nur „Schaltfläche“?

Weil sie keinen maschinenlesbaren Namen hat. Erfolgskriterium 4.1.2 verlangt für alle Bedienelemente: „For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies.“ Ein Symbol ist kein Name. Wo ein Knopf nur eine Lupe, einen Mülleimer oder drei Striche zeigt, steht der Name nirgends im Text — er steckt allein im Bild, und Bilder werden nicht vorgelesen.

?Reicht es, überall ARIA-Attribute daraufzusetzen?

Meistens ist es genau der falsche Weg. Das W3C-Dokument „Using ARIA“ — inzwischen als Discontinued Draft vom 24. Februar 2026 geführt, die vier Regeln sind dort ausdrücklich zur weiteren Bezugnahme erhalten geblieben — beginnt mit der ersten Regel: „If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.“ Ein natives Knopf-Element bringt Name, Rolle, Fokus und Tastaturbedienung mit. Ein Kasten mit aufgeklebter Rolle bringt eine Behauptung mit, und die muss man Stück für Stück selbst einlösen. Die Notiz zu 4.1.2 sagt dasselbe von der anderen Seite: „standard HTML controls already meet this success criterion when used according to specification“.

?Gilt das alles nur im Browser?

Nein, es hat in Apps nur andere Namen. Androids Anleitung für barrierefreie Apps verlangt für jedes Element eine Beschreibung des Zwecks, üblicherweise im Attribut contentDescription, und rät zugleich: „Use descriptions to convey the purpose and result of the interaction, not the visual details.“ Auch die Redundanzfalle ist dort benannt: Löst ein Knopf das Absenden aus, gehört als Beschreibung „Submit“ hinein, nicht „Submit button“ — die Rolle sagt das Vorleseprogramm ohnehin selbst dazu. Für reine Textelemente braucht es gar nichts: „Android accessibility services (like TalkBack) automatically announce the text itself.“

Belege

Diese Seite ist gegen die folgenden Primärquellen geprüft – Hersteller, Standard oder Gesetzestext. Wer es nicht glaubt, muss es nicht: Da steht, wo es nachzulesen ist.

Zuletzt geprüft am . Dokumentation altert – ein Datum daneben ist der einzige ehrliche Umgang damit.

Auch zu finden unter

Verwandte Fehler