Barrierefreiheit bei WordPress-Webseiten – Plugin WP Accessebility

Aktualisiert am 5. August 2025

Anlässlich des in Kraft getretenen Barrierefreiheitsstärkungsgesetzes (BFSG) habe ich das WordPress-Plugin WP Accessibility (also Zugänglichkeit oder Barriefreiheit) genauer unter die Lupe genommen. Es enthält wirklich sehr praktische Tools und was die Einstellungen im Detail bedeuten, erkläre ich in diesem Artikel.

WP Accessibility – ein bewährtes Plugin für mehr Barrierefreiheit

Wenn du mit WordPress arbeitest und dich mit Barrierefreiheit beschäftigst, entdeckst du  früher oder später das Plugin WP Accessibility ↑, es ergänzt deine Seite um sinnvolle Funktionen wie Skiplinks, Kontrastumschalter, ARIA-Anpassungen und Zugangshinweise für Formulare – besonders hilfreich, wenn dein Theme nicht barrierefrei entwickelt wurde.

Mit der integrierten Toolbar können Besucher z. B. Schriftgröße und Farben selbst anpassen. Das ersetzt zwar keine vollständige Barrierefreiheit im Code, bietet aber einen schnellen Einstieg – gerade für bestehende Websites.

Was genau bedeuten die verschiedenen Einstellungen bei WP-Accessebility?

Einstellungen für Direktlinks

Aktiviere Direktlinks
Direktlinks sind Skip-Links. To Skip heißt überspringen oder auslassen.

Skip-Links helfen Benutzern von Screenreadern, vom Anfang einer Seite zu einem anderen Abschnitt der Seite zu springen. Wenn du Inhalte visuell aufnehmen kannst, überfliegst du oft Inhalte, z.B. liest du nur die fett gedruckten Bemerkungen oder die Bildunterschriften. Sehbehinderte können dies nicht, hier sind diese Directlinks hilfreich.

Mit Hilfe von Sprungmarken kannst du z.B. die  Hauptnavigation überspringen und kommst zum Hauptinhalt der Seite.

Zeige Direktlinks immer an
In diesem Kontext bezieht sich Direktlinks auf interne Sprungmarken oder Ankerlinks, die z. B. auf eine bestimmte Stelle innerhalb einer Seite führen – meist für Screenreader-Nutzer oder Tastaturnavigation wichtig.

Was macht die Einstellung Zeige Direktlinks immer an?
Aktiviert: Die Direktlinks (z. B. „Zum Inhalt springen“) sind für alle sichtbar, also auch für Nutzer ohne Screenreader.
Deaktiviert: Die Direktlinks sind nur sichtbar für Screenreader-Nutzer oder beim Navigieren mit der Tastatur (z. B. wenn man Tab drückt).

Aber: Je nach Verwendung deines Themes kannst du diese Hinweise dauerhaft sehen (aktiviert). Bei meinem Theme – Generate Press – funktioniert die dauerhafte sichtbare Aktivierung nicht.

Barrierefreiheit-Werkzeugleiste

Diese Funktionalität ist offensichtlich noch nicht ganz im Deutschen angekommen.

• Enable Accessibility toolbar
  Aktiviert die Barrierefreiheits-Werkzeugleiste – diese Toolbar bietet Nutzern z. B. Optionen für Schriftgröße und Kontrast.

  

• Include Font size button
  Fügt der Toolbar einen Button hinzu, um die Schriftgröße zu vergrößern oder zu verkleinern.
  Gut zu wissen: STRG + / CMD + vergrößert die Ansicht des gesamten Fensters (inklusive Bilder und Layout), ändert aber nicht die tatsächliche Schriftgröße. Wenn du die Schriftgröße über ein Schaltfläche des Plugins veränderst, wird nur der Text selbst größer oder kleiner.
• Include Contrast button
  Fügt einen Kontrast-Schalter hinzu, mit dem Nutzer z. B. zu einem dunkleren oder helleren Farbschema wechseln können (für bessere Lesbarkeit).
• Test with Grayscale
  Schaltet die Seite für Admins auf Graustufen, um den Kontrast besser zu testen.
  Nur für eingeloggte Administratoren sichtbar – nicht für Besucher!
• Toolbar location (optional)
  Als Standard ist die Toolbar links mittig sichtbar.
  Wenn du sie an anderer Stelle haben möchtest, dann kannst du eine CSS-ID ansprechen: z. B. mit #main-menu an ein bestimmtes Element anheften.
  Über Element untersuchen → kannst du rausfinden, welche ID in deinem CSS die richtige wäre.
  Was ist CSS? CSS ist eine Sprache, mit der du das Aussehen einer Website gestalten kannst – zum Beispiel Farben, Schriftarten, Abstände und Layouts.
• Schriftgröße der Werkzeugleiste
  Stellt die Standard-Schriftgröße für die Toolbar selbst ein (also nicht für den Inhalt der Website).
• Benutze ein alternatives Stylesheet für Schriftgrößenanpassungen
  Verwendet ein spezielles CSS, um bessere Kontrolle über die Schriftgrößenänderung zu ermöglichen – z. B. bei Themes, die sonst nicht gut skalieren.
