Website-Analyse als Beispiel
Ein Bericht, vier Befunde, vier Korrekturen
Titel, Feld, Bild, Link: vier Befunde einer erfundenen Beispielseite.
Analyse zum Ansehen
Vom sichtbaren Problem bis zur geprüften Korrektur
Dieses Beispiel ist vollständig erfunden. Es zeigt, wie ein belastbarer Befund Fundstelle, Auswirkung, Korrektur und Nachprüfung miteinander verbindet.
- 1Browser-TabDer Seitentitel ist leer.
document-title - 2AnmeldefeldEin Platzhalter ersetzt die Beschriftung.
label - 3KursbildEine Textalternative fehlt.
image-alt - 4Weiterführender Link„hier“ beschreibt das Ziel nicht.
link-name
Beispielbericht · vier Auszüge
Jede Zeile beantwortet drei Fragen
Was wurde gefunden? Wen behindert es? Woran erkennen Sie nach der Korrektur, dass genau dieser Befund behoben ist?
Leerer Seitentitel
head > title<title></title>In einer Tab-Leiste oder Historie lässt sich die Seite nicht am Thema erkennen.
<title>Kursplatz anfragen</title>Mehrere Tabs öffnen. Dieser Tab nennt sein Thema.
Feld ohne Beschriftung
input#plz<input id="plz" placeholder="Postleitzahl">Der Hinweis verschwindet beim Tippen. Hilfstechnik erhält keinen verlässlichen Feldnamen.
<label for="plz">Postleitzahl</label>
<input id="plz" autocomplete="postal-code">Beschriftung anklicken. Der Fokus springt in das Feld.
Bild ohne Textalternative
img.kursbild<img src="kursraum.jpg">Die Information des Bildes fehlt, wenn es nicht gesehen oder geladen wird.
<img src="kursraum.jpg"
alt="Zwei Personen vor einem Wochenplan">Bild ausblenden. Der verbleibende Text vermittelt denselben Zweck.
Link ohne klares Ziel
a.mehr<a href="/kursplan">hier</a>Außerhalb des Satzes verrät der Linktext weder Ziel noch Inhalt.
<a href="/kursplan">Alle Termine im Kursplan</a>Nur die Linktexte vorlesen. Jeder bleibt für sich verständlich.
Was dieses Beispiel noch nicht beweist
Vier automatisierbare Befunde ersetzen keine vollständige Bewertung. Für eine belastbare Untersuchung werden Umfang und Ziel festgelegt, repräsentative Seiten ausgewählt, automatisierte und manuelle Prüfungen kombiniert und Ergebnisse nachvollziehbar dokumentiert.
Quellen für den eigenen Bericht
So prüfen Sie den Bericht
Wählen Sie einen Befund. Finden Sie darin erstens eine genaue Fundstelle, zweitens eine konkrete Auswirkung, drittens eine umsetzbare Korrektur und viertens ein beobachtbares Ergebnis für die Nachprüfung. Fehlt eines davon, ist der Befund noch keine gute Arbeitsgrundlage.
Aus dem Prüfbericht
Vier Befunde der Beispielseite
Kritisch Das Feld im Anmeldeformular Regel label
Im Beispiel trägt das Feld nur einen Platzhalter. Ein label mit for macht den Text zum Namen des Felds.
Kritisch Das Bild im Kursbericht Regel image-alt
Ohne alt liest ein Vorleseprogramm den Dateinamen. Ein Satz sagt, was das Bild zum Text beiträgt.
Kritisch Der leere Seitentitel Regel document-title
Die sichtbare Überschrift steht im Inhalt, das title-Element bleibt leer. Der Titel nennt das Thema der Seite.
Kritisch Der Link mit dem Text „hier“ Regel link-name
„hier“ nennt kein Ziel. Der Linktext steht für sich, auch außerhalb des Satzes.
Zum Mitnehmen
Die Beispielseite, korrigiert
Ein Titel, eine Beschriftung, ein Alt-Text, ein Linktext.
Korrektur in 3 Schritten ansehen
Den Seitentitel füllen
Das leere title-Element bekommt das Thema der Seite. Die sichtbare Überschrift bleibt, wie sie ist.
KorrekturvergleichSchritt 1 · HTML Vorher
<head> <title></title> </head>Nachher
<head> <title>Kurse im Herbst: Termine und Anmeldung</title> </head>Markierte Zeilen wurden geändert
So prüfen Sie es Öffnen Sie mehrere Tabs. Die Seite ist am Titel wiederzuerkennen.
Feld und Bild beschriften
Der Platzhalter verschwindet beim Tippen, das label bleibt. Der Alt-Text ersetzt das Bild, wenn es nicht ankommt.
KorrekturvergleichSchritt 2 · HTML Vorher
<input id="plz" type="text" placeholder="Postleitzahl"> <img src="kurs-01.jpg">Nachher
<label for="plz">Postleitzahl</label> <input id="plz" type="text" placeholder="z. B. 10115"> <img src="kurs-01.jpg" alt="Stuhlkreis im Kursraum mit Flipchart">Markierte Zeilen wurden geändert
So prüfen Sie es Klicken Sie auf die Beschriftung und blenden Sie Bilder aus. Beide Angaben bleiben.
Den Linktext sein Ziel nennen lassen
Ein Linktext steht für sich. Aus dem Satz herausgelöst nennt er weiterhin sein Ziel.
KorrekturvergleichSchritt 3 · HTML Vorher
<p>Alle Termine finden Sie <a href="/kursplan">hier</a>.</p>Nachher
<p><a href="/kursplan">Alle Termine im Kursplan</a></p>Markierte Zeilen wurden geändert
So prüfen Sie es Lesen Sie nur die Linktexte der Seite. Jeder sagt, wohin er führt.