Barrierefreiheit in WordPress: Barrierefreies WordPress mit dem richtigen Theme – barrierefreien Webdesign zugänglich gestalten

Barrierefreiheit klingt nach Bürokratie. Nach Checklisten. Nach „muss man halt machen“.

Ist es aber nicht. Oder nicht nur.

Barrierefreiheit bedeutet: Deine WordPress-Website funktioniert für alle. Für Menschen mit Sehbehinderungen, die einen Screenreader nutzen. Für Menschen mit Einschränkungen, die nur per Tastatur navigieren. Für Menschen mit Hörbehinderungen, die Untertitel brauchen. Und – Überraschung – auch für alle anderen. Denn eine barrierefreie Website ist fast immer eine bessere Website. Klarer strukturiert. Besser bedienbar. Nutzerfreundlicher.

Seit dem Barrierefreiheitsstärkungsgesetz (BFSG) ist digitale Barrierefreiheit in Deutschland nicht mehr optional – sie wird zur Pflicht. Barrierefreiheit mit WordPress umzusetzen ist machbar. Mit dem richtigen Theme, den richtigen Plugins und ein paar Grundregeln. In diesem Artikel: Was Barrierefreiheit im Web bedeutet. Wie du WordPress barrierefrei gestalten kannst. Welche Themes und Plugins helfen. Und worauf du bei Inhalten achten musst.

Was bedeutet Barrierefreiheit im Web – und warum ist sie wichtig?

Barrierefreiheit heißt: Keine Barrieren. Für niemanden.

Barrierefreiheit im Web bedeutet, dass eine Website für alle Menschen nutzbar ist – unabhängig von körperlichen, sensorischen oder kognitiven Einschränkungen. Menschen mit Behinderungen nutzen das Internet genauso wie alle anderen. Aber sie nutzen es oft anders: Mit Screenreadern, die den Bildschirminhalt vorlesen. Per Tastatur statt Maus. Mit Vergrößerungssoftware. Mit Sprachsteuerung.

Wenn deine WordPress-Website nicht barrierefrei ist, schließt du diese Menschen aus. Das sind in Deutschland rund 10 Millionen Menschen mit Behinderung. Weltweit über eine Milliarde. Digitale Barrierefreiheit ist kein Nischenthema – es betrifft einen erheblichen Teil deiner potenziellen Besucher.

Und es gibt noch einen Aspekt, der gerne übersehen wird: Barrierefreiheit einer Website verbessert die Zugänglichkeit für alle. Klare Navigation hilft jedem. Gute Kontraste helfen bei Sonnenlicht auf dem Smartphone. Untertitel für Videos helfen in lauten Umgebungen. Barrierefreie Websites sind einfach bessere Websites. Punkt.

Welche Richtlinien für Barrierefreiheit gibt es?

WCAG. BFSG. EN 301 549. Klingt kompliziert. Ist es (ein bisschen).

Die Web Content Accessibility Guidelines (WCAG) sind der internationale Standard. Entwickelt vom W3C. Die aktuelle Version ist WCAG 2.2 (bzw. WCAG 2.1 als Mindestanforderung). WCAG definiert vier Prinzipien: Wahrnehmbar, bedienbar, verständlich, robust. Jedes Prinzip hat konkrete Erfolgskriterien auf drei Stufen: A, AA und AAA. Stufe AA ist der übliche Standard – den solltest du anstreben.

In Deutschland gilt seit 2025 das Barrierefreiheitsstärkungsgesetz (BFSG). Es verpflichtet Unternehmen, digitale Produkte und Dienstleistungen barrierefrei anzubieten. Die europäische Norm EN 301 549 konkretisiert die technischen Anforderungen – sie verweist weitgehend auf WCAG 2.1 Level AA. Richtlinien für Barrierefreiheit erfüllen heißt also in der Praxis: WCAG 2.1 AA einhalten. Das ist der Maßstab.

Klingt nach viel Theorie. In der Praxis sind es konkrete, umsetzbare Dinge: Alternativtexte für Bilder, ausreichende Farbkontraste, Tastatur-Bedienbarkeit, strukturierte Überschriften, barrierefreie Formulare. Aspekte der Barrierefreiheit, die du Schritt für Schritt umsetzen kannst.

Wie wählst du ein barrierefreies WordPress Theme?

Das Theme ist die Basis. Wenn das Theme nicht barrierefrei ist, wird’s schwer.

WordPress bietet im Theme-Verzeichnis den Filter „Accessibility Ready“. Themes mit diesem Tag wurden auf grundlegende Barrierefreiheit geprüft: Tastatur-Navigation, korrekte ARIA-Labels, ausreichende Kontraste, Skip-Links. „Accessibility Ready“ heißt nicht „perfekt barrierefrei“ – aber es heißt: Die Grundlagen stimmen.