• Unterstützung der Barrierefreiheit-Werkzeugleiste als Shortcode oder Widget
  Ermöglicht, die Toolbar manuell per Shortcode [accessibility_toolbar] oder Widget einzufügen – z. B. im Footer oder in der Sidebar.
  Was ist ein Shortcode? Ein Shortcode ist ein kurzer Platzhalter in eckigen Klammern, mit dem du in WordPress ganz einfach komplexe Funktionen oder Inhalte einfügen kannst – z. B. ein Kontaktformular oder eine Bildergalerie.
• Place toolbar on opposite side of screen
  Platziert die Toolbar auf der anderen Bildschirmseite (also z. B. rechts statt links).
• Werkzeugleiste auf kleinen Bildschirmen verbergen
  Blendet die Toolbar auf Smartphones und kleinen Tablets aus, um die mobile Ansicht schlanker zu halten.

Accessibility Fixes: Korrekturen Zugänglichkeit

Oft sind die Standardeinstellungen hinderlich für Nutzer von Screenreadern. Z.B. kann man Schriften nicht harmonisch vergrößern mit  STRG+ oder Command+ oder bei einer leeren Suche passiert nichts, so dass die Nutzer nicht wissen, ob eine Suche ausgelöst wurde oder nicht = es gibt also keinerlei Feedback.

• Füge den Beitragstitel zum Weiterlesen-Link hinzu
  Ergänzt Weiterlesen-Links automatisch mit dem Beitragstitel: Statt nur Weiterlesen → Weiterlesen: Element untersuchen…
  Kann Screenreader-Nutzern helfen, den Kontext zu verstehen. Ich habe mich dagegen entschieden, weil meine Überschrift aussagefähig ist und auch klickbar. Hier würde ich gern mal ein Feedback von jemandem haben, der einen Screenreader nutzt.
  Über einen Kommentar freue ich mich.

  

• Prevent links from opening in new windows
  Verhindert, dass Links automatisch in einem neuen Fenster oder Tab geöffnet werden, überschreibt also target=”_blank”.

Warum kann target=”_blank” problematisch sein? Weil ohne Ankündigung der ein Link sich in einem neuen Fenster öffnet. Das kann für Screenreader-oder Tastaturnutzer und für Menschen mit kognitiven Einschränkungen verwirrend sein. Auch verhindert es das Wischen auf mobilen Endgeräten.

Ein neues Tab zu öffnen heißt, das der Zurück-Butten des Browsers nicht wie erwartet funktioniert und vielleicht jemand nicht bemerkt, dass er oder sie sich in einer neuen Umgebung befindet. Screenreader melden es oft nur unauffällig, machmal kommt eine Sprachinformation, die aber leicht überhört wird: … öffnet sich in einem neuen Fenster.

Übrigens: Meine Kunden wollen oft, dass sich fremde Websites in neuen Tabs öffnen (aus Sorge, die Besucher an andere Websites zu verlieren).

• Force search error on empty search submission:
  Diese Einstellung erzwingt eine Fehlermeldung, z.B. Bitte geben Sie einen Suchbegriff ein.
  

Die Einstellung Zeigt eine Fehlermeldung, wenn ein Besucher eine leere Suche abschickt bezieht sich auf folgendes Szenario:

Du klickst auf das Suchfeld und drückst Enter, ohne etwas eingegeben zu haben – eine leere Suche also. Was passiert standardmäßig (ohne diese Einstellung)? Es wird die Startseite ohne Hinweis angezeigt, dass die Suchanfrage fehlerhaft war. Das ist verwirrend – Nutzer sehen entweder eine leere oder eine volle Seite und verstehen nicht, warum.

• Entferne den Tabindex
  Entfernt den tabindex-Wert aus HTML-Elementen, der oft unerwünschte Tab-Reihenfolgen verursacht.

Was ist der tabindex?
Bestimmte Elemente im Quelltext wurden durchnummeriert, also etwa: tab-1, tab-2, tab-3 etc. Das erzwingt, dass du mit dem Tabulator (Tab)-Taste von einem Element zum nächsten springst – zum Beispiel von einem Link (tab-1) zum nächsten Eingabefeld (tab-2). Der tabindex bestimmt die Reihenfolge. Diese Technik ist sollte mit Bedacht eingesetzt werden und bei vielen alten Websites führt das durch fehlerhafte Umsetzung in die Irre.

• Force underline on links
  Erzwingt Unterstreichungen bei Links im Fließtext, damit sie visuell besser erkennbar sind.
  Ausgenommen sind Links in Navigationsmenüs (<nav>).

Leider werden Links in der Footernavigation auch unterstrichen. Wenn du möchtest, dass deine Links im Fließtext unterstrichen werden, kannst du das über CSS steuern, z.B.
.entry-content p a {text-decoration:underline;}

• Zeige eine Außenlinie um Keyboard aktivierte Elemente
  Aktiviert eine sichtbare Fokusanzeige (z. B. Umrandung), wenn man Elemente mit der Tastatur erreicht (Tab). Wichtig für Nutzer ohne Maus.
  Farbe der Außenlinie: Die Farbe der Fokus-Umrandung – z. B. #dfdfdf (hellgrau).
  Du kannst hier eine Kontrastfarbe angeben, z. B. #000000 (schwarz) oder #007acc (blau).

  

