Barrierefreie Websites mit WordPress erstellen

TL;DR

Barrierefreiheit in WordPress entsteht durch das Zusammenspiel von Theme, Technik, Layout und Inhalten. Das Theme bildet die technische Grundlage, während Struktur, Design und Redaktion über die tatsächliche Zugänglichkeit nach WCAG und BITV entscheiden.

Finde barrierefreie WordPress-Themes:

• Standard-Themes: Twenty Twenty-One bis Twenty Twenty-Four
• Zertifizierte Themes: Alle WordPress-Themes mit dem Label „Accessibility Ready“
• Suche: Im WordPress-Verzeichnis über die Filter „Barrierefrei“ oder „Accessibility Ready“

Kernaussage: Barrierefreie Websites verbessern nicht nur die Zugänglichkeit, sondern auch Struktur, Verständlichkeit und Auffindbarkeit für Suchmaschinen und KI-Systeme.

Wichtig ist: „Accessibility Ready“ bedeutet nicht automatisch barrierefrei. Erst die korrekte Umsetzung von Inhalten, Farben, Kontrasten, Navigation und Interaktionen entscheidet darüber, ob eine Website tatsächlich barrierefrei und BFSG-konform ist.

 

In 6 Schritten zur barrierefreien WordPress-Website

Die Umsetzung einer barrierefreien Website nach dem Barrierefreiheitsstärkungsgesetz (BFSG) muss kein technisches Labyrinth sein. Mit diesen sechs Schritten bringst du deine Seite auf einen deutlich besseren Stand:

1. Wähle ein „Accessibility Ready“ Theme

Starte direkt mit einem soliden Fundament. Nutze entweder die WordPress-Standard-Themes wie Twenty Twenty-Four oder ein schlankes Framework wie GeneratePress. Achte im Theme-Verzeichnis explizit auf das Schlagwort „Accessibility Ready“. Diese Themes bringen bereits wichtige Funktionen wie Tastatur-Fokus und eine saubere Grundstruktur mit.

2. Baue eine klare Überschriften-Hierarchie auf

Strukturiere deine Inhalte logisch für Mensch und Maschine. Nutze genau eine H1-Überschrift pro Seite für den Titel. Danach folgen Unterüberschriften streng chronologisch von H2 bis H6. Benutze Überschriften niemals nur, um Text größer zu machen – sie sind das Inhaltsverzeichnis für Screenreader.

3. Verpasse deinen Bildern Alt-Texte

Beschreibe bei jedem informativen Bild kurz und klar, was darauf zu sehen ist. Nutze dafür das Feld „Alternativer Text“ in der WordPress-Mediathek. So wissen auch Menschen mit Sehbehinderung, welcher Kontext vermittelt wird. Rein dekorative Grafiken wie Trennlinien oder Schmuckelemente lässt du leer, damit sie den Lesefluss nicht stören.

4. Optimiere Kontraste und Lesbarkeit

Sorge dafür, dass dein Text gut lesbar ist. Der Kontrast zwischen Schrift und Hintergrund muss hoch genug sein. Verzichte darauf, Informationen nur durch Farben zu vermitteln, zum Beispiel mit Formulierungen wie „Klicke auf den grünen Button“. Wähle außerdem eine Schriftgröße, die man auch ohne Lupe gut erkennen kann.

5. Mach alles per Tastatur bedienbar

Lege die Maus beiseite und versuche, dich nur mit der Tab-Taste durch deine Website zu navigieren. Erreichst du alle Menüpunkte, Buttons und Formulare? Siehst du jederzeit klar, wo du dich gerade befindest? Wenn nicht, musst du hier technisch nachbessern.

6. Prüfe dein Ergebnis mit Lighthouse und WAVE

Verlasse dich nicht nur auf dein Bauchgefühl, sondern nutze Werkzeuge für den Endcheck:

• Google Lighthouse: Öffne deine Seite in Chrome, drücke F12 und starte unter „Lighthouse“ ein Audit für „Accessibility“. Ein hoher Score ist ein guter Start, ersetzt aber keine manuelle Prüfung.
• WAVE Website: Dort kannst du jede Seite per URL-Eingabe analysieren lassen.
• WAVE Browser-Tool: Das Add-on zeigt dir direkt auf der Seite, wo Kontraste fehlen oder Alt-Texte vergessen wurden.

