Barrierefreiheit bei WordPress-Webseiten – Tipps und Plugins

Zu modernem und suchmaschinenoptimiertem Webdesign zählt die bestmögliche Barrierefreiheit einer Webseite. Schwerhörige, Blinde oder Menschen mit anderen körperlichen Einschränkungen sollen nach den „Richtlinien für barrierefreie Webinhalte (WCAG) 2.0“ des „W3C“ (World Wide Web Consortium) Webseiten vorfinden, die bestimmte Vorgaben erfüllen und die Nutzung erleichtern.

Barrierefreiheit ist nicht länger ein Nice-to-have – sie ist Pflicht. Die Anforderungen steigen, neue gesetzliche Regelungen wie das Barrierefreiheitsstärkungsgesetz (BFSG) verlangen ab 2025 konkrete Maßnahmen. In diesem Tutorial zeige ich dir die häufigsten Probleme, wie du sie in WordPress löst – und mit welchen Tools du Barrieren findest und behebst. Wenn du Hilfe bei der Behebung von Schwachstellen deiner Website in Bezug auf Barrierefreiheit suchst, melde dich gerne bei mir.

---

Wahrnehmbarkeit: Inhalte müssen verständlich und sichtbar sein

Barrierefreiheit beginnt bei der Darstellung: Texte, Links und visuelle Inhalte müssen von allen Nutzergruppen erfasst werden können – auch von Screenreader-Usern (was ist ein Screenreader?) oder Menschen mit eingeschränktem Sehvermögen.

Worauf du achten solltest:

• Vermeide leere Links und Buttons: Jeder klickbare Bereich braucht einen sichtbaren oder zumindest maschinenlesbaren Text (etwa per „aria-label“).
• Icons brauchen Kontext: Wenn du Icons als Buttons nutzt, z. B. für Suche oder Navigation, gib ihnen ein beschreibendes „aria-label“.
• Titel und Tooltips ergänzen: Nutze title-Attribute für zusätzliche Orientierung, z. B. bei Formularfeldern oder Bildern.
• Bildbeschreibungen setzen: Jedes <img>-Element sollte ein alt-Attribut enthalten. Bei dekorativen Bildern kannst du alt=““ setzen.
• Tool mit dem du das prüfen kannst: WAVE

---

Kontraste: Farben lesbar machen

Eine der häufigsten Barrieren auf Websites ist zu geringer Kontrast zwischen Text und Hintergrund. Menschen mit eingeschränktem Sehvermögen oder Farbenblindheit können Inhalte so kaum wahrnehmen.

Mindestanforderungen nach WCAG 2.1:

• 4,5:1 Kontrast bei normalem Text
• 3:1 Kontrast bei großem Text (mind. 18 pt oder 14 pt fett)

Was du tun kannst:

Verwende gut lesbare Farben, vor allem bei Buttons, Menüs und Footer-Texten und vermeide Schrift auf Bildern – oder sorge dort für ausreichend Kontrast.

Tool mit dem du das prüfen kannst: WebAim Contrast Checker

---

Struktur: Logische Überschriften und semantisches HTML

Die richtige Struktur ist entscheidend für Orientierung und Verständlichkeit. Nicht nur für Menschen, sondern auch für Suchmaschinen und Screenreader.

Typische Fehler bei der Struktur deiner Seite:

• H1-Überschrift fehlt ganz oder kommt mehrmals vor
• H4-Überschrift über H2-Überschrift gesetzt (falsche Hierarchie)
• Überschriften werden als reine Formatierung missbraucht

Achte darauf:

• Verwende nur eine H1 pro Seite – in der Regel der Seitentitel.
• Überschriften hierarchisch gliedern: H1, dann H2, dann H3, dann H4 usw.
• Verwende Überschriften Tags wenn möglich ausschließlich für die Strukturierung deiner Inhalte.
• Verwende echte h1 bis h6-Elemente, keine normalen div oder p-Tags mit größerer Schrift. Was du auch tun kannst, aber nicht für die Strukturierung deiner Texte und Inhalte.

WordPress-Besonderheit:

