WCAG im HTML
Fünf WCAG-Regeln stehen im HTML
Sprache, Titel, Überschrift, Feld und Schaltfläche: fünf Stellen im Quelltext.
WCAG-Spuren im Browser
HTML wird zu Orientierung
Verfolgen Sie fünf Quelltextzeilen bis zu dem, was Browser und Hilfstechniken daraus machen.
Attribute verbinden Informationen. Elemente geben ihnen eine Rolle.
<html lang="de">Die Aussprache hat eine Grundsprache
Prüfen Sie im DOM, ob der Wert zur überwiegenden Seitensprache passt.
<title>Kontakt | Ellerbach</title>Tab und Fenster tragen einen unterscheidbaren Namen
Öffnen Sie mehrere Seiten: Der Titel muss Thema oder Zweck benennen.
<h1>Kontakt</h1>Die sichtbare Gliederung bleibt im Code erhalten
Prüfen Sie Überschriftenliste, Ebenenfolge und den beschriebenen Abschnitt.
<label for="mail">E-Mail</label>Sichtbarer Text und Eingabefeld werden ein Paar
for und id müssen exakt gleich sein; Klick auf das Label setzt den Fokus.
<button>Nachricht senden</button>Name und Rolle entstehen aus nativem HTML
Der sichtbare Text wird zum zugänglichen Namen; die Rolle bleibt Schaltfläche.
Ein vollständiges, prüfbares Fragment
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, initial-scale=1">
<title>Kontakt | Zahnarztpraxis Ellerbach</title>
</head>
<body>
<a class="skip-link" href="#inhalt">
Zum Inhalt springen
</a>
<header>
<nav aria-label="Hauptnavigation">…</nav>
</header>
<main id="inhalt" tabindex="-1">
<h1>Kontakt</h1>
<p>Wir antworten innerhalb unserer Öffnungszeiten.</p>
<form action="/kontakt/senden" method="post">
<label for="mail">E-Mail</label>
<input id="mail" name="mail" type="email"
autocomplete="email" required>
<button type="submit">Nachricht senden</button>
</form>
</main>
</body>
</html>Drei Beweise gehören zur Abnahme
DOM, Validator und automatisierte Regeln prüfen Attribute und Elemente.
Tabtitel, Accessibility Tree, Fokus und Tastaturweg zeigen die Übersetzung.
Ein Mensch gleicht Name, Sprache, Gliederung und Zweck mit der echten Seite ab.
Aus dem Prüfbericht
Fünf Regeln, fünf Stellen im Quelltext
Kritisch Das html-Element ohne Sprache Regel html-has-lang
Der Text ist deutsch, das Dokument nennt keine Sprache. lang="de" gehört an das html-Element Ihres Seitengerüsts.
Kritisch Der Titel im head ist leer Regel document-title
Die sichtbare Überschrift ersetzt den Dokumenttitel nicht. Ein gefülltes title-Element benennt das Thema der Seite.
Kritisch Ein Absatz sieht aus wie eine Überschrift Regel p-as-heading
Große fette Schrift in einem p gliedert nichts. Leitet die Zeile einen Abschnitt ein, wird sie zur h3.
Kritisch Ein Eingabefeld ohne Beschriftung Regel label
Der Text daneben gehört technisch nicht zum Feld. Ein label mit for verbindet beide im HTML.
Kritisch Eine Schaltfläche nur aus Symbol Regel button-name
Das Icon trägt aria-hidden, der Button bleibt namenlos. aria-label benennt die Aktion im HTML.
Zum Mitnehmen
Das HTML-Gerüst, korrigiert
Drei kleine Änderungen im Quelltext. Die Gestaltung bleibt unberührt.
Korrektur in 3 Schritten ansehen
Sprache und Titel im Kopf setzen
Das html-Element nennt die Hauptsprache des Textes. Das title-Element nennt das Thema, damit der Browser-Tab zuzuordnen ist.
KorrekturvergleichSchritt 1 · HTML Vorher
<!doctype html> <html> <head> <title></title> </head>Nachher
<!doctype html> <html lang="de"> <head> <title>Imkerei Sommerfeld: Sorten und Öffnungszeiten</title> </head>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie die Seite in einem zweiten Tab. Der Tab trägt jetzt den Titel statt der Adresse.
Den gestalteten Absatz zur Überschrift machen
Die Zeile leitet einen Abschnitt ein. Als h3 erscheint sie in der Überschriftenliste; die Klasse hält die Gestaltung.
KorrekturvergleichSchritt 2 · HTML Vorher
<h2>Unsere Sorten</h2> <p class="gross">Sommerblüte</p> <p>Der helle Honig aus der ersten Tracht.</p>Nachher
<h2>Unsere Sorten</h2> <h3 class="gross">Sommerblüte</h3> <p>Der helle Honig aus der ersten Tracht.</p>Markierte Zeilen wurden geändert
So prüfen Sie es Springen Sie mit einem Vorleseprogramm von Überschrift zu Überschrift. Der Abschnitt taucht dort auf.
Feld und Schaltfläche benennen
Ein label mit for gibt dem Feld seinen Namen. aria-label gibt der Schaltfläche das Wort, das das Symbol nicht liefert.
KorrekturvergleichSchritt 3 · HTML Vorher
<span>E-Mail</span> <input id="mail" type="email"> <button type="submit"> <svg aria-hidden="true"><use href="#icon-senden"></use></svg> </button>Nachher
<label for="mail">E-Mail</label> <input id="mail" type="email"> <button type="submit" aria-label="Newsletter abonnieren"> <svg aria-hidden="true"><use href="#icon-senden"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort E-Mail. Springt der Cursor ins Feld, sitzt die Verbindung.