Gute barrierefreie Themes: Twenty Twenty-Four (das aktuelle Standard-Theme von WordPress), Flavor flavor flavourAstra, GeneratePress, flavor flavor flavorOllie (speziell für Barrierefreiheit entwickelt). Diese Themes liefern sauberen, semantischen HTML-Code. Die Navigation ist per Tastatur bedienbar. Überschriften sind hierarchisch strukturiert. Formulare haben Labels. Das Theme bildet das Fundament – alles andere baut darauf auf.

Worauf achten bei der Theme-Wahl? Semantische HTML-Struktur (nicht alles in <div>-Suppe). Korrekte Überschrift-Hierarchie (H1, H2, H3 – in der richtigen Reihenfolge). Skip-Navigation-Link (damit Screenreader-Nutzer direkt zum Inhalt springen können). Ausreichender Kontrast zwischen Text und Hintergrund. Per Tastatur bedienbar – jedes interaktive Element erreichbar, ohne Maus. Themes und Plugins, die „Accessibility Ready“ sind, decken das meistens ab.

Welche Plugins helfen bei der Barrierefreiheit in WordPress?

Ein paar gute. Aber kein Plugin macht eine Seite automatisch barrierefrei.

Das muss man ehrlich sagen: Kein Plugin ersetzt barrierefreies Webdesign. Plugins können helfen, Lücken zu schließen – aber die Basis muss stimmen. Die besten Plugins für Barrierefreiheit von WordPress:

WP Accessibility: Das bekannteste Plugin. Von Joe Dolson, einem WordPress-Accessibility-Experten. WP Accessibility behebt häufige Barrierefreiheitsprobleme: Fügt Skip-Links hinzu, entfernt redundante Title-Attribute, verbessert die Fokus-Sichtbarkeit, ermöglicht Schriftgrößenanpassung. Kostenlos. Ein solides Tool für die Grundlagen.

One Stop Accessibility: Bietet Anpassungen für Benutzer direkt im Frontend – Schriftgröße, Kontrast, Cursor-Größe, Zeilenabstand. Schaltfläche im Frontend, über die Besucher selbst Einstellungen anpassen können. Hilfreich, aber kein Ersatz für ein barrierefreies Theme.

Jeweils themenspezifische Plugins: Für barrierefreie Formulare (z.B. Gravity Forms, das ARIA-Labels unterstützt), für Untertitel (z.B. Starter Templates mit Video-Untertiteln), für Audioinhalte. WordPress bietet ein Ökosystem – du musst die richtigen Bausteine kombinieren.

Wie erstellst du barrierefreie Inhalte in WordPress?

Content ist King. Auch bei Barrierefreiheit.

Überschriften hierarchisch nutzen: H1 für den Seitentitel. H2 für Hauptabschnitte. H3 für Unterabschnitte. Nie eine Ebene überspringen. Screenreader nutzen die Überschrift-Hierarchie, um durch die Seite zu navigieren. Strukturiert schreiben heißt: Jeder findet, was er sucht.

Alternativtexte für Bilder: Jedes Bild braucht einen Alt-Text. Alternativtexte beschreiben, was auf dem Bild zu sehen ist – für Menschen mit Sehbehinderungen, die einen Screenreader nutzen. In WordPress: Bild einfügen, im Feld „Alternativtext“ eine Beschreibung eingeben. Nicht „IMG_4523.jpg“. Sondern „Screenshot des WordPress-Dashboards mit geöffnetem Plugin-Menü“. Alt-Texte sind Pflicht – und sie helfen auch bei SEO.

Barrierefreie Inhalte gehen über Bilder hinaus: Links beschreibend benennen (nicht „hier klicken“, sondern „zum WordPress-Handbuch“). Audioinhalte mit Transkripten versehen. Untertitel für Videos bereitstellen. Nicht ausschließlich auf Farbe setzen, um Informationen zu vermitteln – rot für Fehler, grün für Erfolg reicht nicht, wenn jemand farbenblind ist. Gut erkennbar und verständlich – das ist das Ziel.

Wie gestaltest du barrierefreie Formulare in WordPress?

Formulare sind Stolperfallen. Besonders für Screenreader-Nutzer.

Barrierefreie Formulare brauchen: Labels für jedes Eingabefeld. Nicht nur Placeholder-Text – der verschwindet beim Tippen. Jedes Eingabefeld braucht ein <label>-Element, das klar beschreibt, was eingegeben werden soll. Screenreadern wird so vorgelesen: „Vorname – Eingabefeld“. Ohne Label hört der Nutzer nur: „Eingabefeld“. Nicht hilfreich.

Fehlermeldungen müssen klar, spezifisch und mit dem fehlerhaften Feld verknüpft sein. Nicht nur „Es ist ein Fehler aufgetreten“, sondern „Bitte gib eine gültige E-Mail-Adresse ein“. Und die Fehlermeldung muss programmatisch mit dem Feld verbunden sein – per aria-describedby oder aria-invalid. Formulare barrierefrei gestalten heißt: Jeder Benutzer versteht, was verlangt wird und was schiefgelaufen ist.