Gerade bei WordPress Plugins oder Theme-Elementen kommt es immer wieder vor, dass H1-H6 Überschriften für automatisch eingefügt werden (zB als Überschrift über Galerien, Slidern, Formularen, etc.). Oft hast du dann keine Möglichkeit diese Elemente zu entfernen oder ersetzen, weil sie ansonsten deine korrekt ausgezeichnete Struktur stören. Tatsächlich musst du mit diesem Missstand leben oder aber dir den Aufwand machen nach Alternativen zu suchen, die keine H-Überschriften verwenden oder dir die Möglichkeit geben selbst festzulegen, wie Headlines in ihren Elementen ausgezeichnet werden. Im Notfall verzichtest du auf die Funktion ansich, was aber für viele keine oder eine nicht zufriedenstellende Option ist.

---

Navigation & Landmarks

Barrierefreiheit bedeutet auch, dass Nutzer schnell und einfach finden, was sie suchen – egal ob mit Maus, Tastatur oder Screenreader. Hier kommen sogenannte Landmarks ins Spiel.

Empfehlung:

Nutze HTML5-Strukturelemente mit ergänzenden ARIA-Rollen:

<header role="banner">
<nav role="navigation">
<main role="main">
<footer role="contentinfo">

So erkennen Screenreader z. B. sofort, wo sich der Hauptinhalt befindet. Wichtig: Nur eine main-Landmark pro Seite! Tastatur-Nutzer freuen sich zusätzlich über „Skip to Content“-Links, um Navigationselemente zu überspringen.

---

Formulare barrierefrei machen

Formulare sind eine der größten Hürden für viele Nutzer, vor allem, wenn sie nicht korrekt ausgezeichnet sind. Das betrifft Kontaktformulare, Newsletter-Anmeldungen oder Checkout-Prozesse im Shop.

Darauf bitte achten:

• Jedes Eingabefeld braucht ein zugehöriges <label>, entweder sichtbar oder per „aria-label“.
• Auch <select>-Felder und Checkboxen brauchen eine eindeutige Beschriftung.
• Vermeide Platzhaltertexte (placeholder) als alleinige Orientierung, sie verschwinden beim Eintippen.

Beispiel:

<label for="plz">Postleitzahl</label>
<input id="plz" name="plz" type="text">

---

Tastaturbedienung: Alles muss erreichbar sein

Alle interaktiven Elemente (Menüs, Links, Buttons, Formulare) müssen ohne Maus erreichbar sein. Das bedeutet: mit der Tabulator-Taste durchklickbar, mit Enter oder Space aktivierbar.

Häufige Probleme:

• Versteckte Dropdown-Menüs sind nicht fokussierbar
• Buttons haben keinen sichtbaren Fokusstil
• Modale Fenster lassen sich nicht mit Tastatur schließen

Teste deine Seite: Öffne sie und nutze nur die Tab-Taste. Kommst du überall hin? Wenn nicht, dann nachbessern.

---

Zoomen & Skalieren: Nutzerkontrolle nicht blockieren

Viele mobile Seiten deaktivieren das Zoomen – sei es aus Designgründen oder wegen unbedachter Meta-Tags. Für Barrierefreiheit ist das ein No-Go.

Vermeide folgenden Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Richtig wäre:

<meta name="viewport" content="width=device-width, initial-scale=1">

So bleibt die Skalierbarkeit erhalten, wichtig z. B. für Nutzer mit Sehbehinderung.

---

WordPress-Themes und Barrierefreiheit

WordPress Webseiten können ebenso barrierefrei gestaltet werden wie alle anderen Webseiten auch. Dafür bedarf es entweder manueller Optimierung oder aber der Nutzung spezialisierter Plugins oder Themes.

Viele Themes für WordPress sind bereits out of the box relativ barrierefrei, allerdings nicht nach den neuesten Richtlinien. Grund dafür ist, dass gestalterisch ja heutzutage wenig Grenzen gesetzt sind und somit viele Punkte in den Händen der Website-BetreiberInnen liegen und nicht durch die technische Basis bestimmt werden. Dennoch sollte beim Einrichten der WordPress Webseite gezielt nach barrierefreien Themes gefiltert werden.

