Wie ein Screenreader deine Seite tatsächlich vorliest

Ein Screenreader ist kein Übersetzungsprogramm und kein Zauberkasten. Er liest den Quelltext deiner Seite von oben nach unten und spricht aus, was er dort vorfindet. Steht im Code, dass eine Zeile eine Überschrift ist, sagt er das an. Steht dort nur ein div mit großer Schrift, sagt er nur den Text. Der Unterschied klingt klein, entscheidet aber darüber, ob jemand deine Seite in dreißig Sekunden überfliegt oder sieben Minuten am Stück zuhört.

Bei 47,3 Prozent der 14.984 von uns geprüften deutschen Firmenwebsites ist der Hauptinhalt nicht ausgezeichnet, bei 29,4 Prozent fehlt die Hauptüberschrift. Beides zusammen macht eine Seite für einen Screenreader zu einem durchgehenden Textstrom ohne Gliederung. Praktisch heißt das, dass es keinen Absprung zum Inhalt gibt, keine Liste zum Anspringen und keine Ansage, an welcher Stelle der eigentliche Text beginnt. Wer nicht sieht, hört sich durch Logo, Menü und Cookie-Hinweis, bevor überhaupt klar wird, worum es auf der Seite geht.

Was das Programm tatsächlich tut

Ein Screenreader baut aus deinem HTML einen zweiten, unsichtbaren Bauplan der Seite. Jedes Element bekommt darin eine Rolle (Überschrift, Link, Schaltfläche, Grafik, Formularfeld), eine Beschriftung und einen Zustand wie aufgeklappt oder deaktiviert. Vorgelesen wird immer die Rolle zusammen mit dem Text. Aus einem Link wird "Kontakt, Link", aus einer Überschrift wird "Überschrift Ebene 2, Unsere Leistungen".

Woher die Rolle kommt, ist der ganze Trick an der Sache. Sie steckt im Tag-Namen. Ein <h1> ist eine Überschrift erster Ebene, ein <nav> ist ein Navigationsbereich, ein <button> ist eine Schaltfläche. Ein <div> dagegen trägt keine eigene Bedeutung, es ist eine leere Kiste, und darüber sagt der Screenreader nichts. Schriftgröße und Fettung ändern daran nichts, denn aus Aussehen entsteht keine Rolle.

Ein Stück Seite, so wie es ankommt

Nimm den Kopfbereich einer typischen Handwerkerseite. Optisch stimmt alles, Logo links, Menü rechts, darunter eine große Zeile mit Gewerk und Ort. Im Code sieht das oft so aus.

<div class="header">
  <div class="logo">Malerbetrieb Kern</div>
  <div class="nav">
    <a href="/leistungen">Leistungen</a>
    <a href="/kontakt">Kontakt</a>
  </div>
</div>
<div class="content">
  <div class="big-title">Malerarbeiten in Mainz-Kastel</div>
  <p>Seit 1998 streichen wir Wohnungen und Fassaden.</p>
  <div class="subtitle">Unsere Leistungen</div>
</div>

Ein Screenreader gibt das ungefähr so aus, hier in Textform nachgestellt.

Malerbetrieb Kern
Leistungen   Link
Kontakt   Link
Malerarbeiten in Mainz-Kastel
Seit 1998 streichen wir Wohnungen und Fassaden.
Unsere Leistungen

Der Screenreader sagt kein Wort über einen Kopfbereich, er meldet keine Navigation und er kündigt keine Überschrift an. Die Zeile "Malerarbeiten in Mainz-Kastel" wiegt für das Ohr genauso viel wie jeder andere Satz, obwohl sie auf dem Bildschirm vierzig Pixel hoch ist. Dieselbe Seite mit ausgezeichneten Bereichen sieht so aus.

<body>
  <a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
  <header>
    <div class="logo">Malerbetrieb Kern</div>
    <nav aria-label="Hauptnavigation">
      <ul>
        <li><a href="/leistungen">Leistungen</a></li>
        <li><a href="/kontakt">Kontakt</a></li>
      </ul>
    </nav>
  </header>
  <main id="inhalt" tabindex="-1">
    <h1>Malerarbeiten in Mainz-Kastel</h1>
    <p>Seit 1998 streichen wir Wohnungen und Fassaden.</p>
    <h2>Unsere Leistungen</h2>
  </main>
</body>

Und derselbe Abschnitt gesprochen.

Zum Inhalt springen   Link
Banner, Bereich
Malerbetrieb Kern
Hauptnavigation, Navigation, Bereich
Liste mit 2 Einträgen
Leistungen   Link
Kontakt   Link
Hauptbereich, Bereich
Überschrift Ebene 1   Malerarbeiten in Mainz-Kastel
Seit 1998 streichen wir Wohnungen und Fassaden.
Überschrift Ebene 2   Unsere Leistungen

Es ist derselbe Text und im Browser dasselbe Bild, trotzdem eine völlig andere Seite. Die zweite Fassung kannst du überspringen, anspringen und durchsuchen. Die erste kannst du nur anhören. Das tabindex="-1" am <main> ist dabei kein Zierrat, denn ohne diesen Zusatz springt in manchen Browsern zwar die Ansicht, der Vorlesepunkt aber bleibt oben stehen.

Wie sich Leute wirklich durch eine Seite bewegen

Fast niemand hört eine Website von vorne bis hinten durch. Screenreader haben Sprungtasten, und die sind das eigentliche Navigationsgerät.

