Bar­rie­re­frei­heit in WordPress: Wie Sie Inhalte für alle zu­gäng­lich machen

Ein Projekt in WordPress bar­rie­re­frei zu gestalten, ist aus ver­schie­de­nen Gründen emp­feh­lens­wert. Leicht zu­gäng­li­che Inhalte sind nicht nur für Be­nut­ze­rin­nen und Benutzer, sondern auch für Such­ma­schi­nen wichtig. Dank ver­schie­de­ner Stan­dard­fea­tures und spe­zia­li­sier­ten Themes und Plugins ist Bar­rie­re­frei­heit in WordPress bequem und einfach zu rea­li­sie­ren.

Warum eine bar­rie­re­freie Website mit WordPress wichtig ist

Bar­rie­re­frei­heit im Web ist kein Luxus, sondern eine Not­wen­dig­keit – und zunehmend auch eine ge­setz­li­che Ver­pflich­tung. Das Bar­rie­re­frei­heits­stär­kungs­ge­setz (BFSG) sieht vor, dass zahl­rei­che digitale Angebote bar­rie­re­frei gestaltet sein müssen, darunter kom­mer­zi­el­le Websites, On­line­shops und Bu­chungs­por­ta­le. Ziel der digitalen Bar­rie­re­frei­heit ist es, allen Menschen den best­mög­li­chen Zugang zum digitalen Leben zu er­mög­li­chen – un­ab­hän­gig von kör­per­li­chen oder ko­gni­ti­ven Ein­schrän­kun­gen.

Bar­rie­re­frei­heit in WordPress und Co. ist nicht nur eine Frage der Ge­set­zes­kon­for­mi­tät, sondern auch ein Zeichen von Inklusion, Pro­fes­sio­na­li­tät und Nut­zer­freund­lich­keit. Menschen mit Ein­schrän­kun­gen – etwa Seh- oder Hör­be­hin­de­run­gen, mo­to­ri­schen oder neu­ro­lo­gi­schen Be­ein­träch­ti­gun­gen – sind auf bar­rie­re­freie Inhalte an­ge­wie­sen. Aber auch alle anderen Be­su­che­rin­nen und Besucher pro­fi­tie­ren von gut struk­tu­rier­ten Inhalten wie klarer Sprache und hohen Kon­tras­ten.

Was macht eine bar­rie­re­freie WordPress-Website aus?

Bar­rie­re­frei­es Webdesign be­rück­sich­tigt eine Vielzahl an An­for­de­run­gen, die sich in den in­ter­na­tio­na­len Web Content Ac­ces­si­bi­li­ty Gui­de­lines (WCAG) der W3C wi­der­spie­geln. Diese Richt­li­ni­en lassen sich in vier zentrale Prin­zi­pi­en zu­sam­men­fas­sen – bekannt unter dem Kürzel POUR:

• Wahr­nehm­bar (Per­ceiva­ble): Inhalte müssen für alle Nut­ze­rin­nen und Nutzer erfassbar sein. Dazu gehören Al­ter­na­tiv­tex­te für Bilder, gut er­kenn­ba­re Schrift­grö­ßen, aus­rei­chen­de Farb­kon­tras­te, Be­schrei­bun­gen für Au­dio­in­hal­te oder Un­ter­ti­tel für Videos. Außerdem sollten Über­schrif­ten, Listen und Tabellen nicht nur optisch, sondern auch technisch korrekt aus­ge­zeich­net sein.
• Bedienbar (Operable): Jede Seite sollte voll­stän­dig mit der Tastatur na­vi­gier­bar sein – inklusive Menüs, For­mu­lar­fel­dern oder in­ter­ak­ti­ven Elementen. Der Fokus (sichtbare Auswahl) muss gut erkennbar sein und einer logischen Rei­hen­fol­ge folgen. Bewegte Inhalte sollten pau­sier­bar sein und keine epi­lep­sie­aus­lö­sen­den Effekte enthalten.
• Ver­ständ­lich (Un­der­stan­da­ble): Inhalte müssen klar struk­tu­riert, sprach­lich ver­ständ­lich und kon­sis­tent aufgebaut sein. Das betrifft sowohl die Sprach­ebe­ne (z. B. einfache For­mu­lie­run­gen und ein­deu­ti­ge Me­nü­punk­te) als auch die tech­ni­sche Umsetzung (z. B. korrekte Formulare, ver­ständ­li­che Feh­ler­mel­dun­gen und eine ein­heit­li­che Na­vi­ga­ti­on).
• Robust (Robust): Eine bar­rie­re­freie Website mit WordPress sollte mit möglichst vielen Geräten, Browsern und Hilfs­mit­teln kom­pa­ti­bel sein. Das betrifft ins­be­son­de­re Screen­rea­der, Braille­zei­len und Sprach­aus­ga­be-Software, die struk­tu­rier­te Inhalte vor­aus­set­zen. Auch die saubere Codierung nach Standards ist ent­schei­dend.

