Ein Projekt in WordPress barrierefrei zu gestalten, ist aus verschiedenen Gründen empfehlenswert. Leicht zugängliche Inhalte sind nicht nur für Benutzerinnen und Benutzer, sondern auch für Suchmaschinen wichtig. Dank verschiedener Standardfeatures und spezialisierten Themes und Plugins ist Barrierefreiheit in WordPress bequem und einfach zu realisieren.

Webhosting
Top-Hosting für Ihre Website
  • Flexibel: Hosting, das jedem Website-Traffic standhält
  • Verlässlich: Inklusive 24/7-Support und persönlicher Beratung
  • Sicher: Kostenloses SSL-Zertifikat, DDoS-Schutz und Backups

Warum eine barrierefreie Website mit WordPress wichtig ist

Barrierefreiheit im Web ist kein Luxus, sondern eine Notwendigkeit – und zunehmend auch eine gesetzliche Verpflichtung. Das Barrierefreiheitsstärkungsgesetz (BFSG) sieht vor, dass zahlreiche digitale Angebote barrierefrei gestaltet sein müssen, darunter kommerzielle Websites, Onlineshops und Buchungsportale. Ziel der digitalen Barrierefreiheit ist es, allen Menschen den bestmöglichen Zugang zum digitalen Leben zu ermöglichen – unabhängig von körperlichen oder kognitiven Einschränkungen.

Barrierefreiheit in WordPress und Co. ist nicht nur eine Frage der Gesetzeskonformität, sondern auch ein Zeichen von Inklusion, Professionalität und Nutzerfreundlichkeit. Menschen mit Einschränkungen – etwa Seh- oder Hörbehinderungen, motorischen oder neurologischen Beeinträchtigungen – sind auf barrierefreie Inhalte angewiesen. Aber auch alle anderen Besucherinnen und Besucher profitieren von gut strukturierten Inhalten wie klarer Sprache und hohen Kontrasten.

Tipp

Barrierefreiheit steigert außerdem die Reichweite Ihrer Inhalte, reduziert die Absprungraten und verbessert die Auffindbarkeit bei Google. Eine barrierefreie Website bzw. ein barrierefreier Onlineshop ist also ein Gewinn auf allen Ebenen.

Was macht eine barrierefreie WordPress-Website aus?

Barrierefreies Webdesign berücksichtigt eine Vielzahl an Anforderungen, die sich in den internationalen Web Content Accessibility Guidelines (WCAG) der W3C widerspiegeln. Diese Richtlinien lassen sich in vier zentrale Prinzipien zusammenfassen – bekannt unter dem Kürzel POUR:

  • Wahrnehmbar (Perceivable): Inhalte müssen für alle Nutzerinnen und Nutzer erfassbar sein. Dazu gehören Alternativtexte für Bilder, gut erkennbare Schriftgrößen, ausreichende Farbkontraste, Beschreibungen für Audioinhalte oder Untertitel für Videos. Außerdem sollten Überschriften, Listen und Tabellen nicht nur optisch, sondern auch technisch korrekt ausgezeichnet sein.
  • Bedienbar (Operable): Jede Seite sollte vollständig mit der Tastatur navigierbar sein – inklusive Menüs, Formularfeldern oder interaktiven Elementen. Der Fokus (sichtbare Auswahl) muss gut erkennbar sein und einer logischen Reihenfolge folgen. Bewegte Inhalte sollten pausierbar sein und keine epilepsieauslösenden Effekte enthalten.
  • Verständlich (Understandable): Inhalte müssen klar strukturiert, sprachlich verständlich und konsistent aufgebaut sein. Das betrifft sowohl die Sprachebene (z. B. einfache Formulierungen und eindeutige Menüpunkte) als auch die technische Umsetzung (z. B. korrekte Formulare, verständliche Fehlermeldungen und eine einheitliche Navigation).
  • Robust (Robust): Eine barrierefreie Website mit WordPress sollte mit möglichst vielen Geräten, Browsern und Hilfsmitteln kompatibel sein. Das betrifft insbesondere Screenreader, Braillezeilen und Sprachausgabe-Software, die strukturierte Inhalte voraussetzen. Auch die saubere Codierung nach Standards ist entscheidend.

