Website Barrierefreiheit Check
Fünf Stellen auf einem Nutzerweg
Sprunglink, Links, Bilder, Kontrast, Formularfeld: fünf Stellen einer Seite.
Prüfkarte statt Punktzahl
Was ein guter Website-Check wirklich abdeckt
Eine Beispielseite zeigt, wo der Scan hilft – und wo ein Mensch übernehmen muss.
- 1beides
Struktur und Tastaturweg
Scan: findet etwa fehlende Bereiche oder Sprungziele.
Prüfung: folgt Fokus, Reihenfolge und sichtbarer Markierung.
- 2beides
Bild und Textalternative
Scan: erkennt ein fehlendes
alt-Attribut.Prüfung: beurteilt, ob der Text die Bildaussage ersetzt.
- 3beides
Text und Kontrast
Scan: berechnet bekannte Vorder- und Hintergrundfarben.
Prüfung: kontrolliert Zustände, Bilder und Überlagerungen.
- 4Urteil nötig
Link und Ziel
Scan: meldet Links ohne zugänglichen Namen.
Prüfung: klärt, ob „Mehr“ im Kontext verständlich ist.
- 5beides
Formular und Fehlermeldung
Scan: findet Felder ohne programmatischen Namen.
Prüfung: provoziert Fehler und beobachtet Text und Fokus.
Drei Ebenen ergeben ein belastbares Bild
Ein grüner Werkzeuglauf bedeutet nur: Im geprüften Zustand wurde keine automatisch erkennbare Verletzung gefunden.
Namen, Rollen, Attribute, Kontraste und weitere maschinenprüfbare Regeln.
Lesereihenfolge, verständliche Texte, Fokus, Zoom, Tastatur und Zustände.
Für eine umfassende Bewertung gehören vollständige Prozesse und repräsentative Seiten in den Scope.
Beispiel eines Nachweises
Ein Befund muss auffindbar und erneut prüfbar sein
Der Ausschnitt zeigt eine erfundene Fundstelle, keine Analyse einer echten Website.
- Ort
- Kontaktseite, Feld „E-Mail“
- Beobachtung
- „E-Mail“ steht daneben, ist im Code aber nicht mit dem Feld verknüpft.
- Nachweis
- Seitenausschnitt, DOM-Stelle, Browser und Prüfdatum festhalten.
- Nächste Handlung
- Sichtbares
labelverknüpfen, dann Tastatur und Ausgabe erneut prüfen.
So prüfen Sie weiter
Vom ersten Fund zur verlässlichen Entscheidung
- 1Fundstelle sichernURL, Zustand und sichtbaren Nachweis notieren.
- 2Ursache korrigierenKomponente oder Inhalt an der Quelle ändern.
- 3Erneut prüfenAutomatischen Lauf und passende Handprüfung wiederholen.
- 4Muster ausweitenGleiche Komponente und vollständigen Nutzerweg untersuchen.
Erst Scope, Stichprobe, vollständige Prozesse und menschliche Bewertung tragen eine Aussage zur gesamten Website. Ein einzelner Scan liefert Fundstellen, kein Konformitätsurteil.
Aus dem Prüfbericht
Fünf Stellen, fünf Befunde
Kritisch Das Feld im Kontaktformular Regel label
Der Platzhalter verschwindet beim Tippen und ist kein Name. Ein label mit for bleibt am Feld.
Kritisch Das Titelbild der Seite Regel image-alt
Ohne alt bleibt der Dateiname übrig. Ein Satz sagt, was das Bild zur Seite beiträgt.
Kritisch Der blasse Hinweistext Regel color-contrast
Hellgrau auf Weiß liegt unter 4,5:1. Normaler Text braucht dieses Verhältnis zum Hintergrund.
Prüfen Der Weg am Menü vorbei Regel bypass
Vor der Navigation fehlt ein Sprunglink, und der Inhalt trägt keine Rolle main. Ein Sprunglink als erstes Element hilft.
Kritisch Die Kachel-Links heißen alle gleich Regel link-name
Vier Links mit dem Wort „Mehr“ führen an vier Ziele. Der Linktext nennt das Ziel selbst.
Zum Mitnehmen
Der Nutzerweg, korrigiert
Ein Sprunglink, zwei Beschriftungen, zwei Linktexte.
Korrektur in 3 Schritten ansehen
Einen Sprunglink an den Anfang setzen
Der erste Tabstopp führt am Menü vorbei zum Inhalt. Das main-Element gibt dem Sprunglink sein Ziel.
KorrekturvergleichSchritt 1 · HTML Vorher
<body> <nav aria-label="Hauptmenü">…</nav> <div class="inhalt">…</div> </body>Nachher
<body> <a class="sprunglink" href="#inhalt">Zum Inhalt springen</a> <nav aria-label="Hauptmenü">…</nav> <main id="inhalt">…</main> </body>Markierte Zeilen wurden geändert
So prüfen Sie es Laden Sie die Seite und drücken Sie Tab. Der Sprunglink erscheint als Erstes.
Feld und Titelbild beschriften
Das label bleibt beim Tippen stehen. Der Alt-Text ersetzt das Bild, wenn es nicht geladen oder nicht gesehen wird.
KorrekturvergleichSchritt 2 · HTML Vorher
<input type="email" name="mail" placeholder="E-Mail"> <img src="titel.jpg" class="titelbild">Nachher
<label for="mail">E-Mail</label> <input id="mail" type="email" name="mail" placeholder="name@beispiel.de"> <img src="titel.jpg" class="titelbild" alt="Ladenlokal mit offener Tür">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „E-Mail“ und blenden Sie Bilder aus. Beide Texte bleiben.
Die Kachel-Links unterscheidbar machen
Gleiche Linktexte nennen kein Ziel. Ausgeschrieben ist jeder Eintrag in der Linkliste eines Vorleseprogramms unterscheidbar.
KorrekturvergleichSchritt 3 · HTML Vorher
<a href="/kurse/toepfern">Mehr</a> <a href="/kurse/malen">Mehr</a>Nachher
<a href="/kurse/toepfern">Zum Töpferkurs</a> <a href="/kurse/malen">Zum Malkurs</a>Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie nur die Linktexte. Jeder sagt, wohin er führt.