Tipp: Wer Themes von Drittanbietern nutzt, sollte darauf achten, dass diese auf Barrierefreiheit Wert legen.

---

Empfohlene Tools und WordPress-Plugins für mehr Barrierefreiheit

WP Accessibility

Ein Klassiker unter den Barrierefreiheits-Plugins. Fügt automatisch sinnvolle Funktionen wie Skiplinks, Kontrastumschalter, ARIA-Anpassungen, Zugangshinweise zu Formularen und mehr hinzu. Sehr gut für bestehende Themes, die nicht barrierefrei gebaut sind.

Früher oder später begegnet jeder, der sich mit WordPress und Barrierefreiheit auseinandersetzt dem Plugin WP Accessibility von Joe Dolson (im Folgenden: WPA).

WPA installiert eine Toolbar, mit der Schriftgröße und Farben geändert werden können. Somit wird eine Barrierefreiheit durch manuelles Eingreifen des Users ermöglicht. Es ist also keine native Optimierung der Barrierefreiheit für alle. Das könnte man als Nachteil ansehen. Auf der anderen Seite ist es auch eine einfache Möglichkeit in bestehende Designs schnell eine Option für Barrierefreiheit einzubauen.

Neben der Toolbar liefert WP-Accessibility sehr wichtige Optimierungen für zugänglichere Websites.

Leistungen von WPA im Überblick:

• Der Einbau von Skip Links, mit denen benachteiligte Personen Linklisten (Menülinks, Logolink etc.) zu Beginn einer aufgerufenen Site überspringen können, die den Lesefluss behindern
• Aria Landmark Roles, die helfen zu wichtigen Bereichen auf einer Webseite per Tastendruck zu navigieren
• Bilder können detailreich beschrieben werden über das Beschreibungsfeld
• Den „Weiterlesen“- oder „mehr“-Links den Beitragstitel hinzufügen, damit erkennbar wird, wohin der Link führt
• Den Fokus auf Links per CSS für a:focus nachrüsten, damit User leichter erkennen können, an welchem Link sie sich gerade befinden
• Entfernung überflüssiger Title-Attribute, damit Screenreader bei Links nicht den Title Attribut vorlesen, der durch WordPress automatisch genau gleich gesetzt wird, wie der Linktext ohnehin heißt
• Links können immer mit Unterstreichung dargestellt werden, damit sie leichter erkennbar sind
• Entfernen von Tabindex auf Formularfeldern, damit nicht wild hin und her gesprungen, sondern ein stringentes navigieren durch Formularfelder ermöglicht wird
• Entfernung von Target-Attributen aus Links, damit der Navigationsflow durch die Site nicht unterbrochen wird durch ein in einem neuen Tab geöffneten Fenster
• Hinzufügen von Labels für WordPress-Suchformular, damit leichter erkannt werden kann, welche Felder abgefragt werden
• und weitere…

–

One Click Accessibility

Einsteigerfreundliches Plugin mit einfacher Konfiguration. Ermöglicht Kontrastumschaltung, Tastaturnavigation, Schriftvergrößerung, Sprunglinks etc. – alles über eine Sidebar.

–

Accessibility Checker (von Equalize Digital)

Prüft deine Inhalte direkt im WordPress-Editor (Gutenberg und Classic) auf Barrierefreiheit. Zeigt detaillierte Hinweise auf Probleme und Lösungen. Kostenlose Basisversion verfügbar – Pro-Version bietet zusätzliche Features.

–

axe DevTools

Kostenloses Browser-Plugin für Chrome und Firefox. Analysiert Websites auf Barrierefreiheitsprobleme nach WCAG-Standards. Sehr hilfreich zur schnellen Fehlersuche direkt im DOM.

–

Google Lighthouse

Integriert in die Chrome DevTools – liefert eine Bewertung deiner Seite in Sachen Performance, SEO und Barrierefreiheit. Besonders nützlich für erste Einblicke.