Wichtig: Automatisierte Tools helfen beim Einstieg, ersetzen aber keine manuelle Prüfung. Wirklich aussagekräftig wird der Test erst dann, wenn du deine Website zusätzlich mit Tastatur, Zoom und idealerweise auch mit einem Screenreader prüfst.

 

Tastaturnavigation technisch umsetzen: Skip-Link, Fokus und mobiles Menü

Die reine Anforderung „per Tastatur bedienbar“ bleibt schnell abstrakt. In der Praxis sind drei Bausteine besonders wichtig: ein direkt erreichbarer Skip-Link, ein deutlich sichtbarer Fokus und eine Navigation, bei der der Fokus bei geöffneten mobilen Menüs nicht unkontrolliert in den Seiteninhalt springt.

1. Skip-Link zum Hauptinhalt

Ein Skip-Link steht am Anfang der Seite und wird sichtbar, sobald er per Tab-Taste fokussiert wird. Damit können Tastatur- und Screenreader-Nutzer wiederkehrende Navigationselemente überspringen.

<a class="skip-link" href="#main-content">Direkt zum Inhalt</a>

<main id="main-content" tabindex="-1">
  ...
</main>

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100px;
  z-index: 9999;
  padding: .75rem 1rem;
  background: #ffffff;
  color: #111111;
  border: 2px solid #111111;
}

.skip-link:focus {
  top: 1rem;
}

2. Sichtbaren Fokus mit :focus-visible definieren

Der Fokus darf nicht einfach per outline: none entfernt werden. Mit :focus-visible lässt sich ein klarer Fokus für Tastaturnutzer setzen, ohne jede Mausinteraktion mit einem Fokusrahmen zu versehen.

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid #0b57d0;
  outline-offset: 3px;
}

3. Mobiles Menü: Fokus begrenzen und Hintergrund mit inert deaktivieren

Ist ein mobiles Menü als modaler Bereich geöffnet, sollten Elemente außerhalb des Menüs vorübergehend nicht fokussierbar sein. Das HTML-Attribut inert entfernt einen Bereich aus Tab-Reihenfolge und Accessibility Tree. Wichtig: inert darf nicht auf einem übergeordneten Element liegen, das das geöffnete Menü selbst enthält.

<button id="menu-toggle"
        aria-controls="mobile-menu"
        aria-expanded="false">
  Menü öffnen
</button>

<nav id="mobile-menu" aria-label="Mobile Navigation" hidden>
  <a href="/">Start</a>
  <a href="/leistungen/">Leistungen</a>
  <button id="menu-close">Menü schließen</button>
</nav>

<main id="page-content">...</main>
<footer id="site-footer">...</footer>

const toggle = document.querySelector('#menu-toggle');
const menu = document.querySelector('#mobile-menu');
const closeButton = document.querySelector('#menu-close');
const pageContent = document.querySelector('#page-content');
const footer = document.querySelector('#site-footer');

const focusableSelector =
  'a[href], button:not([disabled]), input:not([disabled]), ' +
  'select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';

function openMenu() {
  menu.hidden = false;
  toggle.setAttribute('aria-expanded', 'true');
  pageContent.inert = true;
  footer.inert = true;
  const focusable = menu.querySelectorAll(focusableSelector);
  if (focusable.length) focusable[0].focus();
}

function closeMenu() {
  toggle.setAttribute('aria-expanded', 'false');
  pageContent.inert = false;
  footer.inert = false;
  menu.hidden = true;
  toggle.focus();
}

toggle.addEventListener('click', openMenu);
closeButton.addEventListener('click', closeMenu);

menu.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    closeMenu();
    return;
  }
  if (event.key !== 'Tab') return;

  const focusable = [...menu.querySelectorAll(focusableSelector)];
  if (!focusable.length) return;

  const first = focusable[0];
  const last = focusable[focusable.length - 1];

  if (event.shiftKey && document.activeElement === first) {
    event.preventDefault();
    last.focus();
  } else if (!event.shiftKey && document.activeElement === last) {
    event.preventDefault();
    first.focus();
  }
});

Praxis-Hinweis: Solche Snippets sind Ausgangspunkte, keine pauschale Plug-and-play-Lösung. Theme, Menüstruktur und weitere JavaScript-Komponenten können das Fokusverhalten verändern. Deshalb anschließend immer mit Tab, Shift+Tab, Enter, Leertaste und Escape testen.

Welche barrierearmen WP-Themes gibt es?