WordPress barrierefrei: Schritt für Schritt zum barrierearmen Webprojekt

WordPress ist eines der weltweit am häufigsten eingesetzten Content-Management-Systeme – und bietet viele Möglichkeiten, barrierefreie Inhalte zu gestalten. Der Erfolg hängt dabei stark vom gewählten Theme und der Sorgfalt bei der Inhaltserstellung ab. Spätestens mit dem Einsatz der richtigen Plugins wird WordPress zu einem vollumfassenden barrierefreien CMS.

Schritt 1: Ein barrierefreies WordPress-Theme wählen

Um Ihre Website mit WordPress barrierefrei zu gestalten, ist ein barrierefreies Theme die Grundvoraussetzung. Im offiziellen Theme-Verzeichnis von WordPress finden Sie unter dem Label „Accessibility ready“ eine Auswahl an Themes, die grundlegende Anforderungen der Barrierefreiheit erfüllen. Diese Themes wurden speziell geprüft, um z. B. die Tastaturnavigation, saubere HTML-Strukturen, Fokus-Steuerung und ausreichende Kontraste zu gewährleisten.

Zu den empfehlenswerten „WordPress barrierefrei“-Themes zählen:

  • Twenty Twenty-One: Das Standard-Theme ist modern, minimalistisch und barrierefrei
  • Neve: Schnell, responsiv und zugänglich – mit Fokus auf Performance und Kompatibilität
  • CursorFSE: Schlichtes, responsives und barrierefreies WordPress-Block-Theme für Blogger, Bloggerinnen und KMUs
  • GeneratePress: Ein leichtgewichtiges Theme mit hohem Fokus auf Accessibility und SEO
Hinweis

Wenn Sie das Theme wechseln, sollten Sie unbedingt prüfen, ob vorhandene Inhalte korrekt übernommen werden und wie sie sich auf die Barrierefreiheit von WordPress auswirken.

Schritt 2: Inhalte richtig strukturieren

Bei einer barrierefreien Website in WordPress sollten der resultierende Code und die Art und Weise, wie Sie die Inhalte erstellen, Hand in Hand gehen. Achten Sie auf eine logische, semantische Struktur, die sich vor allem in folgenden Elementen äußert:

  • Überschriftenhierarchie: Verwenden Sie auf jeder Seite HTML-Überschriften in logischer Reihenfolge, also <h1> für die Hauptüberschrift (meist automatisch vergeben), gefolgt von <h2>, <h3> usw. Vermeiden Sie es, Texte lediglich durch Schriftgröße oder Fettdruck hervorzuheben.
  • Absätze und Listen: Gliedern Sie Inhalte in sinnvolle Abschnitte. Nutzen Sie Aufzählungen und nummerierte Listen für eine bessere Orientierung – auch für Screenreader.
  • Verlinkungen: Verwenden Sie aussagekräftige Linktexte wie „PDF mit Preisen herunterladen“ anstelle von „Hier klicken“.
  • Tabellen: Setzen Sie Tabellen nur für tabellarische Inhalte ein und niemals für das Layout. Verwenden Sie Tabellenüberschriften und beschreibende <caption>-Elemente.

Schritt 3: Bilder und Medieninhalte barrierefrei zugänglich machen

Alle visuellen und multimedialen Inhalte sollten durch barrierefreie Alternativen ergänzt werden. Sofern es für das Verständnis der Seite relevant ist, sind beschreibende Alternativtexte für jedes Bild unverzichtbar. Dekorative Bilder können mit einem leeren Tag (alt="") markiert oder per CSS eingebunden werden.

