Screenreader-freundliche Seiten ohne Mehraufwand

Screenreader sind in den meisten Projekten ein blinder Fleck. Sie tauchen in keinem Designreview auf, in keinem Funktionstest, in keinem Stakeholder-Feedback. Erst wenn jemand betroffen ist oder eine Prüfung ansteht, wird das Thema sichtbar.

Dabei muss eine screenreader-freundliche Website weder kompliziert noch unattraktiv sein. Die meisten Verbesserungen entstehen nicht durch zusätzlichen Code, sondern durch saubere Grundentscheidungen.

Was ein Screenreader eigentlich tut

Ein Screenreader liest den Inhalt einer Seite vor und navigiert anhand der Struktur. Er sieht keine Farben, keine Schatten, keine optischen Hierarchien. Er sieht das, was im HTML steht, und das, was über ARIA zusätzlich beschrieben wird.

Das hat eine wichtige Konsequenz: Wenn eine Seite visuell hierarchisch wirkt, technisch aber nur aus generischen Containern besteht, kommt davon beim Screenreader nichts an. Gutes Design im Kopf reicht nicht. Es muss in den Markup wandern.

Semantisches HTML als Basis

Der wichtigste Hebel ist unspektakulär: semantisches HTML. Eine Überschrift ist eine Überschrift, kein gestyltes div. Ein Button ist ein Button, kein klickbares span. Eine Liste ist eine Liste, kein Stack aus Boxen.

In modernen React-Setups verschwindet dieses Prinzip schnell hinter Komponenten. Eine Komponente kann gut aussehen und intern trotzdem komplett unsemantisch aufgebaut sein. Hier hilft nur ein bewusster Blick: Was ist das hier inhaltlich? Und welches Element bildet das ab?

Klare Überschriftenhierarchie

Screenreader-Nutzer springen oft per Überschrift durch eine Seite. Das funktioniert nur, wenn die Hierarchie sauber ist. Eine h1 pro Seite, eine logische Folge von h2 und h3, keine übersprungenen Ebenen.

Auch hier zahlt sich Klarheit doppelt aus. Eine saubere Überschriftenstruktur hilft Screenreadern, Suchmaschinen und Lesern gleichermaßen. Wer beim Thema H1 richtig einsetzen sauber arbeitet, hat den größten Teil schon erledigt.

Bilder, Icons und Alt-Texte

Bilder ohne Alt-Text werden im schlimmsten Fall mit Dateinamen vorgelesen. Bilder mit unsinnigen Alt-Texten lenken nur ab. Dekorative Bilder gehören mit leerem alt="" markiert, inhaltliche Bilder brauchen eine kurze, sachliche Beschreibung.

Icons sind ein verwandter Fall. Wenn ein Icon allein eine Bedeutung trägt, etwa als Schaltfläche, braucht es ein zugängliches Label. Wenn es nur dekorativ ist, sollte es vor dem Screenreader versteckt werden.

Formulare ernst nehmen

Viele Websites bauen schöne Formulare und vergessen die Beschriftung. Ein Eingabefeld ohne sichtbares oder programmatisch verknüpftes Label ist für Screenreader praktisch unbrauchbar. Placeholder ersetzen kein Label, weil sie verschwinden, sobald jemand zu tippen beginnt.

Auch Fehlermeldungen müssen erkennbar sein. Eine rote Umrandung allein hilft niemandem, der die Seite nicht sieht. Eine kurze, klare Fehlermeldung im Text, programmatisch mit dem Feld verbunden, löst das Problem ohne Aufwand.

Interaktive Komponenten brauchen mehr Aufmerksamkeit

Modale Dialoge, Akkordeons, Tabs oder Dropdowns sind die typischen Stolperstellen. Sie sehen einfach aus, sind aber unter der Oberfläche oft unsauber gebaut. Fokus springt an die falsche Stelle, Tastaturbedienung fehlt, Statusänderungen werden nicht angekündigt.

An dieser Stelle reicht es nicht, semantisch zu bleiben. Hier wird ARIA wirklich nützlich, allerdings als Ergänzung, nicht als Ersatz für sauberes HTML. Wer eine eigene Komponente baut, sollte sie einmal mit Tastatur und einmal mit aktiviertem Screenreader durchklicken. Das ist die ehrlichste Form der Qualitätskontrolle.

Pragmatische Empfehlung

Screenreader-Freundlichkeit entsteht nicht aus einem großen Audit am Ende, sondern aus kleinen, sauberen Entscheidungen am Anfang. Wer Komponenten von Beginn an semantisch denkt, Überschriften strukturiert plant und Formulare sauber beschriftet, hat den Großteil ohne Mehraufwand erledigt.

Der Rest ist disziplinierte Pflege. Jedes neue Modul, jede neue Sektion sollte einmal kurz aus Sicht eines Screenreaders gedacht werden. Das kostet Minuten und spart später teure Korrekturen.