HTML Accessibility Test
Fünf Prüfungen, die Sie selbst machen können
Sprache, Titel, Feldnamen, Alt-Texte, Kontrast: fünf Stellen einer Seite.
Prüfstand im Browser
Ein HTML-Dokument, drei sichtbare Ebenen
Quelltext, Darstellung und Accessibility-Baum müssen dieselbe Aufgabe erklären.
Ebene 1 · HTML
Die Beziehungen im Code
Dokument<html lang="de">
Kontext<title>Anfrage senden</title>
Struktur<h1>Werkstatt anfragen</h1>
Bild<img alt="Mechanikerin am Motor">
Feld<label for="plz">Postleitzahl</label>
Ebene 2 · Seite
Was Menschen bedienen
Ebene 3 · Browsermodell
Was Assistenztechnik erhält
- documentAnfrage senden
- heading · level 1Werkstatt anfragen
- imageMechanikerin am Motor
- textboxPostleitzahl
- buttonAnfrage prüfen
Fünf Belichtungen
Drehen Sie nicht nur einen Regler
Jeder Handgriff macht eine andere Klasse von Fehlern sichtbar.
1 · Bedienung
Den Fokusweg abgehen
Starten Sie in der Adresszeile. Gehen Sie mit Tab vorwärts und mit Umschalt + Tab zurück. Öffnen Sie jedes Ziel mit Enter oder Leertaste.
Beobachten: sichtbarer Fokus, sinnvolle Reihenfolge, keine Tastaturfalle.
2 · Bildalternative
Bilder gezielt ausblenden
Blockieren Sie Bilder in den Website-Einstellungen von Chrome und laden Sie neu. Kontrollieren Sie zusätzlich beim
imgim Accessibility-Baum den Namen.Beobachten: der Alternativtext vermittelt Zweck oder Inhalt. Dekorative Bilder haben
alt="". Dateiname oder URL sind Warnzeichen.3 · Reflow
Auf 200 Prozent zoomen
Nutzen Sie Strg + + unter Windows oder Cmd + + unter macOS. Scrollen Sie die Seite vollständig.
Beobachten: Text bleibt vollständig, Bereiche ordnen sich neu und gewöhnlicher Seiteninhalt verlangt keinen waagerechten Bildlauf.
4 · Gliederung
Überschriften als Baum lesen
Öffnen Sie in Chrome DevTools den Accessibility-Baum oder geben Sie die Konsolenzeile unten aus. Vergleichen Sie die Liste mit den sichtbaren Abschnitten.
Beobachten: Überschriften benennen echte Bereiche und bilden eine verständliche Hierarchie. Eine übersprungene Stufe ist ein Prüfhinweis, kein automatischer WCAG-Fehler.
5 · Wahrnehmung
Text und Fläche gemeinsam messen
Wählen Sie den Text mit dem Element-Werkzeug. Öffnen Sie im Bereich „Styles“ den Farbwähler neben
colorund lesen Sie das Kontrastverhältnis.Beobachten: normaler Text erreicht 4,5:1, großer Text 3:1. Prüfen Sie auch Fokus, Symbole und Zustände, nicht nur Fließtext.
Konsolenansicht
Überschriften kompakt ausgeben
const headings = document.querySelectorAll(
'h1, h2, h3, h4, h5, h6'
);
headings.forEach((heading) => {
console.log(
heading.tagName,
heading.textContent.trim()
);
});Die Ausgabe zeigt Markup und Reihenfolge. Ob die Texte die Seite sinnvoll gliedern, entscheiden Sie beim Vergleich mit der Darstellung.
So dokumentieren Sie den Test
- Seite: URL und geprüfter Zustand.
- Auslöser: Taste, Zoomstufe oder Werkzeug.
- Beobachtung: sichtbar und reproduzierbar beschreiben.
- Fundstelle: Element, Text oder Screenshot zuordnen.
- Erwartung: nennen, was stattdessen passieren soll.
Aus dem Prüfbericht
Fünf Regeln, fünf Befunde
Kritisch Der Feldname fehlt im Test Regel label
Im Accessibility-Baum bleibt der Name leer, obwohl daneben Text steht. Ein label mit for verbindet beide.
Kritisch Die Dokumentsprache fehlt Regel html-has-lang
Ohne lang am html-Element klingt deutscher Text in der Sprachausgabe fremd. Ein lang="de" wirkt für das ganze Dokument.
Kritisch Der Dokumenttitel ist leer Regel document-title
Beim Test über mehrere Tabs bleibt die Seite ohne Thema. Ein gefülltes title-Element ordnet sie zu.
Kritisch Bilder ohne Textalternative Regel image-alt
Fehlt alt, können Dateiname oder URL vorgelesen werden. Jedes img bekommt ein alt, dekorative Bilder ein leeres.
Kritisch Grauer Text auf grauer Fläche Regel color-contrast
Bildunterschriften und Hinweise unterschreiten oft 4,5:1. Eine dunklere Textfarbe auf derselben Fläche genügt meist.
Zum Mitnehmen
Die geprüfte Seite, korrigiert
Ein Feldname, zwei Zeilen im head, eine Farbe im CSS.
Korrektur in 3 Schritten ansehen
Feldnamen verbinden
Aus dem span wird ein label mit for. Der Accessibility-Baum zeigt danach „Postleitzahl“ als Namen des Feldes.
KorrekturvergleichSchritt 1 · HTML Vorher
<span class="feldname">Postleitzahl</span> <input id="plz" type="text" inputmode="numeric">Nachher
<label class="feldname" for="plz">Postleitzahl</label> <input id="plz" type="text" inputmode="numeric">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf das Wort „Postleitzahl“. Der Cursor springt ins Feld.
Sprache und Titel im head ergänzen
Die Sprachangabe steuert die Aussprache. Der Titel benennt die Seite im Tab und im Verlauf.
KorrekturvergleichSchritt 2 · HTML Vorher
<html> <head> <title></title> </head>Nachher
<html lang="de"> <head> <title>Anfrage senden | Werkstatt Trave</title> </head>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie zwei Tabs Ihrer Seite. Beide tragen jetzt einen unterscheidbaren Namen.
Kontrast der Bildunterschrift anheben
Grau auf hellem Grau bleibt unter 4,5:1. Eine dunklere Textfarbe auf derselben Fläche reicht; Größe und Ort bleiben gleich.
KorrekturvergleichSchritt 3 · CSS Vorher
.bildunterschrift { color: #8a8f8c; background: #f3f5f1; font-size: 0.8rem; }Nachher
.bildunterschrift { color: #4a4f4c; background: #f3f5f1; font-size: 0.8rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Drucken Sie die Seite in Graustufen aus. Die Bildunterschrift bleibt gut lesbar.