Barrierefreiheit resultiert aus Konzept, Layout, Technik und Inhalt. WordPress bietet seit Jahren Standard-Themes, die eine gute technische Basis für barrierearme Websites liefern. Auf der WordPress-Website kannst du außerdem unter „Accessibility Ready“ nach weiteren Themes suchen, die eine solide Grundlage für barrierefreie Projekte bieten.

Wenn du ein selbst entwickeltes Theme bevorzugst, findest du relevante Informationen zur Barrierefreiheit auf der Entwicklerseite von WordPress:

• WordPress Developer: Accessibility für Themes

Barrierearme oder sogar besonders zugängliche WordPress-Themes

Einige WordPress-Standard-Themes sind besonders empfehlenswert. Sie gelten als gute Basis für BFSG, SEO und KI-Lesbarkeit:

• Twenty Twenty-One
• Twenty Twenty-Two
• Twenty Twenty-Three
• Twenty Twenty-Four

Warum sie so gut sind:

• Saubere HTML5-Struktur
• Korrekte Landmark-Rollen
• Skip-to-Content-Link
• Tastatur- und Screenreader-freundliche Basis
• Regelmäßige Pflege durch WordPress

GeneratePress (Premium) – eine sehr gute Wahl für professionelle Projekte

Premium-Themes wie GeneratePress bieten ebenfalls eine sehr gute barrierearme Basis:

• Offiziell Accessibility Ready
• Sehr schlank und performant
• Klare Struktur, wenig visuelle Barrieren
• Hervorragend mit Gutenberg
• Auch mit Elementor gut kombinierbar

Vergleichstabelle mit WordPress-Themes

Hinweis: Bei kleinem Monitor oder schmalem Fenster kannst du die Tabelle horizontal scrollen.

Kriterium	WordPress-Standard-Themes	Premium-Themes (z. B. GeneratePress, Neve, Astra)
Beispiele	Twenty Twenty-One bis Twenty Twenty-Four	GeneratePress, Neve, Astra, Kadence
Accessibility-Status	Sehr hohe Basis-Barrierefreiheit	Unterschiedlich, abhängig vom Anbieter
Accessibility Ready	Ja, oft als Referenz-Implementierung	Teilweise, Theme-Basis meist geprüft
HTML5 & Semantik	Sehr sauber, vorbildlich	Meist sauber, teils komplexer
Landmark-Rollen	Vollständig und korrekt	In der Regel vorhanden
Skip-to-Content-Link	Standardmäßig integriert	Häufig vorhanden, aber prüfen
Tastaturbedienung	Umfassend getestet	Abhängig von Theme und Einstellungen
Screenreader-Kompatibilität	Sehr gut	Gut bis sehr gut
Design-Flexibilität	Eher minimalistisch	Hoch (Layouts, Header, Optionen)
Performance	Sehr gut	Gut bis sehr gut
Page-Builder-Kompatibilität	Gutenberg-optimiert	Gutenberg und Elementor geeignet
Risiko für Barrieren	Sehr gering	Mittel, vor allem durch Optionen und Demos
BFSG-Eignung	Sehr hoch	Hoch, bei sauberer Umsetzung
SEO- & KI-Lesbarkeit	Exzellent	Sehr gut
Zielgruppe	Öffentliche Stellen, Informationsseiten, rechtssichere Projekte	Unternehmen, Agenturen, professionelle Websites

Zusammenfassung: WordPress-Standard-Themes gelten als technische Referenz für Barrierefreiheit und bieten die höchste Grundsicherheit. Premium-Themes sind ebenfalls gut geeignet, erfordern jedoch mehr Sorgfalt bei Konfiguration, Design und Inhaltsaufbau, um Barrieren zu vermeiden.

 

Gutenberg, Bricks und Elementor: Barrierefreiheit und DOM im Vergleich

Der Page Builder entscheidet nicht allein darüber, ob eine Website barrierefrei ist. Er beeinflusst aber, wie leicht sich semantisches HTML, Landmarks, ARIA-Attribute und eine schlanke DOM-Struktur umsetzen lassen. Die folgende Einordnung bezieht sich auf aktuelle Versionen und eine saubere Konfiguration – nicht auf jedes beliebige Template oder Add-on.

Wichtig: Keiner der drei Builder garantiert WCAG- oder BFSG-Konformität. Auch ein technisch sauberer Builder kann durch falsche Überschriften, fehlende Labels, unzureichende Kontraste, unbedienbare Pop-ups oder schlecht konfigurierte Drittanbieter-Widgets Barrieren erzeugen.