–

WAVE Web Accessibility Evaluation Tool

Browserbasiertes Tool, das dir auf einen Blick zeigt, welche Elemente problematisch sind. Farblich hervorgehobene Hinweise und praktische Verbesserungsvorschläge.

–

NVDA (NonVisual Desktop Access)

Kostenloser Screenreader für Windows. Ideal, um deine Website so zu erleben wie ein Nutzer mit Sehbehinderung. Empfohlen zum realistischen Testen der Navigation.

–

VoiceOver (macOS/iOS)

In allen Apple-Geräten eingebaut. Aktiviere VoiceOver auf dem Mac oder iPhone/iPad, um die Screenreader-Nutzung deiner Website zu simulieren.

---

10 Tipps um WordPress Webseiten barrierefrei zu gestalten

1. Bilder beschreiben und lesbar machen

Bilder auf einer WordPress-Seite benötigen eine Beschreibung. Dadurch können Sehbehinderte sich vorstellen, was abgebildet ist. Hier bietet WordPress eine gute Möglichkeit zur detaillierten Beschreibung einzelner Bilder. In der WordPress Mediathek finden sich Optionen zur Bildbeschreibung, die von Screenreadern erfasst wird. Hat man das Bild ausgewählt, bietet sich die Möglichkeit, einen Titel oder Alternativtext festzulegen, der Nutzern vorgelesen wird.

Der Titel wird angezeigt, wenn der Nutzer mit dem Mauscursor über das Bild fährt. Diese Option richtet sich eher an sehbehinderte Nutzer. Blinden bietet sich die Option den Text vorlesen zu lassen. Titel und Alternativtext dürfen dann identisch sein, denn die Hilfssoftware von Blinden liest jeweils nur eines von beiden vor. Plugins wie „Access Monitor“ schlagen an, wenn beide Texte gleich sind.

Das folgende Bild ist ideal eingebaut. Der Name des Bildes, der Alternativtext und die Bildunterschrift können über einen Screenreader dem User Infos geben, was zu sehen ist.

Generelles für Bilder

Blinde benötigen grundlegende Informationen, weil sie Bilder nicht sehen können. Deshalb ist es wichtig zu beschreiben, was überhaupt auf dem Bild sichtbar ist. Eine allgemeinere Bildbeschreibung des Bildaufbaus ist hilfreich. Weiter unterstützen Bildunterschriften das Verständnis. Zudem erleichtern Bildunterschriften jedem Nutzer das Verständnis und sollten deshalb idealerweise für jeden sichtbar sein.

Es findet sich auch ein Eingabefeld für die Beschriftung. Dieses dient dazu, einem Bild eine Beschreibung hinzuzufügen, die von Screenreadern erfasst wird. Dadurch können auch Blinde oder stark sehbehinderte Personen den Inhalt eines Bildes schneller erfassen.

2. Links beschreiben

Nutzergruppen, die Screenreader verwenden, benötigen Links, die beschreiben, wohin die Onlinereise nach dem Klick geht. Über eine eindeutige Bezeichnung freuen sich auch Webseiten-Besucher ohne Sehschwäche. Es ist einfach angenehmer zu wissen, wohin der Link führt, bevor man anklickt. Überraschungen sind im Internet eher unbeliebt und können dazu führen, dass Nutzer eben nicht auf den Link klicken. D.h. der Linktext sollte beschreibend sein.

Schlechte Linktexte: Link, Mehr, Weiter, hier …

3. Strukturierung der Inhalte mit H-Tags

Für Screenreader, Webcrawler oder andere technische Assistenten ist es einfacher, wenn Inhalte gut strukturiert sind. Seitentitel, Zwischenüberschriften und Untertitel sollten durch Tags wie H1, H2 oder H3 gekennzeichnet sein. Ein gut strukturierter und sauberer HTML-Code des WordPress-Themes ist hier entscheidend. Für diese Optionen sind keine Programmierkenntnisse erforderlich und auch keine speziellen Plugins. WordPress beherrscht das schon von Haus auf. Die Codes sind bekannt und vielfältig online abrufbar. Auch Tags wie „fett“, „kursiv“ oder „unterstreichen“ erfordern heute keine Programmierkenntnisse mehr. Gutenberg und der TinyMCE Editor können diese Text-Formatierungen problemlos setzen.

