Screenreader-Vorschau
Für einen Screenreader ist eine Seite ein einziger langer Satz. Geben Sie eine Adresse ein, um diesen Satz als Transkript zu erhalten, ihn mit einer Stimme Ihres Geräts abzuspielen und zu sehen, welche Elemente ohne Namen angesagt werden.
Von zwei Dimensionen zu einer
Mit den Augen erfassen Sie eine Seite auf einmal: Logo oben links, Menü quer darüber, Artikel in der Mitte, Seitenleiste rechts. Sprache kann nicht „auf einmal“. Ein Screenreader wie NVDA, JAWS, VoiceOver oder TalkBack geht das HTML in Quelltextreihenfolge durch und spricht ein Element nach dem anderen, mit der Rolle des Elements vor seinem Text: „Überschrift Ebene 2, Preise“, „Link, Kontakt“, „Eingabefeld, E-Mail, erforderlich“.
Niemand hört sich das von Anfang bis Ende an. Geübte Nutzer navigieren nach Typ. Eine Taste springt zur nächsten Überschrift, eine andere listet alle Links der Seite auf, eine weitere geht direkt zum Hauptbereich. Für sie sind Rolle und Name jedes Elements also die ganze Benutzeroberfläche. Ein Button, der auf dem Bildschirm eindeutig aussieht, aber keinen Text hat, wird als „Schalter“ angesagt, und mehr hören sie nicht.
Wie das Transkript entsteht
Unser Server lädt die Seite einmal herunter und geht den <body> so durch, wie es Hilfssoftware tut. Der <title> der Seite kommt zuerst, denn er wird beim Öffnen einer Seite als Erstes gesprochen. Danach wird jedes Element zu einer Zeile:
- Landmarks: Banner, Navigation, Hauptbereich, ergänzender Bereich, Fußinformationen, Suche, dazu benannte Regionen und Formulare.
- Überschriften mit ihrer Ebene, Links mit ihrem Ziel, Buttons mit ihrem Zustand (erweitert, reduziert, gedrückt).
- Formularfelder mit Typ und Zustand: „Kontrollkästchen, nicht aktiviert“, „Kombinationsfeld“, „Eingabefeld, E-Mail, erforderlich“.
- Bilder, Frames, Listen mit der Anzahl ihrer Einträge und Tabellen mit der Anzahl ihrer Zeilen und Spalten.
Den Namen jedes Elements ermitteln wir in der Reihenfolge, die Browser verwenden: aria-labelledby, dann aria-label, dann die native Quelle (alt, <label>, Textinhalt), dann title. Alles mit hidden, aria-hidden="true" oder einem Inline-display:none wird weggelassen, ebenso der Inhalt eines geschlossenen <details>. Bilder mit alt="" werden übersprungen und als dekorativ gezählt.
Drücken Sie auf Anhören, und die Sprachausgabe Ihres Browsers liest die Zeilen vor. Rollen werden auf Englisch gesprochen. Der Inhalt wird mit einer Stimme gesprochen, die zum lang-Attribut der Seite passt, sofern Ihr Gerät eine hat, und die Stimme wechselt bei Passagen, die ein eigenes lang tragen.
Was die Markierungen bedeuten
| Markierung | Was ein Zuhörer hört | Lösung |
|---|---|---|
| no alt | „Unbeschriftetes Bild“, manchmal gefolgt vom Dateinamen | Einen alt-Text ergänzen, oder alt="", wenn das Bild Dekoration ist |
| empty link, no name | Nur „Link“ oder „Schalter“ | Sichtbarer Text, ein alt am Icon oder aria-label |
| no label | „Eingabefeld“ ohne Frage | <label for="…">, verknüpft mit der id des Felds |
| placeholder only | Ein Hinweis, der womöglich gar nicht vorgelesen wird | Ein echtes Label neben dem Feld |
| vague text, repeated text | Fünfmal „Weiterlesen“, jedes Mal mit anderem Ziel | Das Ziel im Link benennen |
| skips a level, empty | Eine Gliederung mit Lücken | Von h2 zu h3 gehen, nie direkt zu h4 |
| no title, no headers | „Frame“; Tabellenwerte ohne ihre Spalte | title am <iframe>; <th>-Zellen |
Eine rote Markierung bedeutet, dass das Element überhaupt keinen Namen hat. Eine gelbe bedeutet, dass es einen hat, der aber nicht weiterhilft. Die Zusammenfassung meldet außerdem eine fehlende Seitensprache, ein fehlendes <h1> und einen fehlenden Hauptbereich und sagt Ihnen, wie viele Elemente vor dem Hauptinhalt stehen. Ist diese Zahl hoch, beginnt jeder Besuch auf jeder Seite mit demselben langen Vortrag Ihres Menüs.
Drei Arten, die Filter zu nutzen
- Wählen Sie Überschriften und lesen Sie nur diese Liste. Sie sollte wie ein Inhaltsverzeichnis der Seite funktionieren.
- Wählen Sie Links. Jede Zeile muss ohne den umgebenden Satz verständlich sein.
- Wählen Sie Felder und Buttons, schließen Sie die Augen und drücken Sie auf Anhören. Sie sollten erkennen können, was jedes Bedienelement von Ihnen will.
Wählen Sie eine beliebige Zeile, um das Vorlesen dort neu zu starten. Mit dem Geschwindigkeitsregler bekommen Sie ein Gefühl für das Tempo, das geübte Nutzer wählen, oft weit über normaler Sprechgeschwindigkeit.
Eine Annäherung, mit bekannten Lücken
Das Transkript stammt aus dem HTML, so wie der Server es geschickt hat. Wir führen kein JavaScript aus und wenden keine Stylesheets an, daher fehlen per Skript eingefügte Inhalte, und per CSS-Klasse versteckte Inhalte werden trotzdem vorgelesen. Die Hördauer ist eine Schätzung auf Basis von etwa 170 Wörtern pro Minute. Sehr lange Seiten enden nach 1.200 Elementen. Jeder echte Screenreader hat außerdem eigene Begriffe und Tastenkürzel, testen Sie also vor einer Veröffentlichung mit mindestens einem davon. NVDA ist unter Windows kostenlos, VoiceOver ist in macOS und iOS enthalten.
Häufige Fragen
Ist das dasselbe wie ein Test mit NVDA oder VoiceOver?
Nein. Es zeigt Reihenfolge, Rollen und Namen, mit denen ein Screenreader arbeitet, und dort liegen die meisten Probleme. Interaktives Verhalten wie sich öffnende Menüs, Live-Ansagen oder Fokus, der in einen Dialog springt, bildet es nicht nach. Nutzen Sie es, um Probleme schnell zu finden, und bestätigen Sie dann mit einem echten Screenreader.
Warum liest die Stimme meine Seite mit dem falschen Akzent?
Entweder gibt die Seite mit <html lang="…"> keine Sprache an, oder auf Ihrem Gerät ist keine Stimme für diese Sprache installiert. Die Statuszeile über dem Transkript nennt die verwendete Stimme. Echte Screenreader verhalten sich genauso.
Warum fehlt ein Teil des Texts meiner Seite im Transkript?
Wahrscheinlich wurde er nach dem Laden der Seite per JavaScript eingefügt, oder er steht in einem geschlossenen <details>-Element oder einem aria-hidden-Container. Wir lesen nur das HTML, das der Server ausliefert.
Was sollte ein Screenreader bei einem Logo ansagen?
Den Namen der Organisation und, wenn das Logo ein Link ist, wohin er führt: alt="Acme, home page". Schreiben Sie nicht nur „Logo“, und lassen Sie das alt nicht weg, sonst wird der Link mit seinem Dateinamen oder seiner Adresse angesagt.
Wie viele Links vor dem Hauptinhalt sind zu viele?
Es gibt keine feste Grenze, denn ein Skip-Link und ein <main>-Element erlauben, sie mit einem Tastendruck zu überspringen. Ohne diese beiden wird alles über eine Handvoll Elemente spätestens ab der dritten Seite ermüdend.