Website-Analyse-Software
Drei Werkzeuge, drei verschiedene Fragen
Schaltflächen, Bilder, ARIA-Werte: was ein Barriere-Prüfer im HTML findet.
Analyse-Landkarte
Dieselbe Website erzeugt vier verschiedene Messbilder
Website-Analyse ist kein einzelner Bericht. Entscheidend ist, ob Sie Wege, Ladeverhalten, Auffindbarkeit oder Barrieren untersuchen wollen.
Inspektion, Reparatur und Ersatzteile aus einer Werkstatt.
Termin anfragenNutzungsanalyse
Welche Seiten und Wege werden genutzt?
- Beispiel
- Google Analytics
- Grenze
- Ein Abbruch erklärt nicht, ob die Bedienung scheiterte.
Performance
Was verzögert Laden, Darstellung oder Reaktion?
- Beispiel
- Lighthouse Performance
- Grenze
- Eine schnelle Schaltfläche kann trotzdem namenlos sein.
Suchanalyse
Für welche Suchen erscheint eine Seite?
Werkstatttermine und Reparaturservice im Überblick.
- Beispiel
- Google Search Console
- Grenze
- Auffindbarkeit belegt keine Tastaturbedienung.
Barrierefreiheitsprüfung
Welche prüfbare Regel scheitert an welcher Stelle?
mainheading „Werkstatt“button „“Name fehlt- Beispiel
- regelbasierter Accessibility-Scanner
- Grenze
- Nicht jeder Barriere liegt eine automatisierbare Regel zugrunde.
Von der Frage zum Auftrag
Schreiben Sie zuerst auf, was Sie entscheiden wollen
Ein Bericht ist nur hilfreich, wenn seine Messung zur nächsten Entscheidung passt.
So prüfen Sie die Auswahl
Ein Formular, vier Berichte
- Frage notieren: Formulieren Sie vor dem Start genau eine Entscheidung.
- Zustand festhalten: Nennen Sie URL, Browser und geöffneten Seitenzustand.
- Grenze lesen: Prüfen Sie, welche Aussage der Bericht ausdrücklich nicht trägt.
- Beleg sichern: Übernehmen Sie Fundstelle, Messbedingung und nächsten Prüfschritt.
Für Barrierefreiheit gilt: Automatische Werkzeuge unterstützen die Prüfung. Menschliches Urteil bleibt erforderlich.
Aus dem Prüfbericht
Drei Befunde eines Barriere-Scans
Kritisch Symbolschaltflächen im Bericht Regel button-name
Ein Knopf nur mit Icon steht ohne Namen im Bericht. aria-label benennt die Aktion dahinter.
Kritisch Bilder ohne Attribut Regel image-alt
Ein img ohne alt ist ein eindeutiger Befund. Jedes Bild braucht das Attribut, dekorative ein leeres.
Kritisch ARIA-Werte, die kein Browser kennt Regel aria-valid-attr-value
Ein erfundener Wert für aria-expanded fällt sofort auf. Erlaubt sind allein true und false.
Zum Mitnehmen
Die drei Befunde, korrigiert
Ein Name, ein gültiger Wert, zwei Alt-Texte.
Korrektur in 3 Schritten ansehen
Die Symbolschaltfläche benennen
Das Symbol ist für Vorleseprogramme verborgen. aria-label liefert das Wort, das im Bericht als Name fehlt.
KorrekturvergleichSchritt 1 · HTML Vorher
<button type="button" class="drucken"> <svg aria-hidden="true"><use href="#icon-druck"></use></svg> </button>Nachher
<button type="button" class="drucken" aria-label="Bericht drucken"> <svg aria-hidden="true"><use href="#icon-druck"></use></svg> </button>Markierte Zeilen wurden geändert
So prüfen Sie es Gehen Sie mit Tab auf den Knopf. Ein Vorleseprogramm sagt „Bericht drucken, Schaltfläche“.
Den ARIA-Wert richtigstellen
aria-expanded kennt nur true und false. Ein erfundener Wert beschreibt den Zustand nicht und fällt in jedem Bericht auf.
KorrekturvergleichSchritt 2 · HTML Vorher
<button type="button" aria-controls="filter" aria-expanded="open"> Filter </button>Nachher
<button type="button" aria-controls="filter" aria-expanded="true"> Filter </button>Markierte Zeilen wurden geändert
So prüfen Sie es Ein Vorleseprogramm sagt an der Schaltfläche jetzt „erweitert“.
Bilder im Diagrammbereich beschriften
Ein Diagramm nennt seine Kernaussage, ein Trenner bekommt ein leeres alt. Beide brauchen das Attribut.
KorrekturvergleichSchritt 3 · HTML Vorher
<img src="verlauf.png"> <img src="trenner.svg">Nachher
<img src="verlauf.png" alt="Besuche je Monat: von 800 auf 1400"> <img src="trenner.svg" alt="">Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie Bilder aus. Das Diagramm hinterlässt seinen Satz, der Trenner verschwindet.