WordPress bar­rie­re­frei: Schritt für Schritt zum bar­rie­re­ar­men Web­pro­jekt

WordPress ist eines der weltweit am häu­figs­ten ein­ge­setz­ten Content-Ma­nage­ment-Systeme – und bietet viele Mög­lich­kei­ten, bar­rie­re­freie Inhalte zu gestalten. Der Erfolg hängt dabei stark vom gewählten Theme und der Sorgfalt bei der In­halts­er­stel­lung ab. Spä­tes­tens mit dem Einsatz der richtigen Plugins wird WordPress zu einem voll­um­fas­sen­den bar­rie­re­frei­en CMS.

Schritt 1: Ein bar­rie­re­frei­es WordPress-Theme wählen

Um Ihre Website mit WordPress bar­rie­re­frei zu gestalten, ist ein bar­rie­re­frei­es Theme die Grund­vor­aus­set­zung. Im of­fi­zi­el­len Theme-Ver­zeich­nis von WordPress finden Sie unter dem Label „Ac­ces­si­bi­li­ty ready“ eine Auswahl an Themes, die grund­le­gen­de An­for­de­run­gen der Bar­rie­re­frei­heit erfüllen. Diese Themes wurden speziell geprüft, um z. B. die Tas­ta­tur­na­vi­ga­ti­on, saubere HTML-Struk­tu­ren, Fokus-Steuerung und aus­rei­chen­de Kontraste zu ge­währ­leis­ten.

Zu den emp­feh­lens­wer­ten „WordPress bar­rie­re­frei“-Themes zählen:

• Twenty Twenty-One: Das Standard-Theme ist modern, mi­ni­ma­lis­tisch und bar­rie­re­frei
• Neve: Schnell, responsiv und zu­gäng­lich – mit Fokus auf Per­for­mance und Kom­pa­ti­bi­li­tät
• CursorFSE: Schlich­tes, re­spon­si­ves und bar­rie­re­frei­es WordPress-Block-Theme für Blogger, Blog­ge­rin­nen und KMUs
• Ge­ne­ra­te­Press: Ein leicht­ge­wich­ti­ges Theme mit hohem Fokus auf Ac­ces­si­bi­li­ty und SEO

Schritt 2: Inhalte richtig struk­tu­rie­ren

Bei einer bar­rie­re­frei­en Website in WordPress sollten der re­sul­tie­ren­de Code und die Art und Weise, wie Sie die Inhalte erstellen, Hand in Hand gehen. Achten Sie auf eine logische, se­man­ti­sche Struktur, die sich vor allem in folgenden Elementen äußert:

• Über­schrif­ten­hier­ar­chie: Verwenden Sie auf jeder Seite HTML-Über­schrif­ten in logischer Rei­hen­fol­ge, also <h1> für die Haupt­über­schrift (meist au­to­ma­tisch vergeben), gefolgt von <h2>, <h3> usw. Vermeiden Sie es, Texte lediglich durch Schrift­grö­ße oder Fettdruck her­vor­zu­he­ben.
• Absätze und Listen: Gliedern Sie Inhalte in sinnvolle Ab­schnit­te. Nutzen Sie Auf­zäh­lun­gen und num­me­rier­te Listen für eine bessere Ori­en­tie­rung – auch für Screen­rea­der.
• Ver­lin­kun­gen: Verwenden Sie aus­sa­ge­kräf­ti­ge Linktexte wie „PDF mit Preisen her­un­ter­la­den“ anstelle von „Hier klicken“.
• Tabellen: Setzen Sie Tabellen nur für ta­bel­la­ri­sche Inhalte ein und niemals für das Layout. Verwenden Sie Ta­bel­len­über­schrif­ten und be­schrei­ben­de <caption>-Elemente.

Schritt 3: Bilder und Me­di­en­in­hal­te bar­rie­re­frei zu­gäng­lich machen

Alle visuellen und mul­ti­me­dia­len Inhalte sollten durch bar­rie­re­freie Al­ter­na­ti­ven ergänzt werden. Sofern es für das Ver­ständ­nis der Seite relevant ist, sind be­schrei­ben­de Al­ter­na­tiv­tex­te für jedes Bild un­ver­zicht­bar. De­ko­ra­ti­ve Bilder können mit einem leeren Tag (alt="") markiert oder per CSS ein­ge­bun­den werden.

Ihre Videos sollten Sie mithilfe von Un­ter­ti­teln und Au­dio­be­schrei­bun­gen auch für Menschen mit Hör- oder Seh­be­hin­de­rung zu­gäng­lich machen. Auch eine schrift­li­che Tran­skrip­ti­on ist für alle Be­su­chen­den sowie für die Erfassung des Contents durch Such­ma­schi­nen sinnvoll. Gleiches gilt für Podcasts oder Au­dio­da­tei­en. WordPress bietet hierfür in der Mediathek ent­spre­chen­de Ein­ga­be­fel­der. Ver­schie­de­ne Er­wei­te­run­gen wie das WordPress-Bar­rie­re­frei­heits-Plugin WP Ac­ces­si­bi­li­ty erinnern Sie an fehlende Alt-Texte.

