HTML a11y
Sprache, Titel und Überschriften auszeichnen
html-Element, title im head, Zwischentitel im Text: drei Stellen.
Semantisches Röntgenbild
HTML hat zwei sichtbare Oberflächen
Menschen sehen die Seite. Hilfstechnik liest die Struktur, die der Browser daraus baut.
Modelle für Tagestour, Hüttentour und Fernwanderung.
Alle Modelle ansehenAccessibility Tree
- documentWanderrucksäcke | Beispielshop
- bannerBeispielshop
- navigationHauptnavigation
- mainHauptinhalt
- heading, level 1Wanderrucksäcke
- linkAlle Modelle ansehen
- button, collapsedGrößenhilfe
- contentinfoFußbereich
Ein groß gesetzter div kann wie eine Überschrift aussehen. Erst h1 oder h2 liefert die Ebene, nach der Menschen mit Hilfstechnik navigieren. Dasselbe gilt für nav, main, Links und Schalter.
Gleiche Pixel, anderer Vertrag
Was der Elementname mitbringt
Statische Gegenüberstellung, keine bedienbaren Formulare.
Generische Container
<div class="titel">Versand berechnen</div>
<div class="feld">PLZ</div>
<div class="aktion">Berechnen</div>- Überschriftenebenefehlt
- Feldnamefehlt
- Tab und Tastaturfehlen
Native Elemente
<h2>Versand berechnen</h2>
<label for="plz">PLZ</label>
<input id="plz" inputmode="numeric">
<button type="button">Berechnen</button>- Überschriftenebenelevel 2
- FeldnamePLZ
- Tab und Tastatureingebaut
Vier native Abkürzungen
Diese Arbeit übernimmt der Browser
<a href="…">Rolle: LinkTastatur: Tab, Enter<button>Rolle: SchalterTastatur: Tab, Enter, Leertaste<label> + <input>Name: sichtbares LabelBedienung: Fokus durch Klick aufs Label<details> + <summary>Zustand: offen oder geschlossenTastatur: ohne eigenes SkriptDas vollständige Gerüst
Eine kleine Seite mit klarer Struktur
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Wanderrucksäcke | Beispielshop</title>
<link rel="stylesheet" href="/styles.css">
</head>
<body>
<a class="skip-link" href="#inhalt">Zum Inhalt springen</a>
<header>
<a href="/">Beispielshop</a>
<nav aria-label="Hauptnavigation">
<ul>
<li><a href="/rucksaecke/">Rucksäcke</a></li>
<li><a href="/zelte/">Zelte</a></li>
<li><a href="/kontakt/">Kontakt</a></li>
</ul>
</nav>
</header>
<main id="inhalt" tabindex="-1">
<h1>Wanderrucksäcke</h1>
<p>Modelle für Tagestour, Hüttentour und Fernwanderung.</p>
<section aria-labelledby="beratung">
<h2 id="beratung">Passform und Tragesystem</h2>
<p>Der Hüftgurt liegt auf dem Beckenkamm auf.</p>
</section>
<details>
<summary>Größenhilfe</summary>
<p>Messen Sie die Rückenlänge vom Nacken bis zum Beckenkamm.</p>
</details>
</main>
<footer>
<nav aria-label="Rechtliches">
<a href="/impressum/">Impressum</a>
<a href="/barrierefreiheit/">Barrierefreiheit</a>
</nav>
</footer>
</body>
</html>lang="de"legt die Standardsprache des Dokuments fest.
<title>benennt Tab, Verlauf und Lesezeichen.
viewportenthält keine Zoomsperre.
h1 → h2bildet die inhaltliche Hierarchie ab, unabhängig von der Schriftgröße.
Abnahme ohne Maus
So prüfen Sie es
- 1
Drücken Sie einmal Tab. Der Sprunglink wird sichtbar.
- 2
Aktivieren Sie ihn. Der Fokus wechselt zum Hauptinhalt.
- 3
Öffnen Sie in DevTools den Accessibility Tree und vergleichen Sie die Bereiche.
- 4
Prüfen Sie die Überschriftenliste: Ebene und Reihenfolge folgen dem Inhalt.
- 5
Vergrößern Sie auf 200 Prozent. Text und Bedienung bleiben vollständig erreichbar.
Aus dem Prüfbericht
Drei Stellen, drei Befunde
Kritisch Das Dokument nennt seine Sprache nicht Regel html-has-lang
Ohne lang am html-Element wählt die Vorlesestimme eine unpassende Aussprache für deutschen Text. Ein lang="de" am Wurzelelement genügt.
Kritisch Der Browser-Tab bleibt namenlos Regel document-title
Ein leeres title-Element lässt die Seite im Tab und im Verlauf ohne Thema. Der Titel nennt Seite und Anbieter; die sichtbare h1 ersetzt ihn nicht.
Kritisch Zwischentitel ohne Überschriftenebene Regel p-as-heading
Ein groß gesetzter Absatz gliedert die Seite optisch, aber nicht im HTML. Wer nach Überschriften springt, findet ihn nicht.
Zum Mitnehmen
Das Dokument, korrigiert
Zwei Zeilen im head, eine im Inhalt.
Korrektur in 2 Schritten ansehen
Sprache und Titel im head setzen
Das lang-Attribut gibt der Vorlesestimme die Aussprache. Der Titel benennt Seite und Anbieter, damit der Tab im Wechsel erkennbar bleibt.
KorrekturvergleichSchritt 1 · HTML Vorher
<!doctype html> <html> <head> <meta charset="utf-8"> <title></title> </head>Nachher
<!doctype html> <html lang="de"> <head> <meta charset="utf-8"> <title>Wanderrucksäcke | Ausrüstung Trave</title> </head>Markierte Zeilen wurden geändert
So prüfen Sie es Sehen Sie auf den Browser-Tab. Dort steht jetzt der Titel statt der Adresse.
Den Zwischentitel als Überschrift ausgeben
Der Absatz wird zur h2. Klasse und Gestaltung bleiben; die Seite gewinnt einen Eintrag in der Überschriftenliste.
KorrekturvergleichSchritt 2 · HTML Vorher
<h1>Wanderrucksäcke</h1> <p class="zwischentitel">Passform und Tragesystem</p> <p>Der Hüftgurt liegt auf dem Beckenkamm auf.</p>Nachher
<h1>Wanderrucksäcke</h1> <h2 class="zwischentitel">Passform und Tragesystem</h2> <p>Der Hüftgurt liegt auf dem Beckenkamm auf.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Überschriftenliste eines Vorleseprogramms. „Passform und Tragesystem“ steht jetzt darin.