4. Farbkontraste erhöhen

Ein Beispiel für suboptimale Farbkombinationen ist eine graue Schrift auf weißem Hintergrund. Für eine optimale Lesbarkeit sorgen starke Kontraste zwischen Schrift und Hintergrund. Das ideale Kontrastverhältnis kann durch ein Tool erreicht werden. Hier bietet WordPress eine ausreichende Auswahl. Man muss lediglich wissen, dass starke Kontraste nutzerfreundlicher sind als leichte Farbverläufe, die in Pastellfarben ineinander übergehen.

5. Größere Schriften

In der Regel haben Menschen ohne Sehschwäche kaum Probleme damit, Texte in kleineren Schriftgrößen zu lesen. Wer ein wenig weitsichtig ist, kann an seine Grenzen stoßen. Es lohnt sich, die ideale Schriftgröße von 16 Punkten zu verwenden. Diese ist in den meisten Browsern als Grundeinstellung eingestellt. Hier ist es ratsam, zu prüfen und eventuell eine Anpassung vorzunehmen. Evtl. macht es auch Sinn, die Möglichkeit einer Schriftenvergrößerung zu implementieren. Hierzu gibt es spezielle Plugins, die das Font-Resizing einbauen.

6. Großschreibung durch CSS-Formatierung

Wer in einem Menü oder in Überschriften gerne mit großgeschriebenen Wörtern arbeitet, möchte, dass Screenreader das erkennen. Um dies zu ermöglichen, sollte mit dem CSS-Befehl „text-transform: uppercase“ gearbeitet werden.
Hinweis: Wird ein WORT direkt in Großbuchstaben geschrieben, liest der Screenreader die einzelnen Buchstaben vor, buchstabiert regelrecht. Das kann beim Hörer zu Verwirrung führen, weshalb es besser unterlassen wird, wenn nicht ausdrücklich eine Buchstabierung gewünscht ist.

7. Setzen von Fokuspunkten

Aufgrund von diversen Einschränkungen (beispielweise Spastiken) können manche Menschen keine Maus verwenden und sind auf Webanwendungen ausschließlich per Tastatur angewiesen. Damit jeder auch ohne Tastatur erfahren kann, wo er sich gerade auf der Webseite befindet, können ausgewählte Eingabefelder visuell hervorgehoben werden. In viele Browsern ist diese Funktion bereits voreingestellt. Man kann visuelle Anker einsetzen, um die Steuerung per Tastatur zu ermöglichen.

8. Labels für Formulare

Nutzer müssen wissen, welche Daten in ein Kontaktformular einzutragen sind. Eingabefelder sollten deshalb beschrieben werden. Dabei ist zu beachten, dass die Beschreibung außerhalb des Feldes zu platzieren ist. Nur wenn das Feld außerhalb beschrieben ist, kann es vom Assistenten ausgelesen werden. Nur das Attribut „Placeholder“ zu setzen reicht nicht aus.

Schlecht:

Gut:
Nachname

9. Pflichtfelder und Beschreibung des Buttons

Es ist sinnvoll, Pflichtfelder klar zu markieren. Ein Sternchen kann hier perfekte Dienste leisten. Die Beschreibung des Buttons am Ende eines Kontaktformulars ist wichtig, wird aber oft vernachlässigt. Die Aktion sollte klar ausdrücken, was das Drücken des Buttons auslöst. Deshalb sollte auch in diesem Bereich unbedingt eine Beschreibung mit „Bestellen“ oder „Absenden“ erfolgen. Das gibt Nutzern, die nicht sehen können, was angeklickt wird, eine gewisse Sicherheit.

Gut:
Nachname (Pflichtfeld)

10. Ausformulierung der Fehlermeldungen

