WordPress macht vieles einfach. Man installiert ein Theme, baut Seiten mit Blöcken oder einem Pagebuilder, ergänzt ein paar Plugins und schon steht die Website.
Genau das ist aber auch das Problem.
Denn eine WordPress-Website kann optisch gut aussehen und trotzdem voller Barrieren stecken. Ein schönes Menü kann mit der Tastatur unbedienbar sein. Ein modernes Kontaktformular kann unklare Fehlermeldungen haben. Ein Slider kann schick wirken, aber Screenreader verwirren. Und ein Accessibility-Plugin allein macht aus einer schlechten Struktur noch keine barrierefreie Website.
Wenn du deine WordPress-Website barrierefreier machen möchtest, brauchst du keinen Panikmodus. Aber du brauchst einen klaren Ablauf.
Diese Schritt-für-Schritt-Anleitung hilft dir dabei.
1. Prüfe zuerst, ob deine Website betroffen sein kann
Bevor du technisch loslegst, solltest du grob klären, warum du deine WordPress-Website barrierefrei machen möchtest.
Geht es dir allgemein um bessere Nutzerfreundlichkeit?
Geht es um das BFSG?
Hast du einen Online-Shop?
Können Besucher Termine buchen?
Gibt es Kontaktformulare, Downloads, Kursbereiche oder Mitgliederbereiche?
Richtet sich dein Angebot an Verbraucher?
Nicht jede WordPress-Website fällt automatisch unter das BFSG. Eine reine Informationsseite ist anders zu bewerten als ein WooCommerce-Shop, ein Buchungssystem oder ein digitaler Kursverkauf.
Trotzdem lohnt sich Barrierefreiheit fast immer. Sie macht deine Website klarer, verständlicher und professioneller.
2. Mache eine ehrliche Bestandsaufnahme
Bevor du etwas änderst, öffne deine Website wie ein normaler Besucher.
Schau dir besonders diese Bereiche an:
Startseite, Menü, Leistungsseiten, Kontaktseite, Blog, Formulare, Shop, Warenkorb, Checkout, Terminbuchung, Login, Kundenkonto, Downloads und mobile Ansicht.
Notiere dir, wo Nutzer wirklich handeln müssen. Genau diese Stellen sind am wichtigsten.
Bei einer Firmenwebsite ist das oft das Kontaktformular.
Bei einem Shop ist es der Weg vom Produkt bis zur Zahlung.
Bei einem Coach ist es vielleicht die Terminbuchung.
Bei einem Verein sind es Termine, Mitgliedsantrag und Kontakt.
Du musst nicht alles auf einmal perfekt machen. Aber du solltest wissen, wo die größten Baustellen liegen.
3. Teste die Website ohne Maus
Das ist der einfachste Praxistest.
Lege die Maus weg und nutze nur die Tastatur. Mit der Tab-Taste springst du durch die Seite. Mit Enter öffnest du Links und Buttons. Mit Escape solltest du Popups oder Menüs schließen können.
Prüfe:
Kommst du durch das Menü?
Siehst du, wo du gerade bist?
Kannst du Formulare ausfüllen?
Kannst du Buttons erreichen?
Kannst du Popups schließen?
Kannst du den Checkout oder die Terminbuchung bedienen?
Wenn du selbst hängenbleibst, ist das ein klares Zeichen. Dann haben Nutzer mit Tastatur, Screenreader oder motorischen Einschränkungen wahrscheinlich echte Probleme.
4. Wähle ein möglichst sauberes Theme
Das Theme ist die Grundlage deiner WordPress-Website. Wenn das Theme schlecht aufgebaut ist, kann später viel Arbeit entstehen.
Achte bei der Theme-Auswahl auf:
saubere HTML-Struktur, gute Tastaturbedienung, sichtbaren Fokus, ausreichende Kontraste, mobile Optimierung, klare Navigation und regelmäßige Updates.
Viele Themes werben mit „accessibility ready“. Das ist ein gutes Zeichen, aber keine Garantie. Es bedeutet nicht, dass jede Website mit diesem Theme automatisch barrierefrei ist. Deine Inhalte, Plugins und Einstellungen spielen weiterhin eine große Rolle.
Wenn du bereits ein Theme nutzt, musst du nicht sofort alles wechseln. Aber du solltest prüfen, ob das Theme grundlegende Dinge sauber unterstützt.
5. Verlasse dich nicht nur auf ein Accessibility-Plugin
Es gibt WordPress-Plugins, die bei Barrierefreiheit helfen. Manche ergänzen Skip-Links, verbessern Fokus-Stile, markieren fehlende Alt-Texte oder bieten Kontrastfunktionen.
Das kann nützlich sein.
Aber ein Plugin kann nicht alles reparieren.
Es kann keine falsch aufgebaute Seitenstruktur vollständig heilen. Es macht schlechte Texte nicht verständlich. Es löst keine unklaren Formulare. Es macht einen komplizierten Checkout nicht automatisch nutzerfreundlich.
Nutze Plugins also als Unterstützung, nicht als Ausrede.
Ein Symbol am Seitenrand ersetzt keine saubere Website.
6. Bringe deine Überschriften in Ordnung
Überschriften sind nicht nur Design. Sie sind die Struktur deiner Seite.
Jede wichtige Seite sollte eine klare Hauptüberschrift haben. Danach folgen Zwischenüberschriften in sinnvoller Reihenfolge.
Typischer Fehler in WordPress: Man wählt Überschriften nach Aussehen aus. Eine H3 sieht schöner aus als eine H2, also nimmt man H3. Oder eine H1 wird mehrfach verwendet, weil sie groß wirkt.
Besser ist:
H1 für den Seitentitel.
H2 für Hauptabschnitte.
H3 für Unterpunkte innerhalb eines Abschnitts.
Wenn dir die Optik nicht gefällt, ändere das Design per CSS oder Theme-Einstellungen. Die Überschriftenstruktur sollte logisch bleiben.
7. Verbessere Kontraste und Farben
Viele WordPress-Websites haben zu schwache Kontraste. Besonders gerne passiert das bei grauen Texten, hellen Buttons, Text auf Bildern oder modernen Pastellfarben.
Prüfe:
Fließtext, Links, Buttons, Menü, Footer, Formularfelder, Fehlermeldungen und Hinweise.
Wichtig ist auch: Informationen sollten nicht nur über Farbe vermittelt werden.
Wenn ein Formularfehler nur durch eine rote Umrandung angezeigt wird, fehlt vielen Nutzern die eigentliche Erklärung. Besser ist zusätzlich ein klarer Hinweistext.
Kontrast ist kein Design-Killer. Gute Kontraste lassen eine Website oft sogar hochwertiger wirken.
8. Sorge für gut lesbare Schrift
Viele Seiten sehen am großen Bildschirm gut aus, sind aber auf dem Smartphone anstrengend.
Achte auf:
ausreichende Schriftgröße, angenehmen Zeilenabstand, kurze Absätze, klare Zwischenüberschriften und genug Abstand zwischen Elementen.
Vermeide lange Textblöcke. Gerade bei Ratgeberseiten, Leistungsseiten oder rechtlichen Informationen ist Struktur wichtig.
Ein guter Text darf atmen. Das macht ihn nicht nur barriereärmer, sondern auch angenehmer zu lesen.
9. Schreibe klare Button- und Linktexte
In WordPress sieht man oft Buttons wie:
„Mehr erfahren“
„Hier klicken“
„Weiter“
„Jetzt starten“
Das ist nicht immer falsch, aber oft zu ungenau.
Besser sind konkrete Texte:
„Kontaktformular öffnen“
„Termin buchen“
„Produkt in den Warenkorb legen“
„PDF herunterladen“
„Angebot anfragen“
„Mitgliedschaft beantragen“
Ein guter Button sagt, was danach passiert. Das hilft allen Nutzern, besonders aber Menschen, die sich Inhalte per Screenreader erschließen.
10. Gib Bildern sinnvolle Alt-Texte
In WordPress kannst du in der Mediathek Alt-Texte hinterlegen. Nutze diese Möglichkeit bewusst.
Ein Alt-Text sollte beschreiben, was auf dem Bild wichtig ist. Nicht jedes Bild braucht einen Roman. Aber wenn das Bild eine Information trägt, muss diese Information auch ohne Bild verständlich sein.
Beispiel:
Schlecht:
„Bild Website“
Besser:
„Screenshot einer WordPress-Kontaktseite mit Formularfeldern für Name, E-Mail und Nachricht.“
Bei rein dekorativen Bildern reicht oft ein leerer Alt-Text. Wichtig ist: Nicht jedes Bild künstlich überbeschreiben, aber relevante Inhalte nicht verschweigen.
11. Prüfe Formulare besonders gründlich
Formulare sind häufige Problemstellen in WordPress.
Kontaktformular, Newsletter, Anfrageformular, Bewerbungsformular, Checkout, Login, Buchung, Kommentarformular – überall können Barrieren entstehen.
Prüfe:
Sind alle Felder klar beschriftet?
Sind Pflichtfelder verständlich markiert?
Sind Fehlermeldungen konkret?
Bleiben Eingaben erhalten, wenn ein Fehler passiert?
Kann man Checkboxen mit der Tastatur bedienen?
Ist der Absenden-Button eindeutig?
Funktioniert das Formular mobil?
Nicht hilfreich ist eine Fehlermeldung wie „Fehler beim Senden“.
Besser ist:
„Bitte geben Sie eine gültige E-Mail-Adresse ein.“
„Bitte füllen Sie das Feld Name aus.“
„Bitte akzeptieren Sie die Datenschutzbestimmungen.“
Gerade bei Formular-Plugins lohnt sich ein genauer Blick.
12. Mache Menüs und Dropdowns bedienbar
Viele WordPress-Themes haben schöne Menüs. Aber schön heißt nicht automatisch zugänglich.
Prüfe:
Kann das Hauptmenü mit der Tastatur genutzt werden?
Sind Untermenüs erreichbar?
Schließt sich das Menü nicht plötzlich?
Funktioniert das mobile Menü sauber?
Ist der aktuelle Menüpunkt erkennbar?
Sind Menüpunkte verständlich benannt?
Besonders mobile Menüs machen oft Ärger. Ein Hamburger-Menü, das nur mit der Maus oder per Touch sauber funktioniert, kann für Tastaturnutzer schwierig sein.
13. Entferne oder entschärfe problematische Slider
Slider sind auf WordPress-Websites immer noch beliebt. Große Bilder, wechselnde Texte, Animationen. Das sieht erstmal nach Bewegung und Modernität aus.
Aus Sicht der Barrierefreiheit sind Slider aber oft problematisch.
Sie wechseln zu schnell, sind schlecht mit der Tastatur bedienbar, haben unklare Bedienelemente oder lenken vom Inhalt ab.
Wenn du einen Slider nutzt, prüfe:
Kann man ihn pausieren?
Sind die Steuerungen erreichbar?
Wechselt er nicht zu schnell?
Sind Texte gut lesbar?
Funktioniert er mobil?
Ist der Inhalt auch ohne Slider zugänglich?
Oft ist ein statischer Hero-Bereich mit klarer Botschaft besser als ein unruhiger Slider.
14. Achte auf Popups, Cookie-Banner und Chat-Widgets
Popups können eine komplette Website blockieren.
Newsletter-Popup, Rabattfenster, Cookie-Banner, Chat-Widget, Bewertungsfenster – all das kann Nutzer stören, wenn es nicht sauber umgesetzt ist.
Prüfe:
Kann man das Element mit der Tastatur erreichen?
Kann man es schließen?
Ist der Schließen-Button klar erkennbar?
Wird der Fokus richtig geführt?
Blockiert es keine wichtigen Inhalte?
Ist es mobil nicht zu groß?
Ein Cookie-Banner, das sich nicht bedienen lässt, ist kein kleines Detail. Es steht buchstäblich vor der Website.
15. Prüfe Pagebuilder-Inhalte genauer
Viele WordPress-Websites werden mit Elementor, Divi, WPBakery, Bricks oder anderen Buildern erstellt. Das ist praktisch, kann aber Barrieren erzeugen.
Typische Probleme sind:
falsche Überschriftenreihenfolge, zu viele verschachtelte Container, Buttons ohne klare Texte, Animationen ohne Nutzen, schlechte Fokus-Stile, unklare Tabs, Akkordeons oder Slider.
Pagebuilder sind nicht automatisch schlecht. Man muss nur bewusster arbeiten.
Baue Inhalte nicht nur nach Optik. Achte darauf, dass die Struktur logisch bleibt.
16. Mache WooCommerce besonders sorgfältig barriereärmer
Wenn deine WordPress-Seite WooCommerce nutzt, ist der Shop-Prozess besonders wichtig.
Prüfe:
Produktseite, Varianten-Auswahl, Warenkorb, Gutscheinfeld, Checkout, Zahlungsarten, Fehlermeldungen, Bestellübersicht, Kundenkonto und Bestellbestätigung.
Gerade Varianten wie Größe, Farbe oder Menge müssen verständlich bedienbar sein. Auch Fehlermeldungen im Checkout sollten klar sagen, was fehlt.
Bei WooCommerce zählt nicht nur die Startseite. Entscheidend ist der komplette Kaufprozess.
17. Vergiss PDFs und Downloads nicht
Viele WordPress-Websites laden PDFs hoch: Preislisten, Speisekarten, Flyer, Anträge, Broschüren, Datenblätter oder Formulare.
Das ist praktisch, aber oft nicht barrierearm.
Prüfe:
Sind wichtige Informationen auch als normaler Website-Text vorhanden?
Sind PDFs nicht nur eingescannt?
Ist der Text im PDF markierbar?
Sind Dokumente logisch aufgebaut?
Sind Dateinamen verständlich?
Funktionieren Downloads mobil?
Wenn eine wichtige Information nur in einem schlecht lesbaren PDF steckt, ist das für viele Menschen unnötig schwer.
18. Untertitel für Videos einplanen
Videos sind auf WordPress-Seiten schnell eingebunden. YouTube, Vimeo, eigene Videos, Webinare, Produktvideos oder Kurslektionen.
Aber Videos sollten auch ohne Ton verständlich sein.
Achte auf:
Untertitel, kurze Zusammenfassung, verständliche Player-Steuerung und keine automatisch startenden Videos mit Ton.
Untertitel helfen nicht nur Menschen mit Hörbehinderung. Viele Nutzer schauen Videos unterwegs oder im Büro ohne Ton.
19. Teste die mobile Ansicht wirklich gründlich
Viele WordPress-Seiten werden am Desktop gebaut und mobil nur kurz überflogen. Das reicht nicht.
Prüfe auf dem Smartphone:
Menü, Buttons, Formulare, Shop, Checkout, Cookie-Banner, Popups, Slider, Tabellen, Karten, Kontaktbereich und Footer.
Achte darauf, ob Elemente überlappen, zu klein sind oder aus dem Bildschirm laufen.
Eine Website, die mobil mühsam ist, ist heute für viele Besucher einfach eine schlechte Website.
20. Nutze automatische Tests, aber verlasse dich nicht darauf
Es gibt gute Tools, die häufige Probleme erkennen. Sie finden zum Beispiel fehlende Alt-Texte, Kontrastprobleme, leere Buttons oder technische Fehler.
Das ist hilfreich.
Aber automatische Tests erkennen nicht alles. Sie wissen nicht sicher, ob ein Buttontext wirklich verständlich ist. Sie merken nicht immer, ob ein Buchungsprozess logisch ist. Und sie können nicht beurteilen, ob dein Text für normale Besucher klar ist.
Deshalb gilt:
Automatischer Test ja.
Manueller Tastaturtest ja.
Mobiler Test ja.
Echter Blick auf Nutzerwege ja.
Die Kombination macht den Unterschied.
21. Dokumentiere deine Verbesserungen
Wenn du deine WordPress-Seite barriereärmer machst, halte fest, was du geändert hast.
Zum Beispiel:
Theme geprüft, Kontraste angepasst, Fokus sichtbar gemacht, Formulare überarbeitet, Alt-Texte ergänzt, Checkout getestet, PDFs ersetzt, mobile Ansicht verbessert.
Diese Dokumentation hilft dir später. Du weißt, was schon erledigt ist und was noch offen bleibt.
Gerade bei größeren Websites ist das Gold wert.
22. Barrierefreiheit als laufenden Prozess sehen
Eine WordPress-Website verändert sich ständig. Neue Beiträge, neue Bilder, neue Plugins, neue Landingpages, neue Formulare.
Deshalb reicht es nicht, einmal aufzuräumen und das Thema dann zu vergessen.
Lege einfache Regeln fest:
Neue Bilder bekommen Alt-Texte.
Neue Seiten haben eine klare Überschriftenstruktur.
Neue Buttons bekommen verständliche Texte.
Neue Plugins werden kurz getestet.
Neue Formulare werden mit Tastatur geprüft.
Neue PDFs werden möglichst vermieden oder sauber erstellt.
So bleibt Barrierefreiheit im Alltag machbar.
Beispiel-Ablauf für eine kleine WordPress-Website
Wenn du nicht weißt, wo du anfangen sollst, nimm diesen einfachen Ablauf:
Zuerst testest du Startseite, Kontaktseite und mobile Ansicht.
Dann prüfst du Menü, Formulare und wichtigste Buttons.
Danach korrigierst du Überschriften, Kontraste und Alt-Texte.
Anschließend schaust du dir PDFs, Videos und Popups an.
Wenn du WooCommerce nutzt, kommt der komplette Kaufprozess dazu.
Zum Schluss dokumentierst du die wichtigsten Änderungen.
Das ist kein perfekter Audit. Aber es ist ein sehr guter Anfang.
Häufiger Fehler: Nur die Startseite verbessern
Viele Betreiber kümmern sich zuerst um die Startseite. Das ist verständlich, aber nicht genug.
Oft entstehen die größten Barrieren auf Unterseiten:
Kontaktformular, Checkout, Terminbuchung, Login, Kursbereich, Downloadseite, Blogartikel oder Landingpage.
Prüfe deshalb nicht nur die Seite, die am schönsten aussieht. Prüfe die Wege, die Nutzer wirklich gehen.
Häufiger Fehler: Barrierefreiheit erst am Ende beachten
Barrierefreiheit ist am einfachsten, wenn man sie beim Aufbau direkt mitdenkt.
Wenn die Website schon fertig ist, wird es oft mühsamer. Dann muss man nachträglich Struktur, Farben, Buttons, Formulare und Plugins korrigieren.
Bei neuen WordPress-Projekten solltest du deshalb früh daran denken:
Theme-Auswahl, Farben, Schriftgrößen, Navigationsstruktur, Formular-Plugin, Shop-System und Pagebuilder-Einstellungen.
Je früher du das einplanst, desto weniger Arbeit hast du später.
Fazit: WordPress barrierefrei machen beginnt mit sauberen Grundlagen
WordPress kann eine gute Basis für barrierearme Websites sein. Aber WordPress macht deine Seite nicht automatisch barrierefrei.
Theme, Plugins, Pagebuilder, Inhalte, Formulare, Bilder, PDFs und externe Tools müssen zusammenpassen. Genau dort entstehen die meisten Probleme.
Mein praktischer Rat: Fang nicht mit einem wilden Plugin-Marathon an. Fang mit den wichtigsten Nutzerwegen an. Kann man Kontakt aufnehmen? Kann man buchen? Kann man kaufen? Kann man die Seite ohne Maus bedienen? Kann man Texte gut lesen?
Wenn diese Grundlagen stimmen, bist du schon viel weiter als viele andere Websites.
Barrierefreiheit ist kein einmaliger Schalter. Es ist eher eine Arbeitsweise. Und wenn man sie Schritt für Schritt angeht, wird sie deutlich weniger kompliziert, als sie am Anfang klingt.
Dieser Artikel gibt eine allgemeine Orientierung und ersetzt keine Rechtsberatung.