Schritt 4: Tas­ta­tur­na­vi­ga­ti­on er­mög­li­chen

Ein häufiger Stol­per­stein für alle, die Ihr Projekt in WordPress bar­rie­re­frei gestalten möchten, ist die Na­vi­ga­ti­on per Tastatur. Testen Sie daher unbedingt mit der Tab-Taste, ob

• alle Me­nü­punk­te und Formulare er­reich­bar sind,
• der sichtbare Fokus deutlich erkennbar ist,
• keine Inhalte über­sprun­gen oder doppelt an­ge­sprun­gen werden und
• die Rei­hen­fol­ge der Fokus-Elemente logisch dem Sei­ten­auf­bau ent­spricht.

Ein „Skip to content“-Button am Sei­ten­an­fang hilft Nut­ze­rin­nen und Nutzern, Inhalte direkt an­zu­steu­ern und die Na­vi­ga­ti­on zu über­sprin­gen – das bar­rie­re­freie Plugin Ally fügt eine solche Schalt­flä­che au­to­ma­tisch hinzu, wenn die ent­spre­chen­de Option aktiviert ist.

Schritt 5: WordPress-Formulare bar­rie­re­frei gestalten

Kon­takt­for­mu­la­re oder Be­stell­sei­ten sind besonders kritisch – sie müssen klar be­schrif­tet, feh­ler­re­sis­tent und auch ohne Maus bedienbar sein. Zu diesem Zweck sind folgende Kriterien zu erfüllen:

• Labels sollten jedem Ein­ga­be­feld korrekt zu­ge­ord­net sein.
• Pflicht­fel­der sollten sowohl visuell als auch technisch (z. B. per ARIA) ge­kenn­zeich­net sein.
• Feh­ler­mel­dun­gen müssen ver­ständ­lich sein und dürfen sich nicht aus­schließ­lich auf Farbe oder Icons verlassen.

WordPress-Kon­takt­for­mu­lar-Plugins wie Contact Form 7 oder die Premium-Er­wei­te­rung Gravity Forms bieten hier gute Mög­lich­kei­ten, sobald sie ent­spre­chend kon­fi­gu­riert wurden.

Schritt 6: Farben und Kontraste beachten

Eine gut ge­stal­te­te Website nutzt Farben, die nicht nur optisch an­spre­chend, sondern auch zu­gäng­lich sind:

• Die Kon­trast­ver­hält­nis­se von Text und Hin­ter­grund sollten min­des­tens 4,5:1 betragen (für große Texte 3:1).
• Verlassen Sie sich nicht allein auf Farbe, um In­for­ma­tio­nen zu ver­mit­teln (z. B. Fehler rot markieren UND be­schrif­ten).
• Verwenden Sie Tools wie den Colour Contrast Analyzer oder Plugins mit Live-Vorschau für die Über­prü­fung der Kon­trast­ver­hält­nis­se.

Zahl­rei­che „WordPress bar­rie­re­frei“-Plugins wie Ac­ces­si­bleWP bieten bereits in­te­grier­te Kon­trast­mo­di oder er­mög­li­chen es Be­su­che­rin­nen und Besuchern, Farben und Schrift­grö­ßen an­zu­pas­sen.

Bar­rie­re­frei­heit einer WordPress-Website testen

Damit Ihr WordPress-Projekt lang­fris­tig für alle Personen zu­gäng­lich bleibt, ist es wichtig, die Funk­tio­na­li­tät re­gel­mä­ßig zu über­prü­fen. Um die Bar­rie­re­frei­heit einer Website zu testen, können Sie ei­ner­seits auf die ent­spre­chen­den Features der ver­wen­de­ten Plugins zu­rück­grei­fen. Darüber hinaus gibt es eine Reihe von Web-Tools, mit denen Sie schnell her­aus­fin­den, an welchen Stellen es bei Ihren Seiten hapert:

• axe DevTools: Er­wei­te­rung für Chrome und Firefox mit de­tail­lier­ter Analyse gemäß WCAG
• WAVE (Web Ac­ces­si­bi­li­ty Eva­lua­ti­on Tool): Zeigt Barrieren direkt auf der Seite an – als Online-Tool oder Browser-Plugin verfügbar
• Google Light­house: Au­to­ma­ti­sier­te Tests in Chrome mit Scoring-System

Natürlich können Sie jederzeit auch manuell testen, ob Ihre Website in WordPress bar­rie­re­frei ist, indem Sie die Na­vi­ga­ti­on aus­pro­bie­ren oder die Inhalte testweise mit einem Screen­rea­der wie dem Open-Source-Tool NVDA wie­der­ge­ben lassen.