Farbenblinde Nutzer können nicht erkennen, wenn eine Kennzeichnung ausschließlich per Farbe erfolgt. Ist ein Pflichtfach bei einem Online-Formular nicht ausgefüllt, sollte mehr als eine farbliche Umrandung des Feldes erfolgen. Fehlermeldungen sollten zusätzlich ausformuliert werden.

---

Barrierefreiheit und Gutenberg/“TinyMCE“

Mit dem WordPress-Texteditor „TinyMCE“ (Classic Editor) und dem Gutenberg-Editor lassen sich zwar nicht alle Texte barrierefrei gestalten, aber beide Editoren bilden eine Basis, auf der man aufbauen kann. Das Plugin TinyMCE Advanced bietet eine gute Hilfsmöglichkeit. Neben Zitaten, Listen und Abkürzungen können Listen oder Zwischenüberschriften abgesetzt werden.
Nutzer, die ein wenig HTML-Kenntnisse besitzen, benötigen keinen weiteren Editor. Wird der Texteditor auf HTML umgestellt, kann man die wenigen Auszeichnungen schnell erlernen und die Webseite anpassen.

---

Google/SEO und Barrierefreiheit

Für Google ist es ein Anliegen, dass Webseiten barrierefrei sind. Daher ist es auch für Webseitenbetreiber sinnvoll, wenn sie darauf achten, die Accessibilty auf ihre To Do Liste für SEO zu schreiben. Wenn Webseiten-Inhalte für eingeschränkte Personen zugänglich sind, hat es auch der Google Bot leicht. Hier findest du Infos von Google zur Barrierefreiheit. Sicherlich wert einen Blick darauf zu werfen. Google hat mit dem ChromeVox auch einen eigenen ScreenReader im Angebot.

---

Beispiel Code für automatische Alt-Texte bei Beitragsbildern

Es macht Sinn bei Beitragsbildern in WordPress Blogs automatisch den Alt Tag zu setzen, selbst wenn dieser leer ist. Wenn ein alt=““ angegeben wird, verstehen das Screenreader oder Hilfs-Tools für Handicaped Users und lassen diese Bilder bei der Beschreibung oder beim Vorlesen aus (die Bilder werden dann wie Symbolbilder behandelt). Hier ein Code, über den entweder ein Standard-Alt-Text hinterlegt wird mit der Bezeichnung „Artikelbild für diesen Artikel“. Alternativ kann hier natürlich etwas anderes gesetzt werden oder auch alt=““. Sollte ein Alt Text dem Bild hinzugefügt sein, wird dieser zusätzlich angefügt.

function bildelement_alt_text_absichern( $html, $id ) {
if ( strpos( $html, '<img' ) === false ) {
return $html;
}

// Prüfen, ob das aktuelle Bild das Featured Image im Loop ist
if ( is_singular() && in_the_loop() && is_main_query() ) {
global $post;

// Prüfen, ob das Bild das Beitragsbild des aktuellen Beitrags ist
if ( has_post_thumbnail( $post->ID ) && $id == get_post_thumbnail_id( $post->ID ) ) {
$title = get_the_title( $post->ID );
$alt_text = 'Artikelbild für diesen Artikel'; //hier ggfs. den Text ändern oder nur ='' setzen

// ALT-Attribut durch gewünschten Text ersetzen (falls schon vorhanden: ersetzen, sonst hinzufügen)
if ( strpos( $html, ' alt=' ) !== false ) {
$html = preg_replace( '/ alt=("|\')(.*?)\1/', ' alt="' . esc_attr( $alt_text . ' - ' . $title ) . '"', $html );
} else {
$html = preg_replace( '/<img(.*?)\/?>/', '<img$1 alt="' . esc_attr( $alt_text . ' - ' . $title ) . '" />', $html );
}

return $html;
}
}

// Standardverhalten für alle anderen Bilder
$alt = get_post_meta( $id, '_wp_attachment_image_alt', true );

if ( empty( $alt ) && strpos( $html, ' alt=' ) === false ) {
$html = preg_replace( '/<img(.*?)\/?>/', '<img$1 alt="" />', $html );
}

return $html;
}
add_filter( 'wp_get_attachment_image', 'bildelement_alt_text_absichern', 10, 2 );

