WordPress Accessibility Checker
Vom Befund zur richtigen Stelle in WordPress
Beitragsbild, Weiterlesen-Link, Theme-Farbe: drei Stellen im veröffentlichten HTML.
WordPress-Prüfschleife
Der Befund zeigt die Stelle. Die Ebene bestimmt die Korrektur.
Ein Checker untersucht das gerenderte Ergebnis. Ob die Ursache im Beitrag, in der Vorlage oder im Theme steckt, klären Sie danach.
Konzeptansicht · Redaktion
Drei Marker auf der Seite, drei Wege im System
Das Beispiel zeigt eine WordPress-Seite mit Beitragsbild, Weiterlesen-Link und Metazeile. Der Prüfbericht ordnet ihnen drei Befunde zu.
Der Bericht markiert HTML im Browser. Er kann nicht allein entscheiden, welches WordPress-Modul dieses HTML erzeugt hat.
Ursprung finden
Lesen Sie jeden Befund als Wegweiser
Öffnen Sie zuerst die kleinste Ebene, die die Fundstelle vollständig kontrolliert.
- 01FundstelleBild im Beitrag→
<img>Ändern inBildblockInhalt → Alternativtext→Danach prüfenPasst der Text zum Zweck?Dekorative Bilder markieren Sie als dekorativ. - 02FundstelleLink auf jeder Kachel→
<a>Weiterlesen</a>Ändern inBeitragsvorlageDesign → Editor → Vorlagen→Danach prüfenLinkliste ohne Kontext lesenJedes Ziel muss unterscheidbar bleiben. - 03FundstelleMetazeile auf allen Beiträgen→
.entry-metaÄndern inGlobalen StilenDesign → Editor → Stile → Farben→Danach prüfenAlle betroffenen VorlagenEine globale Farbe wirkt an mehreren Stellen.
Klassisches Theme: Fehlt „Design → Editor“, suchen Sie die Einstellung im Customizer, in den Theme-Optionen oder im Stylesheet.
Grenze des Checkers
Ein grüner Bericht beantwortet nur die automatisierten Regeln
Der Plugin-Anbieter weist selbst darauf hin, dass automatische Prüfung, manuelle Kontrolle und Korrektur zusammengehören.
AAutomatisch auffindbar
- fehlendes
alt-Attribut - auffälliger Linktext
- berechenbarer Farbkontrast
MManuell entscheiden
- beschreibt der Alternativtext den Zweck?
- ist die Reihenfolge mit Tab sinnvoll?
- funktionieren Menü, Suche und Formulare?
Aktuelle offizielle Anleitungen
WordPress.org: Accessibility CheckerWordPress.org: BildblockWordPress.org: Site Editor
Aus dem Prüfbericht
Drei Befunde, drei Quellen
Kritisch Beitragsbilder ohne Alternativtext Regel image-alt
Der Checker meldet img ohne alt. In WordPress tragen Sie den Text im Bildblock ein, rein dekorative Bilder bekommen ein leeres alt.
Kritisch Zehnmal „Weiterlesen“ auf der Startseite Regel link-name
Derselbe Linktext nennt zehn verschiedene Ziele. Der Beitragstitel wird zum Link und macht jedes Ziel eindeutig.
Kritisch Blasse Farben aus dem Theme Regel color-contrast
Metazeile und Buttonschrift stammen aus den Theme-Farben. Der Wert wird dort geändert, nicht in einzelnen Beiträgen.
Zum Mitnehmen
Die drei Befunde, korrigiert
Ein Alt-Text, ein Linktext, ein Farbwert.
Korrektur in 3 Schritten ansehen
Alternativtext am Beitragsbild ergänzen
Ein Bild mit Information bekommt einen beschreibenden Satz. Rein dekorative Bilder bekommen ein leeres alt und werden übersprungen.
KorrekturvergleichSchritt 1 · HTML Vorher
<img src="/wp-content/uploads/werkstatt.jpg" class="wp-image-84">Nachher
<img src="/wp-content/uploads/werkstatt.jpg" class="wp-image-84" alt="Tischlerin schleift eine Stuhllehne">Markierte Zeilen wurden geändert
So prüfen Sie es Blenden Sie Bilder im Browser aus. Statt des leeren Rahmens steht jetzt der Satz.
Den Beitragstitel verlinken
„Weiterlesen“ steht auf jeder Kachel gleich. Der Titel im Link nennt das Ziel und bleibt auch in einer Linkliste eindeutig.
KorrekturvergleichSchritt 2 · HTML Vorher
<h2 class="entry-title">Neue Werkstattzeiten</h2> <a class="more-link" href="/werkstattzeiten">Weiterlesen</a>Nachher
<h2 class="entry-title"> <a class="more-link" href="/werkstattzeiten">Neue Werkstattzeiten</a> </h2>Markierte Zeilen wurden geändert
So prüfen Sie es Der Beitragstitel ist jetzt anklickbar. Jede Kachel führt mit eigenen Worten zum Beitrag.
Die Metazeile aufhellen
Die blasse Schrift kommt aus dem Theme. Ein dunklerer Farbwert bringt sie über 4,5:1, Größe und Position bleiben unverändert.
KorrekturvergleichSchritt 3 · CSS Vorher
.entry-meta { color: #a3a3a3; background: #ffffff; font-size: 0.8125rem; }Nachher
.entry-meta { color: #595959; background: #ffffff; font-size: 0.8125rem; }Markierte Zeilen wurden geändert
So prüfen Sie es Drehen Sie die Bildschirmhelligkeit herunter. Datum und Kategorie bleiben lesbar.