Ist eine barrierefreie Website mit Elementor möglich?

Ja, aber mit Einschränkungen. Eine barrierefreie Website mit Elementor ist grundsätzlich möglich, gelingt aber nicht automatisch. Der Page Builder bietet inzwischen verschiedene Funktionen, welche die Barrierefreiheit unterstützen. Dennoch erfüllt Elementor nicht von Haus aus vollständig die Anforderungen der WCAG.

Elementor stellt selbst umfangreiche Informationen zum Thema Barrierefreiheit bereit und entwickelt den Builder kontinuierlich weiter. Dazu gehören unter anderem semantischere HTML-Strukturen, Verbesserungen bei der Tastaturbedienung, ARIA-Attribute sowie Einstellungen für Überschriften und Alternativtexte. Diese Maßnahmen bilden eine technische Grundlage, ersetzen jedoch keine barrierefreie Umsetzung im Detail.

Entscheidend ist: Barrierefreiheit entsteht durch die konkrete Gestaltung und Nutzung von Elementor, nicht allein durch das Tool. Viele Widgets, Templates und Animationen können – je nach Einsatz – Barrieren erzeugen, etwa für Screenreader- oder Tastaturnutzer. Auch Vorlagen und Website-Kits sind nicht automatisch barrierefrei und müssen individuell geprüft und angepasst werden.

Eine barrierearme Umsetzung mit Elementor ist vor allem dann realistisch, wenn:

• ein barrierearmes Theme verwendet wird,
• Inhalte semantisch korrekt aufgebaut sind,
• Kontraste, Fokus-Stile und Tastaturbedienung beachtet werden,
• problematische Widgets bewusst vermieden oder angepasst werden,
• und abschließend manuelle Tests mit Tastatur, Screenreader und WCAG-Checks erfolgen.

Fazit: Elementor kann Teil einer barrierearmen Website sein, bietet aber keine automatische oder garantierte Barrierefreiheit. Für rechtssichere und nachhaltige Ergebnisse sind Fachwissen, sorgfältige Umsetzung und Prüfung unverzichtbar.

Barrierefreiheit im WordPress-Backend

Barrierefreiheit betrifft nicht nur deine Besucher, sondern auch die Menschen, die Inhalte pflegen. Damit eine Website langfristig barrierearm bleibt, sollte auch das Backend möglichst klar, verständlich und gut bedienbar sein. Eine saubere Arbeitsweise im Editor hilft dabei, spätere Fehler bei Überschriften, Medien und Formularen zu vermeiden.

Weiterlesen: Auf der Elementor-Website findest du hilfreiche Informationen: WordPress Accessibility bei Elementor

WordPress-Plugins für Barrierefreiheit

Mittlerweile gibt es eine Vielzahl von WordPress-Plugins, mit denen sich Websites barriereärmer gestalten lassen. Wahrscheinlich kann jedoch kein einzelnes Plugin alle Aspekte der Barrierefreiheit abdecken. Sinnvoller ist die Kombination aus gutem Theme, sauberem Design, durchdachten Inhalten und gezielten Hilfs-Plugins.

One Click Accessibility

One Click Accessibility ist ein schneller Einstieg, um eine WordPress-Website barriereärmer zu gestalten. Das Plugin ermöglicht Funktionen wie Hochkontrastmodus, Schriftgrößenanpassung und Link-Unterstreichungen.

Die Symbolleiste bietet unter anderem:

• Schriftgröße ändern
• Graustufen
• Negativer Kontrast
• Hoher Kontrast
• Heller Hintergrund
• Unterstrichene Links
• Lesbare Schrift

WP Accessibility

Dieses Plugin fügt verschiedene Funktionen hinzu, um die Barrierefreiheit zu verbessern, darunter Unterstützung für Tastaturnavigation, Überschriftenstruktur und Bild-Alt-Texte.

Zum Plugin WP Accessibility

WP ADA Compliance Check Basic

WP ADA Compliance Check Basic überprüft deine Website auf Konformität und liefert Hinweise, wo Nachbesserungen sinnvoll sind.

Zum Plugin WP ADA Compliance Check Basic

Access Monitor

Access Monitor überwacht deine Website auf Barrierefreiheitsprobleme und meldet Auffälligkeiten.

