Screenreader

Screenreader geben die Inhalte einer Website über Sprache aus und ermöglichen dadurch insbesondere blinden und stark beeinträchtigten Menschen die Nutzung digitaler Inhalte. Sie können Informationen über die Struktur der Seite auswerten und beispielsweise zwischen Überschriften, Links oder Navigationsbereichen wechseln. Damit diese Funktion zuverlässig greift, muss die visuell erkennbare Struktur einer Website auch im Quellcode nachvollziehbar sein.

Erfassbare Struktur

Beziehungen zwischen Inhalten sind visuell meistens unmittelbar verständlich: Abstände zeigen zusammengehörige Elemente und unterschiedliche Schriftgrößen können Hierarchien darstellen. Diese Funktionen stehen Screenreader-Nutzer*innen nicht zwangsläufig zur Verfügung, weshalb diese zusätzlich durch die semantische Struktur vermittelt werden müssen.

In HTML werden dafür Elemente wie <header>, <nav>, <main>, <aside> oder <footer> sowie Überschriften, Listen, Links und Buttons bereitgestellt. Diese Elemente kommunizieren ihre Bedeutung an assistive Technologien, wodurch beispielsweise durch <nav> eine Navigation-Landmark erzeugt wird. Wie bereits im Kapitel „Semantik & Aufbau“ behandelt, benötigen diese keine zusätzlichen ARIA-Rollen. Wenn ein geeignetes HTML-Element bereits existiert, wird dieses grundsätzlich bevorzugt.

Überschriften & Landmarks

Screenreader können die Überschriftenstruktur ausgeben und ermöglichen es Nutzer*innen, gezielt von einer Überschrift zur nächsten zu springen. Eine nachvollziehbare Hierarchie von <h1> bis <h6> vermittelt dadurch gleichzeitig den Aufbau des Inhalts.

Landmarks funktionieren auf ähnliche Weise und kennzeichnen größere Bereiche auf der Website, beispielsweise den Hauptinhalt, die Navigation oder die Sidebar. Screenreader können diese Bereiche gezielt ansteuern und ermöglichen damit eine Navigation, die nicht auf das lineare Durchlaufen der Seite angewiesen ist.

Besitzt eine Seite mehrere Bereiche des gleichen Typs, müssen diese unterscheidbar sein, indem beispielsweise ein aria-label gesetzt wird.

<nav aria-label="Hauptnavigation">
    ...
</nav>

<nav aria-label="Inhaltsverzeichnis">
    ...
</nav>

<nav aria-label="Breadcrumbs">
    ...
</nav>

Verständliche Bezeichnungen

Interaktive Elemente benötigen eine Bezeichnung, an der ihre Funktion oder ihr Ziel erkennbar ist. Bei normalen Textlinks ergibt sich dieser bereits aus dem sichtbaren Linktext:

<a href="/barrierefreiheit/">
    Barrierefreiheit
</a>

Bei Elementen, deren Bedeutung ausschließlich visuell dargestellt wird, fehlt dieser Linktext. Ein Button, der lediglich ein Lupen-Icon enthält, kann beispielsweise visuell eindeutig als Suche erkennbar sein, liefert einem Screenreader aber keine verständliche Bezeichnung. In diesem Fall muss ein aria-label eingesetzt werden, das die Funktion des Buttons beschreibt:

<button
    type="button"
    aria-label="Suche öffnen"
>
    <svg aria-hidden="true">
        ...
    </svg>
</button>

Auf diese Weise erhält der Button die zugängliche Bezeichnung “Suche öffnen” und das dekorative SVG-Element wird mit aria-hidden="true" aus der Ausgabe entfernt, damit keine unnötigen Informationen ausgegeben werden. Es sollte bei der Benennung immer darauf geachtet werden, dass die Elemente nach ihrer Funktion und nicht nach ihrer visuellen Form benannt werden. In unserem Beispiel ist es “Suche öffnen” und nicht “Lupe”.

Bilder & Icons

Auch Bilder können Informationen vermitteln, die Screenreader-Nutzer*innen ohne eine alternative Bereitstellung von Text über ein alt-Attribut im <img>-Element nicht erhalten würden. Nicht jedes Bild benötigt eine ausführliche Beschreibung, die Funktion im jeweiligen Kontext ist entscheidend. Wenn ein Bild relevante Informationen enthält, sollte die Textalternative diese Informationen wiedergeben. Rein dekorative Bilder können mit einem leeren alt-Attribut ausgezeichnet werden:

<img src="deko.svg" alt="">

Bei Icons innerhalb der bereits beschrifteten Navigation kann es ebenfalls sinnvoll sein, diese vor Screenreadern zu verbergen. Der zugängliche Name sollte bereits über den Link beziehungsweise den Button bereitgestellt werden. Nicht jedes sichtbare Element muss vorgelesen werden, aber jede relevante Information muss zugänglich sein.

Dynamische Zustände

Bei interaktiven Navigationen verändern sich Informationen, ohne dass die Seite neu geladen wird. Ein Untermenü kann beispielsweise geöffnet oder geschlossen werden und sollte entsprechend auch für Screenreader nachvollziehbar sein. Wie bereits im Kapitel “Zustände & Interaktion” behandelt, kann ein Button dafür aria-expanded verwenden:

<button
    type="button"
    aria-expanded="false"
    aria-controls="submenue"
>
    Untermenü
</button>

Der Wert verändert sich beim Öffnen zu aria-expanded=”true”. Dadurch wird die Veränderung des Zustands auch an Screenreader vermittelt.

Zusammenfassung

Screenreader sind darauf angewiesen, dass visuell vermittelte Struktur auch im Quellcode erkennbar ist. Semantisches HTML, eine nachvollziehbare Überschriftenhierarchie und Landmarks ermöglichen es, eine Seite zu überblicken und zwischen ihren Bereichen zu navigieren. Interaktive Elemente benötigen verständliche Bezeichnungen und Bilder sowie Icons geeignete Textalternativen. Dynamische Zustände sollten ebenfalls kommuniziert werden. Durch eine klare Struktur, geeignete HTML-Elemente und verständliche Bezeichnung entsteht eine zusätzliche Navigation, die bei Bedarf gezielt durch ARIA ergänzt werden kann.

Quellen

1. Page Structure Tutorial. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
2. Landmark Regions. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
3. Providing Accessible Names and Descriptions. W3C Web Accessibility Initiative (WAI). Abgerufen am 14.09.2026.
4. § 12 Allgemeine Anforderungen an Dienstleistungen (BFSGV), Nr. 2 Buchst. e–g. Gesetze im Internet. Abgerufen am 01.11.2026.