---

Code für automatische Alt-Texte in Archiv-Seiten von WordPress

Archivseiten wie die Blog-Startseite oder aber auch Kategorie-Seiten oder Tag-Seiten zeigen in der Regel die Featured Images der jeweiligen Beiträge an. Auch hier sollten die Alt-Texte angezeigt werden, selbst wenn diese nicht gesetzt sind. Dann zumindest per alt=““ oder aber per Standard-Alt-Text, um zu signalisieren, wenn das Bild nicht relevant für den Inhalt ist.

//Alt Texte auf den Archivseiten für die Post Images angeben
function benutzerdefinierter_alt_text_fuer_archive_und_startseite( $html, $attachment_id ) {
// Nur auf Startseite oder Archivseiten
if ( is_home() || is_archive() || is_front_page() ) {
// Den zugehörigen Post holen
$post_id = get_post_thumbnail_id() === $attachment_id ? get_the_ID() : false;

if ( $post_id ) {
$title = get_the_title( $post_id );
$alt_text = 'Artikelbild zum Artikel: ' . $title;

// ALT ersetzen oder hinzufügen
if ( strpos( $html, ' alt=' ) !== false ) {
// alt-Attribut ersetzen
$html = preg_replace( '/ alt=("|\')(.*?)\1/', ' alt="' . esc_attr( $alt_text ) . '"', $html );
} else {
// alt-Attribut hinzufügen
$html = preg_replace( '/<img(.*?)\/?>/', '<img$1 alt="' . esc_attr( $alt_text ) . '" />', $html );
}
}
}

return $html;
}
add_filter( 'wp_get_attachment_image', 'benutzerdefinierter_alt_text_fuer_archive_und_startseite', 20, 2 );

---

Code um WordPress-Standard-Suchfeld mit Label zu versehen

Wenn du zB über das WP Widget die Suche in deine Website eingebaut hast, fehlen die die entsprechenden Labels, die für die Barrierefreiheit gefordert werden. Hiermit kannst du sie nachträglich einfügen bzw. mit diesem Code das Suchfeld überschreiben (Code bzw. Formular der Suche ist selbstverständlich anpassbar):

function barrierefreie_suchformular_ausgabe( $form ) {
// Nur auf Widgets beschränken, optional per Sidebar-Klassen etc. erweiterbar
if ( is_admin() ) return $form; // Im Backend nicht verändern

$form = '
<form role="search" method="get" class="search-form" action="' . esc_url( home_url( '/' ) ) . '">
<label for="barrierefreie-suche">Suchbegriff:</label><br />
<input type="search" id="barrierefreie-suche" class="search-field" placeholder="Suche …" value="' . get_search_query() . '" name="s" id="s" />
<button type="submit" class="searchsubmit" id="search-submit">Suchen</button>
</form>';

return $form;
}
add_filter( 'get_search_form', 'barrierefreie_suchformular_ausgabe' );

---

Fazit

Leider bietet der Markt keinen Allrounder, der eine WordPress-Seite barrierefrei macht. Mit WP Accessibility ist aber ein Anfang getan. Damit oder mit einem Mix aus kostenfreien Plugins für verschiedene Bereiche lässt sich eine WordPress-Seite ohne monetären Mehraufwand schnell weitestgehend barrierefreier gestalten. Dazu bedarf es keiner großen Programmierkenntnisse.

Wichtig ist, dass man von Beginn an ein Theme wählt, das bereits barrierefrei ist. In diesem Bereich bietet WordPress ausreichend Möglichkeiten. Weiter kann mit einfachen Mitteln bereits viel getan werden, um eingeschränkten Menschen, die auf Screenreader-Programme angewiesen sind oder körperliche Bedieneinschränkungen haben, die Nutzung einer WordPress-Seite zu erleichtern. Es ist das Zusammenspiel von mehreren Komponenten, die das Ergebnis optimieren. Statt Mainstream und einer Universallösung bietet sich das Konglomerat aus verschiedenen Optionen an.