Mehr zu Access Monitor

UserWay Accessibility Widget

UserWay bietet personalisierbare Werkzeuge zur Verbesserung der Barrierefreiheit, zum Beispiel Schriftgrößen- und Kontrastanpassungen.

Mehr zu UserWay

WordPress Accessibility Helper

Dieses Plugin möchte eine grundlegende Barrierefreiheit für Websites unterstützen und enthält unter anderem folgende Funktionen:

• Kontrastmodus
• Schneller Wechsel zur Schriftfamilie Arial
• Schriftgröße anpassen
• Anzeige der Seite in reinem HTML
• CSS-Animationen entfernen
• Links unterstreichen
• Bildtitel und Alt-Texte ergänzen oder bearbeiten
• Tastenkürzel für die Zugänglichkeits-Seitenleiste
• Position der Seitenleiste wählen
• Graustufen, dunkle und helle Themes, sichere Schriftfamilien
• Farben und Bilder invertieren

Mehr zum WordPress Accessibility Helper

Wichtiger Hinweis: Plugins und Overlays können Barrierefreiheit unterstützen, lösen aber keine grundlegenden Strukturprobleme. Viele Quick-Fix-Lösungen versprechen mehr, als sie in der Praxis tatsächlich leisten.

 

Warum Accessibility-Overlays keine BFSG-Lösung ersetzen

JavaScript-Overlays und Accessibility-Widgets können einzelne Komfortfunktionen bereitstellen, zum Beispiel Kontrastmodi, größere Schrift oder zusätzliche Hervorhebungen. Sie reparieren aber keine fehlerhafte HTML-Struktur, keine falschen Überschriften, fehlende Formular-Labels oder unzugängliche JavaScript-Komponenten im Quellcode.

Die Bundesfachstelle Barrierefreiheit weist für Online-Shops ausdrücklich darauf hin, dass ein Overlay-Tool allein die Verpflichtungen zur digitalen Barrierefreiheit nach dem BFSG nicht erfüllen kann. Zudem können Overlays neue Barrieren erzeugen oder mit assistiven Technologien kollidieren.

Eine aktuelle Übersicht über Plugins zum Thema Barrierefreiheit findest du außerdem hier:

• WordPress Plugin-Verzeichnis: a11y

 

Welcher Plugin- und Prüf-Stack ist sinnvoll?

Statt möglichst viele Accessibility-Plugins parallel zu installieren, ist ein klarer Prüf-Workflow sinnvoller. Die Werkzeuge haben unterschiedliche Aufgaben:

Empfehlung für kleine WordPress-Projekte: Nutze maximal ein dauerhaftes Prüf- oder Hilfs-Plugin, ergänze es durch WAVE oder Lighthouse und führe regelmäßig manuelle Tastaturtests durch. Bei Shops, Buchungsstrecken oder rechtlich kritischen Projekten ist zusätzlich ein professionelles Audit sinnvoll.

 

Das POUR-Prinzip als Grundlage barrierefreier Websites

Die WCAG orientieren sich an vier Grundprinzipien, die häufig unter dem Kürzel POUR ( Perceivable (wahrnehmbar), Operable (bedienbar), Understandable (verständlich) und Robust) zusammengefasst werden. Diese Prinzipien helfen dir dabei, Barrierefreiheit nicht nur technisch, sondern auch inhaltlich besser zu verstehen:

• Wahrnehmbar: Inhalte müssen für verschiedene Sinne zugänglich sein.
• Bedienbar: Alle Funktionen müssen auch ohne Maus nutzbar bleiben.
• Verständlich: Inhalte und Navigation müssen klar und nachvollziehbar sein.
• Robust: Inhalte müssen mit unterschiedlichen Geräten, Browsern und Hilfstechnologien kompatibel bleiben.

Checkliste Barrierefreiheit für Freiberufler

Die folgende Tabelle zeigt dir typische Maßnahmen und einen schnellen Praxis-Check für kleine WordPress-Websites.

Multimedia-Barrierefreiheit: Video, Audio und Transkripte

Barrierefreiheit endet nicht bei Bildern. Auch Videos, Podcasts und andere Multimedia-Inhalte sollten so aufbereitet werden, dass möglichst viele Menschen sie nutzen können.

