Website Accessibility Audit
Jeder Befund braucht eine Fundstelle
Formularfeld, ARIA-Wert, Bild: drei Befunde mit Ort und Korrektur.
Audit beauftragen
Ein belastbares Angebot zeichnet die Prüfgrenze
Nicht „die Website“ wird pauschal geprüft. Das Angebot muss zeigen, welche Ansichten, Prozesse, Zustände und Produktversionen in den Befundbericht eingehen.
Lieferkette
Ein Audit endet erst mit prüfbarer Evidenz
Umfang
Ansichten, Prozesse und Zustände stehen fest.
Prüfung
Automatische und manuelle Verfahren sind benannt.
Befund
Fundstelle, Kriterium und Reproduktion sind belegt.
Nachtest
Der korrigierte Stand erhält einen neuen Status.
AUD-014 · Feld ohne zugänglichen Namen
<!-- Fundstelle -->
<span>Telefonnummer</span>
<input id="telefon" type="tel">
<!-- Korrektur -->
<label for="telefon">Telefonnummer</label>
<input id="telefon" type="tel">Zum Einfügen
Klausel für Ihre Leistungsbeschreibung
Die Platzhalter zwingen Umfang, Methode, Bericht und Nachtest in eine überprüfbare Form.
Prüfgegenstand: [Produkt, URL, Version]
Prüfziel: [Standard und Stufe]
Stichprobe: [Anzahl] Ansichten gemäß beigefügter Liste;
Auswahlbegründung und Zufallsanteil werden dokumentiert.
Prozesse: [Abläufe] einschließlich aller Schritte.
Zustände: [Fehler, geöffnet, angemeldet, weitere].
Verfahren: [Werkzeuge und Versionen] plus manuelle Prüfung
mit [Tastatur, Vorleseprogramm, Vergrößerung].
Bericht: ein Datensatz je Befund mit Fundstelle, Referenz,
Evidenz, Reproduktion, Empfehlung und Zuständigkeit.
Nachtest: [enthalten / Umfang] gegen [Version oder Datum];
Status je Befund: behoben, teilweise behoben oder offen.So prüfen Sie es
Der Nachtest liest denselben Befund erneut
Lassen Sie sich vor Beauftragung einen anonymisierten Beispielbefund und die leere Nachtest-Spalte zeigen. So erkennen Sie, ob aus dem Bericht tatsächlich Arbeitspakete werden.
Aus dem Prüfbericht
Drei Befunde mit Ort und Regel
Kritisch Das Kontaktformular Regel label
Zwei Felder tragen nur benachbarten Text. Ein label mit for verbindet die Beschriftung mit dem Feld.
Kritisch Der Aufklapper auf der Detailseite Regel aria-valid-attr-value
aria-expanded trägt einen erfundenen Wert. Erlaubt sind allein true und false.
Kritisch Die Bildergalerie Regel image-alt
Hochgeladene Bilder kommen ohne alt in die Seite. Jedes img braucht alt, dekorative Bilder ein leeres.
Zum Mitnehmen
Die drei Befunde, korrigiert
Drei kleine Änderungen, jede im Nachtest nachprüfbar.
Korrektur in 3 Schritten ansehen
Feld und Beschriftung verbinden
Nähe im Layout ist keine Verbindung im HTML. label und for stellen sie her, ohne das Aussehen zu verändern.
KorrekturvergleichSchritt 1 · HTML Vorher
<span>Telefonnummer</span> <input id="telefon" type="tel">Nachher
<label for="telefon">Telefonnummer</label> <input id="telefon" type="tel">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf „Telefonnummer“. Der Cursor springt ins Feld.
Den ARIA-Wert richtigstellen
aria-expanded kennt nur true und false. Ein eigener Wert beschreibt den Zustand nicht und wird ignoriert.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" aria-controls="details" aria-expanded="closed"> Details anzeigen </button>Nachher
<button type="button" aria-controls="details" aria-expanded="false"> Details anzeigen </button>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt an der Schaltfläche jetzt „reduziert“ statt gar nichts.
Galeriebilder beschriften
Ein informatives Bild bekommt einen Satz, ein dekoratives ein leeres alt. Beide brauchen das Attribut.
KorrekturvergleichSchritt 3 · HTML Vorher
<img src="galerie-01.jpg"> <img src="trennlinie.svg">Nachher
<img src="galerie-01.jpg" alt="Werkstatt mit Hobelbank und Werkzeugwand"> <img src="trennlinie.svg" alt="">Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie Bilder aus. Das Galeriebild hinterlässt seinen Satz, die Trennlinie verschwindet.