Barrierefreiheit in HTML

Zuletzt geprüft am 7. September 2026 von Daniel Weihmann

Der größte Teil dessen, was eine Seite bedienbar macht, steckt nicht in Zusatztechnik, sondern in ganz normalem HTML: das richtige Element, ein gefülltes Attribut, eine sinnvolle Reihenfolge. Diese Seite sammelt die Punkte, die im Verhältnis zum Aufwand am meisten bringen – und die in Prüfungen am häufigsten fehlen.

Sprache auszeichnen

Ein Screenreader entscheidet anhand der Sprachangabe, welche Stimme und welche Aussprache er verwendet. Fehlt sie, liest oft eine englische Stimme deutschen Text – verständlich ist das nicht mehr.

<html lang="de">
  …
  <p>Das Verfahren heißt <span lang="en">progressive enhancement</span>.</p>

Die Angabe am <html>-Element gilt für das ganze Dokument. Einzelne fremdsprachige Passagen bekommen ihr eigenes lang. Für einzelne Fachwörter, die längst eingedeutscht sind, lohnt der Aufwand nicht; für ganze Sätze und Zitate schon.

Alternativtexte für Bilder

Der alt-Text ersetzt das Bild, er beschreibt es nicht von außen. Die Frage ist deshalb nicht „was ist auf dem Bild zu sehen", sondern „was würde hier stehen, wenn es das Bild nicht gäbe".

So

<img src="/bilder/altbau.jpg"
     alt="Sanierter Altbau mit
          neuen Sprossenfenstern">

Nicht so

<img src="/bilder/altbau.jpg"
     alt="Bild altbau.jpg
          Foto Haus Fenster Sanierung">

Kein „Bild von" oder „Grafik" am Anfang – dass es ein Bild ist, sagt der Screenreader von selbst.
Rein dekorative Bilder bekommen ein leeres alt="". Damit werden sie übersprungen. Das Attribut ganz wegzulassen ist etwas anderes: dann liest der Screenreader ersatzweise den Dateinamen vor.
Steht das Bild in einem Link, beschreibt der alt-Text das Linkziel, nicht das Motiv. Ein verlinktes Logo heißt also „Startseite", nicht „Firmenlogo".
Enthält eine Grafik wichtige Zahlen oder Zusammenhänge, gehören sie zusätzlich in den Fließtext oder eine Tabelle. Ein Diagramm lässt sich in einem Attribut nicht ersetzen.

Überschriften als Gliederung

Screenreader bieten eine Liste aller Überschriften an, über die sich durch die Seite springen lässt – für viele Nutzer der wichtigste Navigationsweg überhaupt. Das funktioniert nur, wenn die Ebenen die Struktur abbilden und nicht die Schriftgröße.

So

<h1>Leistungen</h1>
  <h2>Beratung</h2>
    <h3>Erstgespräch</h3>
  <h2>Umsetzung</h2>

Nicht so

<h1>Leistungen</h1>
  <h4>Beratung</h4>
  <div class="gross">
    Erstgespräch</div>

Empfohlen ist eine einzige h1 pro Seite. Das ist eine Konvention, keine Vorschrift: Weder HTML noch die WCAG schreiben sie vor, und mit <section> wären mehrere zulässig. In der Praxis erwarten Screenreader-Nutzer trotzdem genau eine, also bleibt es der bessere Weg. Verbindlich ist dagegen, dass die Gliederung stimmt 1.3.1: keine übersprungenen Ebenen, und nichts, was nur wegen des Aussehens zur Überschrift wird. Wie groß etwas dargestellt wird, regelt CSS.

Formulare beschriften

Jedes Eingabefeld braucht ein <label>, das per for auf die id des Feldes zeigt. Das nützt nicht nur Screenreadern: Der Beschriftungstext wird dadurch zur Klickfläche, was auf dem Smartphone spürbar hilft.