Accessibility Features

„Enable content features to improve site accessibility“ – also Einstellungen, die den Inhalt barrierefreier machen:

• Ausführliche Beschreibung UI
  Zeigt in der Benutzeroberfläche (UI = Userinterface) eine Möglichkeit an, eine detaillierte Bildbeschreibung (long description) anzugeben – speziell für Screenreader gedacht.
• Button, um einen Layer über dem Bild aufzurufen
  Fügt einen sichtbaren Button hinzu, mit dem man eine ausführliche Beschreibung des Bildes in einem Overlay (Layer) anzeigen kann.
  – Besonders hilfreich für komplexe Bilder, Diagramme etc.
• longdesc für Beitragsbilder unterstützen
  … wird von modernen Browsern kaum noch unterstützt.
  Aktiviert das longdesc-Attribut bei Beitragsbildern.
  – Das longdesc-Attribut verweist auf eine separate Seite oder URL, auf der eine ausführliche Beschreibung des Bildinhalts steht.
  – Wird von Screenreadern nur teilweise unterstützt, aber kann sehr nützlich seinIch konnte hier keine veränderte Funktionalität bei WordPress entdecken.
• Add toggle to view image alt text in comments and post content
  Fügt eine Schaltfläche hinzu, mit der man sich den alt-Text von Bildern im Kommentarbereich oder Beitrag anzeigen lassen kann.
  – macht den Alt-Text auch für sehende Nutzer sichtbar (z. B. zur Kontrolle oder bei schlechtem Kontrast).

  

• Enable Content Summaries
  Fügt automatische oder manuelle Zusammenfassungen (Summaries) für verschiedene Inhaltsarten hinzu – barrierefrei und oft auch nützlich für SEO. Über dem Inhalt erscheint ein farblich hinterleger Bereich, in dem du anmoderierst, was deine Leser in dem betreffenden Beitrag erwartet.

  

  

Testing & Admin Experience

Nur der Vollständigkeit halber erklärt. Ich habe hier nichts aktiviert.

These change the admin experience or help with testing, sind also Funktionen, die das Backend/Redaktionserlebnis betreffen oder Testzwecken dienen.

• Include alt attribute in media library searches
  Ermöglicht die Suche nach dem alt-Text in der Mediathek.
• Disable top-level adminbar logout link
  Entfernt den „Abmelden“-Link ganz oben in der Adminleiste.
  * War früher wegen Tastaturnavigation problematisch – ab WP 6.5 behoben.
• Disable fullscreen block editor by default
  Deaktiviert den Vollbildmodus im Block-Editor (Gutenberg) beim ersten Öffnen. Praktisch, wenn du lieber gleich die Seitenleiste etc. sehen willst.
• Allow h1 in the headings block
  Erlaubt im Überschriften-Block das Setzen von <h1>-Tags.
  WordPress schränkt dies manchmal ein, um mehrere H1s auf einer Seite zu vermeiden – diese Option hebt das auf.
• CSS-Prüfung aktivieren
  Fügt im Editor Tests für CSS-Konflikte oder Fehler hinzu.
  Kann beim Programmieren helfen, wenn du Themes entwickelst.
• Statistics Tracking
  Wählt aus, ob und für wen Plugin-Statistiken über das Verhalten gesammelt werden dürfen.
  Disabled: Kein Tracking (empfohlen bei Datenschutzbedenken)
  All Visitors: Tracking auf der Live-Site bei allen Nutzern
  Site Administrators: Tracking nur für eingeloggte Admins – meist zum Testen gedacht

Entferne Title-Attribute

Title Attribute erzeugen kleine Fähnchen bei Mouse-over, d.h. es wäre bei Schlagwortwolken (tag clouds) eher hinderlich, weil zu viele Informationen.

• Entferne Title-Attribute von: Schlagwort-Wolken

Könnt ihr euch noch erinnern? So sahen die Schlagwortwolken aus (mit Title-Attributen, die bei Mauskontakt ein Fähnchen erzeugen):

Farbkontrast-Tester

Helligkeits-Kontrast-Test

Du kannst hier RGB-Farbwerte eintragen und sichtbar machen, wie stark sich zwei Farben im Helligkeitswert unterscheiden — also wie gut Text (z. B. #545454, ein dunkles Grau) auf einem Hintergrund (#FFFFFF, Weiß) lesbar ist.

Das Verhältnis 7.57:1 bedeutet z.B.: die Helligkeit der helleren Farbe (#FFFFFF) ist etwa 7,57-mal so hoch wie die der dunkleren Farbe (#545454). Je größer dieser Wert, desto besser der Kontrast.

Schwellenwerte:
7:1 (AAA) ist der strengste Standard für Barrierefreiheit (WCAG 2.1). Wird dieser Wert erreicht oder überschritten, gilt der Kontrast als sehr gut, auch für Menschen mit Sehbehinderungen.
4,5:1 (AA) ist der Mindeststandard für normalen Text.