Formular-Plugins wie Gravity Forms, WPForms oder Formidable Forms unterstützen barrierefreie Formulare in unterschiedlichem Maß. Gravity Forms gilt als am besten für Barrierefreiheit – mit nativer ARIA-Unterstützung und korrekten Labels. Das Formular testen: Per Tastatur durchnavigieren. Mit einem Screenreader testen. Wenn du jedes Feld erreichst und verstehst – passt es.

Wie machst du Tabellen in WordPress barrierefrei?

Tabellen klingen harmlos. Sind sie nicht.

Tabellen barrierefrei zu gestalten ist eine der unterschätzten Aufgaben. Screenreader lesen Tabellen Zelle für Zelle – und brauchen dafür klare Struktur. Tabellen in WordPress müssen korrekte <th>-Elemente (Tabellenüberschriften) haben, ein <caption>-Element für die Beschreibung und scope-Attribute, die definieren, ob eine Überschrift für eine Zeile oder Spalte gilt.

Im Gutenberg-Editor: Den Tabellen-Block verwenden. WordPress erstellt grundlegendes Tabellen-HTML. Für komplexere Tabellen: Den HTML-Block nutzen und die Tabelle manuell strukturiert aufbauen. Oder ein Plugin wie TablePress verwenden – und darauf achten, dass die Accessibility-Optionen aktiviert sind. Tabellen nie für Layout-Zwecke verwenden. Tabellen nur für tabellarische Daten. Alles andere verwirrt Screenreader.

Wie testest du die Barrierefreiheit deiner WordPress-Seite?

Testen, testen, testen. Automatisch und manuell.

Automatische Tests: Tools wie WAVE (Web Accessibility Evaluation Tool), axe DevTools oder Lighthouse (in Chrome eingebaut) scannen deine Seite und zeigen Barrierefreiheitsfehler an. Website zu testen mit diesen Tools dauert Sekunden. Sie finden fehlende Alt-Texte, Kontrastprobleme, fehlende Labels, fehlerhafte Überschrift-Hierarchien. Automatische Tests decken aber nur etwa 30-40% aller Barrieren auf.

Manueller Test: Per Tastatur durch die ganze Seite navigieren. Tab-Taste drücken. Erreichst du jedes Element? Siehst du, wo der Fokus ist? Funktioniert die Navigation? Dann: Einen Screenreader testen. NVDA (kostenlos, Windows) oder VoiceOver (eingebaut, Mac/iPhone). Die Seite vorlesen lassen. Versteht ein Screenreader-Nutzer den Inhalt? Barrierefreiheit einer barrierefreien WordPress-Seite prüfen heißt: Selbst erleben, wie die Seite ohne Sehen, ohne Maus funktioniert.

Was ist eine barrierefreie Website wirklich wert?

Mehr als du denkst.

Eine barrierefreie Website ist keine Einschränkung – sie ist eine Verbesserung. Barrierefreie Webseiten haben bessere Struktur, besseren Code, bessere Usability. Sie ranken oft besser bei Google (weil guter Code, semantisches HTML und Alt-Texte auch SEO helfen). Sie erreichen mehr Menschen. Und sie sind rechtlich auf der sicheren Seite – Stichwort BFSG.

WordPress als Content-Management-System (CMS) bietet alle Werkzeuge, die du brauchst. Barrierefreies WordPress ist kein Luxus – es ist Standard, wenn du es richtig machst. Das richtige Theme wählen. Inhalte zugänglich zu gestalten. Plugins gezielt einsetzen. Regelmäßig testen. Barrierefreiheit ist kein Projekt mit Enddatum. Es ist eine Haltung. Und eine, die sich lohnt.

Die WordPress Website zugänglich zu machen ist einfacher als die meisten denken. Fang mit den Grundlagen an: Barrierefreies Theme, Alternativtexte, Überschrift-Hierarchie, Tastatur-Navigation. Der Rest kommt Schritt für Schritt.

 

Das Wichtigste auf einen Blick

• Barrierefreiheit bedeutet: Deine Website ist für alle Menschen nutzbar – auch mit Seh- oder Hörbehinderungen.
• WCAG 2.1/2.2 Level AA ist der Standard – die Richtlinien definieren konkrete Anforderungen.
• Das BFSG (Barrierefreiheitsstärkungsgesetz) macht digitale Barrierefreiheit in Deutschland zur Pflicht.
• Theme: „Accessibility Ready“-Themes wie Twenty Twenty-Four oder Flavor flavor flavourOllie als Basis wählen.
• Plugin: WP Accessibility für Grundlagen – aber kein Plugin ersetzt barrierefreies Design.
• Alternativtexte für alle Bilder – beschreibend, nicht nur Dateinamen.
• Überschriften hierarchisch strukturiert: H1 → H2 → H3, keine Ebene überspringen.
• Formulare mit Labels, verknüpften Fehlermeldungen und Tastatur-Bedienbarkeit.
• Tabellen mit korrekten Überschriften, Caption und Scope-Attributen.
• Testen: Automatisch (WAVE, Lighthouse) + manuell (Tastatur, Screenreader).