• Untertitel: helfen Menschen mit Hörbehinderungen und verbessern zugleich die Verständlichkeit in stillen Nutzungssituationen.
• Transkripte: machen Audio- und Videoinhalte zusätzlich als Text zugänglich und helfen auch Suchmaschinen und KI-Systemen bei der Einordnung.
• Audiobeschreibungen: können bei wichtigen visuellen Inhalten sinnvoll sein, wenn Informationen sonst verloren gehen.

 

BFSG: Ausnahmen und Übergangsregelungen

Nicht jede Website und nicht jedes Unternehmen ist in gleicher Weise vom Barrierefreiheitsstärkungsgesetz betroffen. Neben der grundsätzlichen Pflicht gibt es wichtige Ausnahmen und Übergangsregelungen, die du im Blick behalten solltest.

• Kleinstunternehmen: Unternehmen mit weniger als 10 Beschäftigten und entweder höchstens 2 Mio. € Jahresumsatz oder höchstens 2 Mio. € Jahresbilanzsumme sind bei Dienstleistungen vom BFSG ausgenommen.
• B2B-Angebote: Reine B2B-Dienstleistungen fallen nicht unter die BFSG-Regelungen für Dienstleistungen im elektronischen Geschäftsverkehr mit Verbrauchern.
• Bestandsregelungen: Für ältere Verträge, Systeme oder Produkte können Übergangsfristen gelten.

Wer kontrolliert das BFSG – und wie hoch können Bußgelder sein?

Die bundesweite Marktüberwachung übernimmt die Marktüberwachungsstelle der Länder für die Barrierefreiheit von Produkten und Dienstleistungen (MLBF). Sie ist die gemeinsame Stelle der 16 Bundesländer und kann Hinweise sowie Anträge von Verbraucherinnen und Verbrauchern in die Überwachung einbeziehen.

Das BFSG sieht je nach Verstoß unterschiedliche Bußgeldrahmen vor. Für bestimmte Verstöße – darunter das Anbieten oder Erbringen einer nicht konformen Dienstleistung – kann die Geldbuße bis zu 100.000 Euro betragen. Andere Ordnungswidrigkeiten können mit bis zu 10.000 Euro geahndet werden.

Zum Thema Abmahnungen: Ein pauschaler Hinweis auf eine „Abmahnwelle“ wäre zu undifferenziert. Entscheidend ist zunächst die behördliche Marktüberwachung nach BFSG. Daneben können je nach Einzelfall weitere zivil- oder wettbewerbsrechtliche Risiken entstehen. Für konkrete Rechtsfragen ist eine juristische Prüfung sinnvoll.

Auch wenn im Einzelfall keine unmittelbare Pflicht besteht, bleibt Barrierefreiheit aus Sicht von Nutzerfreundlichkeit, SEO und KI-Sichtbarkeit ein klarer Qualitätsfaktor.

 

Was kostet Barrierefreiheit? Audit- und Budget-Richtwerte

Pauschalpreise sind schwierig, weil Seitenzahl, Seitentypen, Formulare, Shop-Prozesse und JavaScript-Komponenten den Prüf- und Umsetzungsaufwand stark verändern. Für die Budgetplanung helfen aber konkrete Referenzwerte.

Für kleine Websites sinnvoll: Erst einen strukturierten Selbstcheck durchführen, danach die wiederkehrenden Seitentypen priorisieren und nur dann entscheiden, ob ein vollständiger Audit nötig ist. Das verhindert, dass Budget in eine Vollprüfung fließt, obwohl grundlegende Fehler bereits vorher sichtbar und behebbar sind.

Häufige Fragen zu barrierefreien WordPress-Websites

▶
Ist WordPress automatisch barrierefrei?

Nein. WordPress bietet eine gute technische Basis, ist aber nicht automatisch barrierefrei. Entscheidend sind das gewählte Theme sowie die Umsetzung der Inhalte. Bilder, Texte, Navigation und Kontraste müssen aktiv barrierefrei gestaltet werden.

▶
Welche WordPress-Themes sind für barrierefreie Websites geeignet?

Geeignet sind Themes, die im WordPress-Verzeichnis als „Accessibility Ready“ gekennzeichnet sind. Besonders empfehlenswert sind die WordPress-Standard-Themes wie Twenty Twenty-One bis Twenty Twenty-Four. Wichtig: Das Label ist nur eine Grundlage – die tatsächliche Barrierefreiheit entsteht erst durch die richtige Umsetzung.

▶
Wie unterscheiden sich Standard-Themes und Premium-Themes in Bezug auf Barrierefreiheit?