<label for="mail">E-Mail-Adresse</label>
<input type="email" id="mail" name="mail"
       autocomplete="email" required>

<fieldset>
  <legend>Rückruf gewünscht?</legend>
  <input type="radio" id="ja" name="rueckruf" value="ja">
  <label for="ja">Ja</label>
  <input type="radio" id="nein" name="rueckruf" value="nein">
  <label for="nein">Nein</label>
</fieldset>

Ein placeholder ist kein Ersatz für ein Label. Er verschwindet beim Tippen, hat oft zu wenig Kontrast und wird nicht von jedem Hilfsmittel vorgelesen.
Zusammengehörende Optionen kommen in ein <fieldset> mit <legend>, sonst hört man „Ja" ohne die Frage dazu.
autocomplete mit den standardisierten Werten lässt Browser Adressen und Namen ausfüllen – eine echte Erleichterung für alle, denen Tippen schwerfällt.
Fehlermeldungen gehören in Textform neben das Feld und werden per aria-describedby damit verknüpft. Ein roter Rahmen allein genügt nicht: Farbe darf nie der einzige Informationsträger sein.

Links und Schaltflächen

Ein <a> führt woanders hin, ein <button> löst etwas aus. Beide sind von Haus aus mit der Tastatur erreichbar, haben eine Rolle und reagieren auf Enter beziehungsweise Leertaste. Ein <div onclick> hat nichts davon und müsste alles einzeln nachgebaut werden.

Auch Screenreader lesen Links am Stück als Liste vor. „Hier klicken", „mehr" und „weiterlesen" sind darin wertlos. Der Linktext soll das Ziel benennen, auch losgelöst vom Satz drumherum:

So

<a href="/preise/">
  Preise und Leistungen
</a>

Nicht so

Preise und Leistungen
<a href="/preise/">hier</a>

Tastatur und Fokus

Die schnellste Prüfung, die es gibt: die Maus weglegen und die Seite mit Tabulator, Enter und Pfeiltasten bedienen. Dabei muss jederzeit sichtbar sein, wo man gerade steht, und die Reihenfolge muss der optischen entsprechen.

Fokus niemals abschalten. outline: none ohne Ersatz ist der Klassiker unter den Barrieren. Wenn der Standardrahmen stört, gehört ein eigener her – etwa über :focus-visible, das nur bei Tastaturbedienung anspringt.
Sprunglink an den Anfang. Ein „Zum Inhalt springen" als erstes fokussierbares Element erspart es, bei jedem Seitenaufruf die komplette Navigation durchzutabben. Er darf versteckt sein, muss aber im Fokus sichtbar werden.
Kein positives tabindex. Werte über 0 mischen die Reihenfolge global durcheinander. tabindex="0" nimmt ein Element in die natürliche Reihenfolge auf, -1 macht es nur per Skript fokussierbar. Mehr braucht es fast nie.
Keine Fokusfallen. Wer in ein Dialogfenster tabben kann, muss auch wieder heraus – mit Escape und ohne Maus.

Kontrast und Textgröße

Für Text gilt ein Kontrastverhältnis von mindestens 4,5:1 1.4.3. Große Schrift kommt mit 3:1 aus, und groß heißt hier 18 Punkt oder 14 Punkt fett – also rund 24 Pixel normal, aber schon etwa 18,7 Pixel in fetter Auszeichnung. Der zweite Fall wird regelmäßig übersehen.

Für Bedienelemente gilt ein anderer Wert: Schalter, Eingabefelder, ihre Zustände und bedeutungstragende Grafiken brauchen 3:1, nicht 4,5:1 1.4.11. Wer hier 4,5:1 ansetzt, baut unnötig dunkle Rahmen und hält einen korrekten Schalter für einen Fehler. Prüfen lässt sich beides in den Entwicklerwerkzeugen jedes Browsers.