Ihre Videos sollten Sie mithilfe von Untertiteln und Audiobeschreibungen auch für Menschen mit Hör- oder Sehbehinderung zugänglich machen. Auch eine schriftliche Transkription ist für alle Besuchenden sowie für die Erfassung des Contents durch Suchmaschinen sinnvoll. Gleiches gilt für Podcasts oder Audiodateien. WordPress bietet hierfür in der Mediathek entsprechende Eingabefelder. Verschiedene Erweiterungen wie das WordPress-Barrierefreiheits-Plugin WP Accessibility erinnern Sie an fehlende Alt-Texte.

Schritt 4: Tastaturnavigation ermöglichen

Ein häufiger Stolperstein für alle, die Ihr Projekt in WordPress barrierefrei gestalten möchten, ist die Navigation per Tastatur. Testen Sie daher unbedingt mit der Tab-Taste, ob

  • alle Menüpunkte und Formulare erreichbar sind,
  • der sichtbare Fokus deutlich erkennbar ist,
  • keine Inhalte übersprungen oder doppelt angesprungen werden und
  • die Reihenfolge der Fokus-Elemente logisch dem Seitenaufbau entspricht.

Ein „Skip to content“-Button am Seitenanfang hilft Nutzerinnen und Nutzern, Inhalte direkt anzusteuern und die Navigation zu überspringen – das barrierefreie Plugin Ally fügt eine solche Schaltfläche automatisch hinzu, wenn die entsprechende Option aktiviert ist.

Schritt 5: WordPress-Formulare barrierefrei gestalten

Kontaktformulare oder Bestellseiten sind besonders kritisch – sie müssen klar beschriftet, fehlerresistent und auch ohne Maus bedienbar sein. Zu diesem Zweck sind folgende Kriterien zu erfüllen:

  • Labels sollten jedem Eingabefeld korrekt zugeordnet sein.
  • Pflichtfelder sollten sowohl visuell als auch technisch (z. B. per ARIA) gekennzeichnet sein.
  • Fehlermeldungen müssen verständlich sein und dürfen sich nicht ausschließlich auf Farbe oder Icons verlassen.

WordPress-Kontaktformular-Plugins wie Contact Form 7 oder die Premium-Erweiterung Gravity Forms bieten hier gute Möglichkeiten, sobald sie entsprechend konfiguriert wurden.

Schritt 6: Farben und Kontraste beachten

Eine gut gestaltete Website nutzt Farben, die nicht nur optisch ansprechend, sondern auch zugänglich sind:

  • Die Kontrastverhältnisse von Text und Hintergrund sollten mindestens 4,5:1 betragen (für große Texte 3:1).
  • Verlassen Sie sich nicht allein auf Farbe, um Informationen zu vermitteln (z. B. Fehler rot markieren UND beschriften).
  • Verwenden Sie Tools wie den Colour Contrast Analyzer oder Plugins mit Live-Vorschau für die Überprüfung der Kontrastverhältnisse.

Zahlreiche „WordPress barrierefrei“-Plugins wie AccessibleWP bieten bereits integrierte Kontrastmodi oder ermöglichen es Besucherinnen und Besuchern, Farben und Schriftgrößen anzupassen.

Barrierefreiheit einer WordPress-Website testen

Damit Ihr WordPress-Projekt langfristig für alle Personen zugänglich bleibt, ist es wichtig, die Funktionalität regelmäßig zu überprüfen. Um die Barrierefreiheit einer Website zu testen, können Sie einerseits auf die entsprechenden Features der verwendeten Plugins zurückgreifen. Darüber hinaus gibt es eine Reihe von Web-Tools, mit denen Sie schnell herausfinden, an welchen Stellen es bei Ihren Seiten hapert:

Natürlich können Sie jederzeit auch manuell testen, ob Ihre Website in WordPress barrierefrei ist, indem Sie die Navigation ausprobieren oder die Inhalte testweise mit einem Screenreader wie dem Open-Source-Tool NVDA wiedergeben lassen.

Tipp

Lesen Sie in einem separaten Artikel, auf welche Webdesign-Trends es außer einem barrierefreien Zugang ankommt.

War dieser Artikel hilfreich?
Zum Hauptmenü