NVDA unter Windows

H springt zur nächsten Überschrift, die Ziffern 1 bis 6 zur nächsten Überschrift einer bestimmten Ebene.
D springt zum nächsten Bereich, also von der Navigation in den Hauptinhalt und weiter in die Fußzeile.
K geht zum nächsten Link, F zum nächsten Formularfeld, B zur nächsten Schaltfläche, T zur nächsten Tabelle.
NVDA-Taste + F7 öffnet eine Liste aller Überschriften, Links und Schaltflächen der Seite, also ein Inhaltsverzeichnis zum Durchklicken.

VoiceOver auf dem Mac

Die VoiceOver-Taste ist Control + Wahltaste, unten als VO abgekürzt.
VO + U öffnet den Rotor. Mit den Pfeiltasten wechselst du zwischen Überschriften, Links, Formularelementen und Bereichen und springst mit der Eingabetaste dorthin.
VO + Befehlstaste + H geht zur nächsten Überschrift, VO + Befehlstaste + L zum nächsten Link.
VO + A liest ab der aktuellen Stelle weiter, die Control-Taste hält an.

Diese Tasten greifen nur, wenn es etwas zum Anspringen gibt. Auf einer Seite ohne <h1> und ohne <main> passiert bei H und D schlicht nichts. In diesem Moment hören die beiden Prozentzahlen von oben auf, Statistik zu sein.

Warum das Auge etwas anderes sieht als das Ohr hört

Vorgelesen wird die Reihenfolge im Quelltext, nicht die auf dem Bildschirm. Mit modernem CSS lassen sich beide mühelos entkoppeln. Ein order im Flex-Container, ein von Hand gesetztes grid-row oder ein position: absolute für den Angebotskasten schiebt einen Block optisch nach oben, während er im Vorlesen ganz hinten bleibt.

Der häufigste Fall ist die mobile Menüleiste, die im Code hinter dem Inhalt steht und per CSS an den oberen Rand gezogen wird. Overlays am Ende des Dokuments gehören auch dazu. Wer sieht, klickt und ist drin. Wer hört, steht dagegen noch mitten im Text und bekommt nicht mit, dass sich überhaupt etwas geöffnet hat. Die Gegenregel ist unspektakulär, nämlich die Reihenfolge im HTML so zu schreiben, wie du die Seite jemandem am Telefon vorlesen würdest, und CSS nur für die Feinheiten zu verbiegen.

Neunzig Sekunden zuhören

Du musst dafür nichts installieren, denn dein Rechner hat einen Screenreader eingebaut. Mach den Test einmal auf deiner Startseite.

Öffne deine Startseite im Browser und klick einmal oben in die Seite hinein.
Starte die Sprachausgabe. Auf dem Mac mit Befehlstaste + F5 (auf manchen Tastaturen zusätzlich mit der Fn-Taste), unter Windows mit Windows-Taste + Strg + Enter.
Lass dreißig Sekunden laufen, ohne einzugreifen.
Zähl mit, wie viele Elemente kommen, bevor der erste Satz über dein eigentliches Angebot fällt.
Spring jetzt von Überschrift zu Überschrift. Auf dem Mac mit Control + Wahltaste + Befehlstaste + H, unter Windows mit H im Scanmodus, den die Feststelltaste zusammen mit der Leertaste einschaltet.
Beende die Sprachausgabe mit derselben Tastenkombination, mit der du sie gestartet hast.

Zwei Beobachtungen sind aussagekräftig. Kommt beim Springen nach der ersten Überschrift nichts mehr, oder passiert von Anfang an gar nichts, dann fehlt die Gliederung im Code. Hörst du vor deinem ersten inhaltlichen Satz mehr als fünfzehn Links, dann fehlt ein Sprunglink zum Inhalt.

Was du danach anfasst

Ein Bedienwidget kann Kontraste anheben, Schrift vergrößern und Bewegung anhalten, eine Gliederung erfinden kann es nicht. Die entsteht im Template, und meistens reichen fünf Handgriffe.

Genau ein <main> pro Seite, und zwar um den Teil, der sich von Unterseite zu Unterseite ändert. Kopfbereich, Navigation und Fußzeile bleiben draußen.
Genau eine <h1>, die sagt, worum es auf dieser Seite geht, und nicht der Firmenname auf jeder einzelnen Unterseite.
Überschriftenebenen der Reihe nach, ohne Sprung von <h2> auf <h4>, weil aus den Ebenen die Verschachtelung im Inhaltsverzeichnis entsteht.
Stehen zwei <nav> auf einer Seite, bekommt jedes ein eigenes aria-label, sonst hört man zweimal "Navigation" und weiß nicht, welche gerade dran ist.
Ein Sprunglink als allererstes Element im <body>, der auf #inhalt zeigt und beim Tabben sichtbar wird. Blendest du ihn mit display: none aus, ist er auch für die Tastatur weg.

Wenn das im Template sitzt, lohnt der nächste Blick auf die Seiten, die Geld bringen. Das Kontaktformular ist der klassische zweite Fundort, weil dort Beschriftungen oft nur danebenstehen statt per <label for="..."> am Feld zu hängen. Der Screenreader sagt dann "Eingabefeld leer" und sonst nichts. Nimm dir dafür dieselben neunzig Sekunden, diesmal mit der Tabulatortaste von Feld zu Feld, und schreib mit, an welcher Stelle du selbst raten müsstest.