Schriftgrößen in rem statt in Pixeln angeben, damit die Grundeinstellung des Nutzers wirkt.
Text muss sich auf 200 Prozent vergrößern lassen, ohne dass Inhalt oder Funktion verloren geht 1.4.4. Waagerechtes Scrollen verbietet dieses Kriterium nicht.
Das Scrollverbot steht woanders: Der Inhalt muss sich ohne Scrollen in zwei Richtungen darstellen lassen, und zwar bei einer Breite von 320 CSS-Pixeln 1.4.10. Das entspricht 400 Prozent Zoom auf 1280 Pixeln, nicht 200. Wer nur bei 200 Prozent nach Scrollbalken sucht, hat dieses Kriterium nie geprüft.
Farbe nie allein: Ein Pflichtfeld, ein Fehler oder ein aktiver Menüpunkt braucht zusätzlich Text, Symbol oder Form.

Tabellen

Datentabellen brauchen echte Kopfzellen. <th scope="col"> und <th scope="row"> sagen dem Screenreader, zu welcher Zeile und Spalte eine Zelle gehört – ohne das ist eine Tabelle beim Vorlesen eine Zahlenkette. Eine <caption> gibt ihr einen Namen. Layout-Tabellen gibt es im Web nicht mehr; dafür ist CSS Grid da. Eine Ausnahme bleibt die HTML-E-Mail: Dort sind Tabellen für das Layout weiter üblich, weil viele Mailprogramme modernes CSS nicht beherrschen. In diesem Fall gehört role="presentation" an die Tabelle, damit sie nicht als Datentabelle vorgelesen wird.

Bewegung

Alles, was sich von selbst bewegt, blinkt oder scrollt und länger als fünf Sekunden läuft, braucht eine Möglichkeit zum Anhalten 2.2.2. Das betrifft Karussells, Laufschriften, automatisch startende Videos und animierte Hintergründe.

Unabhängig davon können Nutzer im Betriebssystem einstellen, dass sie weniger Bewegung sehen möchten. Wer Animationen einsetzt, fragt das ab:

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

Das ist keine Kür: Für Menschen mit vestibulären Störungen lösen große Bewegungen Schwindel und Übelkeit aus. Diese Seite kommt ohne Animation aus, die Abfrage kostet in Projekten mit Animation aber drei Zeilen.

ARIA sparsam einsetzen

Erste Regel von ARIA: kein ARIA verwenden, wenn ein normales HTML-Element dasselbe leistet. Ein <div role="button" tabindex="0"> ist im besten Fall so gut wie ein <button> und im Normalfall schlechter. Falsch gesetzte Rollen und Zustände richten mehr Schaden an als gar keine.

Sinnvoll ist ARIA dort, wo HTML nichts anbietet: aria-label, um mehrere <nav>-Bereiche unterscheidbar zu machen, aria-expanded an einem Aufklapp-Button, aria-live für Meldungen, die ohne Seitenwechsel erscheinen.

Prüfen

Automatische Werkzeuge finden erfahrungsgemäß nur einen Teil der Probleme – fehlende Attribute, zu schwache Kontraste, kaputte Strukturen. Ob ein Alternativtext gut ist oder eine Reihenfolge logisch, entscheidet weiterhin ein Mensch. Ein brauchbarer Ablauf:

Struktur mit dem Nu Html Checker prüfen, damit die Grundlage stimmt.
Die Seite komplett mit der Tastatur bedienen.
Auf 200 Prozent zoomen (Text bleibt vollständig?) und danach auf 400 Prozent, also rund 320 Pixel Breite – dort darf nichts waagerecht scrollen.
Ein automatisches Werkzeug laufen lassen, etwa den Contrast Analyser oder die Lighthouse-Prüfung im Browser.
Mit einem Screenreader durch die Seite gehen – unter Windows genügt für den Anfang die eingebaute Sprachausgabe. Wer einen vollständigen Prüfweg sucht, findet ihn in der Prüfanleitung von webaccessibility.de.