WordPress-Standard-Themes gelten als Referenz für Barrierefreiheit und bieten eine sehr saubere technische Basis. Premium-Themes wie GeneratePress, Neve oder Astra können ebenfalls gut geeignet sein, erfordern jedoch mehr Sorgfalt bei Konfiguration, Design und Interaktionen, um Barrieren zu vermeiden.

▶
Ist eine barrierefreie Website mit Elementor möglich?

Ja, grundsätzlich – aber nicht automatisch. Elementor bietet unterstützende Funktionen, erfüllt jedoch nicht von Haus aus alle Anforderungen der WCAG. Entscheidend sind saubere Struktur, bewusste Widget-Auswahl, gute Kontraste, Tastaturbedienbarkeit und abschließende Tests.

▶
Welche WordPress-Plugins helfen bei Barrierefreiheit?

Plugins wie WP Accessibility, UserWay oder ADA Compliance Check können bestimmte Aspekte verbessern, etwa Kontraste oder Zusatzfunktionen. Sie ersetzen jedoch keine saubere technische und inhaltliche Umsetzung. Barrierefreiheit entsteht nicht durch Plugins allein.

▶
Was sind die häufigsten Barrierefreiheits-Fehler?

Typische Fehler sind fehlende Alternativtexte für Bilder, zu geringe Farbkontraste, nicht per Tastatur bedienbare Navigation und eine unlogische Überschriftenstruktur. Auch komplexe Sprache oder Inhalte ohne Textalternativen können Barrieren darstellen.

▶
Wie teste ich die Barrierefreiheit meiner Website?

Nutze eine Kombination aus automatisierten Tools und manuellen Tests. Tools wie WAVE oder Lighthouse liefern erste Hinweise. Zusätzlich solltest du deine Website ausschließlich per Tastatur bedienen und – wenn möglich – mit einem Screenreader testen. Erst diese Kombination zeigt die tatsächliche Nutzbarkeit.

▶
Reicht ein Accessibility-Overlay aus, um das BFSG zu erfüllen?

Nein. Overlays können einzelne Komfortfunktionen ergänzen, beheben aber keine grundlegenden Struktur- und Bedienungsprobleme. Für einen vom BFSG betroffenen Online-Shop reicht ein Overlay allein nicht aus, um die Anforderungen an digitale Barrierefreiheit zu erfüllen.

▶
Welche Kleinstunternehmen sind vom BFSG ausgenommen?

Bei Dienstleistungen gilt die Ausnahme für Unternehmen mit weniger als 10 Beschäftigten und entweder höchstens 2 Millionen Euro Jahresumsatz oder höchstens 2 Millionen Euro Jahresbilanzsumme. Die Ausnahme gilt nicht pauschal für alle Produkte eines Kleinstunternehmens.

▶
Was kostet ein professioneller Barrierefreiheits-Test?

Das hängt von Seitenzahl und technischer Komplexität ab. Beim BIK BITV-Test liegen die veröffentlichten indikativen Seitenpreise aktuell bei etwa 420 Euro für einfache, 630 Euro für dynamische und 840 Euro für komplexe Seiten, jeweils zuzüglich möglicher Grund- und Zusatzkosten.

Fazit

Barrierefreiheit beginnt nicht beim Plugin, sondern beim Aufbau

Eine barrierefreie WordPress-Website entsteht nicht durch ein einzelnes Theme oder Plugin, sondern durch das Zusammenspiel aus sauberer Technik, sinnvoller Gestaltung und gut strukturierten Inhalten. Ein barrierearmes Theme kann dir den Einstieg erleichtern, ersetzt aber weder klare Überschriften, gute Kontraste noch eine durchdachte Navigation.

Wenn du WordPress, Gutenberg oder auch Elementor gezielt und bewusst einsetzt, kannst du die Voraussetzungen für eine deutlich zugänglichere Website schaffen. Entscheidend ist, dass du Barrierefreiheit nicht als Zusatzfunktion verstehst, sondern als festen Bestandteil deiner Website-Qualität.

Gerade mit Blick auf BFSG, SEO und KI-Lesbarkeit lohnt sich der Aufwand doppelt: Du verbesserst die Nutzbarkeit für Menschen, reduzierst technische Barrieren und stärkst gleichzeitig die Sichtbarkeit deiner Inhalte in Suchmaschinen und KI-Systemen.