WordPress-Theme einrichten

Farben und Links aus dem Theme prüfen

Buttonfarbe und Beitragslink: zwei Stellen, die das Theme vorgibt.

Website prüfen
Beispiel im Prüfbericht Markierter Befund
Markierter Befund · Kritisch · WCAG 1.4.3Bildunterschrift mit 1,17:1

Theme verstehen

So setzt WordPress Ihre Seite zusammen

Erst die Wirkung verstehen, dann an der richtigen Stelle gestalten.

Eine Seite entsteht aus vier Ebenen: Stile bestimmen die gemeinsame Gestaltung. Vorlagen ordnen die Fläche eines Seitentyps. Vorlagenteile liefern wiederkehrende Bereiche wie Kopf- und Fußzeile. Die Seite selbst liefert ihren eigenen Inhalt.
A

Stile

Wirken websiteweit auf Farben, Schrift, Layout und Blocktypen.

B

Vorlage

Bestimmt den Aufbau aller Seiten, die diese Vorlage verwenden.

C

Vorlagenteil

Kopf- oder Fußzeile erscheint in mehreren Vorlagen wieder.

D

Seiteninhalt

Gehört nur zu dieser Seite: Überschrift, Text und Medien.

Welchen Weg zeigt Ihr Adminbereich?

Der Eintrag unter „Design“ entscheidet, wo Sie weiterarbeiten.

Design Editor

Block-Theme

Der Website-Editor verwaltet Stile, Vorlagen, Vorlagenteile, Navigation und Seiten in einer Oberfläche.

Grundgestaltung
Editor › Stile
Kopf und Fuß
Editor › Muster › Vorlagenteile
Seitenaufbau
Editor › Vorlagen

Design Customizer

Klassisches Theme

Der Customizer zeigt nur die Einstellungen, die das aktive Theme bereitstellt. Menüpositionen und Widget-Bereiche können eigene Einträge unter „Design“ haben.

Grundgestaltung
Design › Customizer
Navigation
Design › Menüs
Eigener Theme-Code
in einem Child-Theme

Vier Durchgänge statt Einzelkorrekturen

  1. 01
    Theme sicher wechseln

    Unter „Design › Themes“ installieren und zuerst die Live-Vorschau öffnen. Bleibt sie leer oder fehlt Inhalt, nicht aktivieren. Nach der Aktivierung die wichtigsten Seitentypen kontrollieren.

  2. 02
    Gemeinsame Regeln setzen

    Grundfarben, Schrift und Abstände in „Stile“ oder im Customizer festlegen. Text-, Link- und Buttonfarben als echte Paare prüfen, bevor einzelne Blöcke abweichen.

  3. 03
    Struktur vor Inhalt ordnen

    Erst Kopfzeile, Navigation, Fußzeile und Vorlagen bearbeiten. Danach die Inhalte der einzelnen Seiten. So landet eine globale Änderung nicht als Kopie auf jeder Seite.

  4. 04
    Startseite und Ausgabe prüfen

    Unter „Einstellungen › Lesen“ bei Bedarf „Eine statische Seite“ wählen und die Startseite zuweisen. Anschließend speichern und die veröffentlichte Adresse in einem neuen Browserfenster prüfen.

So prüfen Sie das Ergebnis

Testen Sie die veröffentlichte Seite. Die Editor-Vorschau reicht dafür nicht.

  1. StartDie gewünschte statische Seite erscheint unter der Hauptadresse.
  2. TastaturTab erreicht alle Menüpunkte; der Fokus ist durchgehend sichtbar.
  3. LinksJeder Linktext nennt sein Ziel auch ohne den Text daneben.
  4. ReflowBei 200 Prozent Zoom bleiben Navigation und Inhalt ohne seitliches Scrollen nutzbar.

Aus dem Prüfbericht

Zwei Vorgaben, zwei Befunde

Kritisch Die Theme-Farben tragen zu wenig Kontrast Regel color-contrast

Buttonschrift und Metazeile kommen aus der Palette des Themes. Der Wert wird dort geändert, dann gilt er auf jeder Seite.

Anleitung: Textkontraste prüfen und verbessern

Zum Mitnehmen

Das Theme, korrigiert

Ein Farbwert, ein Linktext. Das Layout bleibt unberührt.

Korrektur in 2 Schritten ansehen

  1. Die Palette auf Kontrast bringen

    Die blasse Buttonschrift stammt aus einem Farbwert des Themes. Ein dunklerer Grund bringt sie über 4,5:1, Größe und Form bleiben gleich.

    KorrekturvergleichSchritt 1 · CSS

    Vorher

    .wp-block-button__link {
  color: #f0f0f0;
  background: #8fb3c9;
}

    Nachher

    .wp-block-button__link {
  color: #ffffff;
  background: #1f5273;
}

    Markierte Zeilen wurden geändert

    So prüfen Sie es Drehen Sie die Bildschirmhelligkeit herunter. Die Buttonschrift bleibt lesbar.

  2. Den Weiterlesen-Link sprechend machen

    Zehnmal derselbe Linktext nennt kein Ziel. Nehmen Sie den Beitragstitel in den Link, dann steht jedes Ziel für sich.

    KorrekturvergleichSchritt 2 · HTML

    Vorher

    <a class="wp-block-read-more" href="/oeffnungszeiten">Weiterlesen</a>

    Nachher

    <a class="wp-block-read-more" href="/oeffnungszeiten">
  Öffnungszeiten weiterlesen
</a>

    Markierte Zeilen wurden geändert

    So prüfen Sie es Lesen Sie nur die Linktexte der Startseite. Jeder nennt einen anderen Beitrag.

Markierter BefundKalibrierseite 0004 · Rechner-Einstieg
Bild 1 von 4
Seiteneinstieg „Rechner“ mit zwei Zahnrädern. Die markierte graugrüne Bildunterschrift unter den Zahnrädern ist auf ihrem Hintergrund kaum zu lesen. Volle Auflösung wird geladen …

WCAG 1.4.3

Verstoß

MarkierungDie Markierung zeigt das geprüfte Element im Seitenkontext. Technische Barrieren können im Bild selbst unsichtbar bleiben.

ÄndernErhöhen Sie den Kontrast der Bildunterschrift zu ihrem Hintergrund auf mindestens 4,5:1.

Werbung

Kostenloser Website-Barrierefreiheits-Check

Website auf Barrierefreiheit prüfen.

Technische WCAG-Warnsignale erkennen. Kritische Stellen zuerst prüfen.

Werbung

Ein letzter Schritt

Prüfen, bevor Sie gehen.

Finden Sie automatisch erkennbare Barrieren auf Ihrer eigenen Website.

Website prüfen

Kostenlos starten · keine Installation

Automatisches Screening. Tastaturbedienung und Screenreader bleiben manuelle Prüfung.