Was rechtlich gilt

Technischer Maßstab ist die europäische Norm EN 301 549, die die WCAG-Kriterien übernimmt. Entscheidend ist, welche Fassung im EU-Amtsblatt steht: Das ist bis heute V3.2.1 von 2021, und die verweist auf WCAG 2.1. Die neuere Fassung V4.1.1 enthält zwar WCAG 2.2, wird aber erst verbindlich, wenn sie im Amtsblatt zitiert ist. Wer heute eine Ausschreibung beantwortet, schreibt also 2.1 – wer neu baut, hält sich sinnvollerweise trotzdem schon an 2.2, denn 2.2 enthält 2.1 vollständig.

Für öffentliche Stellen gilt die Norm über eigene Verordnungen: beim Bund über die BITV 2.0, in den Ländern über die jeweilige Landesverordnung. Die EN 301 549 wirkt über diese Verordnungen, nicht an ihnen vorbei.

Für private Anbieter gilt seit dem 28. Juni 2025 das Barrierefreiheitsstärkungsgesetz, allerdings nicht für jeden. Wichtig für kleine Betriebe: Kleinstunternehmen, die Dienstleistungen anbieten, sind ausgenommen (§ 3 Abs. 3 BFSG). Als Kleinstunternehmen gilt, wer weniger als zehn Personen beschäftigt und dabei entweder höchstens 2 Millionen Euro Jahresumsatz oder höchstens 2 Millionen Euro Bilanzsumme erreicht (§ 2 Nr. 17 BFSG). Für Produkte gilt diese Ausnahme nicht, nur für Dienstleistungen. Ob ein konkretes Angebot überhaupt unter das Gesetz fällt, ist eine Einzelfallfrage – diese Seite ordnet ein und ersetzt keine Prüfung. Ausführlich, mit Fristen und Ausnahmen, steht das bei webaccessibility.de.

Das HTML-Grundgerüst zeigt, wo lang, Sprunglink und Landmarken im Dokument stehen; welches Element im Rumpf welche Rolle übernimmt, steht bei den semantischen Elementen.

Die Kriterien im Überblick

Wer eine Prüfmeldung einordnen, einem Kunden eine Entscheidung erklären oder eine Ausschreibung beantworten muss, braucht die Nummer. Diese Tabelle ordnet die Abschnitte oben den Erfolgskriterien der WCAG zu. Alle genannten gehören zur Stufe AA, die in der Praxis der Maßstab ist.

Erfolgskriterien zu den Abschnitten dieser Seite
Nr.	Kriterium	Worum es geht
1.1.1	Non-text Content	Alternativtexte für Bilder
1.3.1	Info and Relationships	Überschriften, Listen, Tabellen, Labels als echte Auszeichnung
1.3.5	Identify Input Purpose	`autocomplete` an Formularfeldern
1.4.3	Contrast (Minimum)	4,5:1 für Text, 3:1 für große Schrift
1.4.4	Resize Text	200 Prozent ohne Verlust von Inhalt oder Funktion
1.4.10	Reflow	kein Scrollen in zwei Richtungen bei 320 Pixeln Breite
1.4.11	Non-text Contrast	3:1 für Bedienelemente und ihre Zustände
2.1.1	Keyboard	alles mit der Tastatur bedienbar
2.2.2	Pause, Stop, Hide	Bewegung anhaltbar
2.4.1	Bypass Blocks	Sprunglink und Landmarken
2.4.4	Link Purpose	aussagekräftige Linktexte
2.4.7	Focus Visible	sichtbarer Fokusrahmen
2.5.8	Target Size (Minimum)	Zielgröße mindestens 24 × 24 Pixel
3.1.1	Language of Page	`lang` am `html`-Element
3.3.2	Labels or Instructions	Formularfelder beschriftet
4.1.2	Name, Role, Value	Bedienelemente mit Name und Rolle, hier kommt ARIA ins Spiel