HTML5 Accessibility
Native Elemente statt nachgebauter Optik
Überschriften, Listen, Formularfelder, Schaltflächen: vier Stellen im HTML.
Semantik sichtbar gemacht
Eine Seite, zwei Ansichten
Links liegt das sichtbare Layout. Rechts steht die Struktur, die der Browser aus denselben nativen HTML-Elementen für assistive Technik ableitet.
01 / Native Verträge
HTML liefert Rolle, Name und Beziehung
CSS gestaltet die Oberfläche. Diese vier Signale entstehen schon aus dem Markup.
<h2>Öffnungszeiten</h2><label for="mail">E-Mail</label><button>Termin buchen</button><img alt="Blaues Lastenrad">Überschriften bilden eine Gliederung
Wählen Sie Ebenen nach der Hierarchie des Inhalts, nicht nach der gewünschten Schriftgröße.
Gleiche Landmarken brauchen Namen
Gibt es mehrere nav-Bereiche, unterscheidet ein kurzer, eindeutiger Name ihren Zweck.
Native Controls bringen Tastaturverhalten mit
Nutzen Sie a, input und button für ihre vorgesehenen Aufgaben.
02 / Kopierbares Gerüst
Die Struktur bleibt im HTML lesbar
Das Beispiel enthält die sieben Landmarken aus dem Diagramm. Die benannte section wird zu einer region; das article bleibt ein eigenständiger Artikel innerhalb des Hauptinhalts.
<body>
<header>
<a href="/">Radwerkstatt Süd</a>
<nav aria-label="Haupt">…</nav>
</header>
<main id="inhalt" tabindex="-1">
<h1>Fahrrad-Inspektion</h1>
<article>
<h2>Die große Inspektion</h2>
<section aria-labelledby="ablauf">
<h3 id="ablauf">Ablauf</h3>
…
</section>
</article>
</main>
<aside aria-labelledby="leihrad">
<h2 id="leihrad">Leihrad</h2>
…
</aside>
<footer>
<nav aria-label="Rechtliches">…</nav>
</footer>
</body>03 / Prüfung
Prüfen Sie drei Wege durch dieselbe Seite
- Landmarkenliste: Sind Hauptinhalt und wiederholte Navigationen eindeutig auffindbar?
- Überschriftenliste: Beschreibt die Folge der Ebenen die sichtbare Gliederung?
- Tastatur: Erreichen Sie Links, Felder und Buttons in einer sinnvollen Reihenfolge?
Primärquellen
- W3C WAI: Page RegionsHTML-Bereiche und ihre Platzierung
- W3C APG: Landmark RegionsLandmark-Rollen, Namen und Wiederholungen
- W3C: HTML Accessibility API MappingsNormative Abbildung von HTML in Accessibility APIs
Aus dem Prüfbericht
Fünf Regeln, fünf Befunde
Kritisch Ein gestalteter Absatz statt Überschrift Regel p-as-heading
Große Schrift gliedert nur optisch. Ein h2 oder h3 bringt den Abschnitt in die Überschriftenliste.
Kritisch Ein Absatz direkt in der Liste Regel list
Zwischen ul und li gehört nichts anderes. Setzen Sie den Text vor die Liste, dann bleibt die Aufzählung sauber.
Kritisch Ein Listenpunkt außerhalb der Liste Regel listitem
Ein li hinter dem schließenden ul-Tag gehört zu keiner Liste. Verschieben Sie es vor das Ende der ul.
Kritisch Das Formularfeld hat keinen Namen Regel label
Ein Text daneben verbindet nichts. Ein label mit for macht ihn zum Namen des Feldes.
Kritisch Die Schaltfläche trägt nur ein Symbol Regel button-name
Ein aria-hidden am Icon lässt den button ohne Namen. Ein aria-label nennt die Aktion.
Zum Mitnehmen
Die Bausteine, korrigiert
Vier native Elemente an ihrer richtigen Stelle.
Korrektur in 3 Schritten ansehen
Überschrift und Liste richtig bauen
Der Titel wird zur h2, der einleitende Satz rückt vor die Liste. Zwischen ul und li steht danach nichts anderes mehr.
KorrekturvergleichSchritt 1 · HTML Vorher
<div class="titel">Leistungen</div> <ul> <p>Auswahl aus unserem Angebot</p> <li>Rahmenschweißen</li> </ul>Nachher
<h2 class="titel">Leistungen</h2> <p>Auswahl aus unserem Angebot</p> <ul> <li>Rahmenschweißen</li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm kündigt eine Überschrift und danach eine Liste mit einem Eintrag an.
Den verwaisten Listenpunkt einordnen
Ein li außerhalb der ul gehört zu keiner Liste. Verschoben zählt es mit, und die Ausgabe nennt zwei Einträge.
KorrekturvergleichSchritt 2 · HTML Vorher
<ul> <li>Rahmenschweißen</li> </ul> <li>Speichen zentrieren</li>Nachher
<ul> <li>Rahmenschweißen</li> <li>Speichen zentrieren</li> </ul>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt beim Betreten der Liste „Liste mit zwei Einträgen“.
Feld und Schaltfläche benennen
Das label gibt dem Feld seinen Namen. Das aria-label benennt die Aktion des Buttons, dessen Symbol für die Ausgabe verborgen bleibt.
KorrekturvergleichSchritt 3 · HTML Vorher
<span>Suchbegriff</span> <input id="q" type="search"> <button type="submit"><span aria-hidden="true">S</span></button>Nachher
<label for="q">Suchbegriff</label> <input id="q" type="search"> <button type="submit" aria-label="Suchen"><span aria-hidden="true">S</span></button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf die Schaltfläche. Ein Vorleseprogramm sagt „Suchen, Schaltfläche“.