Barrierefreie Website – Der komplette Guide für WordPress und Divi (inkl. Screenreader-Optimierung)

Das Thema Barrierefreiheit für Websites ist nicht nur ethisch wichtig, sondern seit dem neuen Barrierefreiheitsstärkungsgesetz (sag das mal 3x schnell hintereinander 😅) auch rechtlich relevant geworden.

Als Webdesignerin werde ich immer häufiger gefragt: „Muss meine Website barrierefrei sein?“ und „Wie mache ich meine WordPress-Website barrierefrei?“

In diesem ausführlichen Blogartikel zeige ich dir:

• Wann das neue Barrierefreiheitsgesetz für dich gilt
• Wie du prüfst, ob deine Website barrierefrei ist
• Schritt-für-Schritt Anleitungen für WordPress und Divi
• Wie du deine Website für Screenreader optimierst
• Welche Tools dir bei der Umsetzung helfen
• Häufige Fehler und wie du sie vermeidest

Was bedeutet Barrierefreiheit bei Websites?

Barrierefreiheit (auch Web Accessibility genannt) bedeutet, dass deine Website für alle Menschen zugänglich und nutzbar ist – unabhängig von körperlichen oder technischen Einschränkungen.

Das betrifft konkret Menschen mit:

• Sehbehinderungen oder Blindheit (nutzen oft Screenreader, wo ihnen der Bildschirminhalt vorgelesen wird)
• Hörbehinderungen oder Gehörlosigkeit
• Motorischen Einschränkungen (können z.B. keine Maus verwenden)
• Kognitiven Beeinträchtigungen
• Temporären Einschränkungen (z.B. gebrochener Arm)

Eine barrierefreie Website ist aber nicht nur für Menschen mit Behinderungen hilfreich – sie verbessert die Nutzererfahrung für alle Besucher*innen und kann sogar dein SEO-Ranking positiv beeinflussen! Also unabhängig davon, ob das Gesetz für dich gilt oder nicht, kannst du dir aus diesem Artikel eine Verbesserungsvorschläge für deine Website mitnehmen!

Das Barrierefreiheits-stärkungsgesetz – gilt es für deine Website?

Ab dem 28. Juni 2025 gilt das Barrierefreiheitsstärkungsgesetz (BFSG) auch für bestimmte private Unternehmen. Die wichtigste Frage ist: Bist du betroffen?

Wer muss seine Website barrierefrei gestalten?

Das Gesetz gilt für Unternehmen, die Dienstleistungen für Verbraucher*innen anbieten in folgenden Bereichen:

• E-Commerce und Online-Shops (Verkauf von Produkten)
• Dienstleistungen im Bereich Mobilität (z.B. Reisebuchungen, Taxi-Services)
• Bankwesen und Finanzdienstleistungen
• Kommunikationsdienste (Telefonie, Messaging)
• Personenbeförderung (Fluglinien, Bahn, Bus)
• Audiovisuelle Mediendienste (Streaming, Video-on-Demand)

So prüfst du, ob das Gesetz für dich gilt:

1. Bietest du Dienstleistungen für Endverbraucher*innen an? (B2C, nicht B2B)
2. Fällst du in eine der oben genannten Kategorien?
3. Hast du mehr als 10 Mitarbeiter*innen ODER einen Jahresumsatz über 2 Millionen Euro?

Wenn du alle drei Fragen mit „Ja“ beantwortest, dann gilt das Gesetz für dich. Für einen Großteil der Leser*innen hier – mich eingeschlossen – wird das Gesetz also offiziell nicht gelten.

Aber Achtung: Auch wenn du nicht direkt betroffen bist, ist es sinnvoll, deine Website barrierefrei zu gestalten – für bessere Nutzererfahrung und potenzielle Kund*innen.

Die Richtlinien für barrierefreie Websites – WCAG 2.1

Es wird jetzt etwas technisch, aber wichtig: Die Web Content Accessibility Guidelines (WCAG) 2.1 sind der internationale Standard für barrierefreie Websites. Sie basieren auf vier Grundprinzipien:

1. Wahrnehmbar (Perceivable)

Informationen müssen für alle Nutzer*innen wahrnehmbar sein.

Das heißt konkret: Die Inhalte müssen für alle erfassbar sein – auch z.B. für Menschen mit Seh- oder Hörbeeinträchtigung.
Beispiel:
Du hast ein schönes Bild auf deiner Startseite, das zeigt, wie du mit Kund*innen arbeitest. Wenn du keinen Alternativtext (ALT-Text) hinzufügst, weiß ein Screenreader nicht, was darauf zu sehen ist – und blinde Menschen bekommen diese Info nicht mit.
Lösung: Schreib z. B. als ALT-Text: „Coach arbeitet mit Kundin in hellem Büro, beide lachen.“

2. Bedienbar (Operable)

Die Website muss mit verschiedenen Eingabemethoden bedienbar sein.

Das heißt konkret: Nutzer*innen müssen sich auf deiner Website zurechtfinden – auch ohne Maus.
Beispiel:
Eine Nutzerin kann nur mit der Tastatur navigieren – doch dein Menü klappt nur per Maus auf? Dann ist die Seite für sie nicht nutzbar.
Lösung: Achte darauf, dass dein Menü, Buttons und Formulare per Tabulator erreichbar sind. Das kannst du selbst testen: Einfach mal mit der Tab-Taste durch deine Seite springen.

3. Verständlich (Understandable)

Inhalte und Bedienung müssen verständlich sein.

Das heißt konkret: Inhalte und Bedienung sollen klar und nachvollziehbar sein – auch bei kognitiven Einschränkungen oder wenn Deutsch nicht die Muttersprache ist.
Beispiel:
Du schreibst: „Tragen Sie zur Authentifizierung bitte Ihren Token ein.“
Vielleicht wissen aber viele gar nicht, was genau ein Token und eine Authentifizierung genau sind. Verständlicher wäre: „Gib bitte deinen Anmeldecode ein.“
Lösung: Vermeide Fachchinesisch und erkläre, was du meinst – am besten so, dass auch 12-jährige ohne Expertise in deinem Bereich verstehen können.

4. Robust (Robust)

Die Website muss mit verschiedenen Technologien kompatibel sein.

Es gibt drei Konformitätsstufen: A (grundlegend), AA (erweitert) und AAA (höchste Stufe). Für die meisten Websites ist Level AA der angestrebte Standard.

Das heißt konkret: Deine Website sollte mit möglichst vielen Geräten, Browsern und Hilfstechnologien funktionieren.
Beispiel:
Ein Formularfeld ist falsch programmiert, sodass ein Screenreader es nicht erkennt – z. B. fehlt das „Label“, das erklärt, was hier eingetragen werden soll.
Lösung: Nutze sauberen, standardkonformen HTML-Code oder gute Page Builder mit sinnvoller Strukturierung. Lass deine Seite am besten mal von einem Screenreader „vorlesen“ – du wirst staunen, was da (nicht) ankommt.

Und was ist mit den Stufen A, AA und AAA?

Die WCAG kennt drei Stufen:

• A: Das absolute Minimum – hier geht es z. B. um einfache Tastaturbedienung oder ALT-Texte.
• AA: Der Standard, den öffentliche Stellen und auch die meisten Unternehmen anstreben sollten.
• AAA: Die Königsdisziplin – zum Beispiel mit Gebärdensprachvideos oder besonders einfacher Sprache.

Für die meisten Websites reicht Level AA – aber selbst das ist oft noch Neuland. Und genau deshalb lohnt sich ein Blick auf die wichtigsten Stellschrauben, die du auch ohne Technikstudium umsetzen kannst. Bevor du damit loslegst, kannst du erstmal den Status Quo abfragen.

So prüfst du, ob deine WordPress-Website barrierefrei ist

Bevor du mit der Optimierung beginnst, solltest du deine WordPress-Website einmal unter die Lupe nehmen.

Das kannst du zum Beispiel mit den folgenden Tools ausprobieren:

Automatisierte Tests über Online-Tools

1. Experte.de
   • Mein aktueller Favorit!
   • Als Website aufrufbar: https://www.experte.de/barrierefreiheit
   • Prüft deine Website und alle Unterseiten und gibt dir deutschsprachige Hinweise dazu, was genau auf welcher Seite optimiert werden müsste (z.B. Kontrast erhöhen)
2. WAVE (Web Accessibility Evaluation Tool)
   • Kostenlose Browser-Erweiterung
   • Zeigt Fehler direkt auf der Website an
   • Link: wave.webaim.org
3. axe DevTools
   • Browser-Erweiterung für Chrome/Firefox
   • Sehr detaillierte Fehleranalyse
   • Perfekt für Entwickler*innen
4. Lighthouse
   • In Chrome DevTools integriert
   • Prüft auch Performance und SEO
   • Rechtsklick → Untersuchen → Lighthouse

Nach der Analyse wird dir dann ein umfangreicher Bericht zur Verfügung gestellt inkl. Verbesserungshinweisen (die mal mehr, mal weniger kryptisch sind 😬)

Manuelle Tests

Automatisierte Tools erfassen nur etwa 30% aller Barrieren. Daher sind manuelle Tests wichtig:

1. Tastatur-Navigation testen
   • Navigiere nur mit der Tab-Taste durch deine Website
   • Alle Elemente sollten erreichbar und sichtbar fokussiert sein
2. Screenreader testen auf deinem Computer
   • Windows: NVDA (kostenlos)
   • Mac: VoiceOver (integriert)
   • Teste, ob alle Inhalte vorgelesen werden (ist nicht ganz einfach, die Bedienung von Screenreadern zu verstehen, je nachdem welches System du nutzt musst du dafür evtl. noch eine spezielle Anleitung zu Rate ziehen)
3. Kontraste prüfen
   • Hierzu gibt es viele kostenlose Tools, ich mag: https://coolors.co/contrast-checker/112a46-acc8e5
   • Prüfe für kleinen und großen Text, ob der Kontrast ausreichend ist und erhöhe ihn nach Bedarf

Hierzu gelten die offiziellen Empfehlungen für Level AA:

Ein Kontrastverhältnis von mindestens 4,5:1 ist erforderlich für normalen Fließtext.
Für großen Text (mindestens 18 pt oder fett formatiert) genügt ein Verhältnis von 3:1.

Level AAA (höchste Stufe):

Ein Verhältnis von mindestens 7:1 für normalen Text
und mindestens 4,5:1 für großen oder fetten Text.

Barrierefreiheit in WordPress umsetzen – Schritt für Schritt

WordPress bietet von Haus aus bereits eine gute Basis für Barrierefreiheit. Hier ist deine Schritt-für-Schritt-Anleitung:

Schritt 1: Barrierefreies Theme wählen

Wenn du noch kein Theme hast, wähle ein Theme, das als „accessibility-ready“ bzw. „Für Barrierefreiheit geeignet“ zertifiziert ist.

In WordPress kannst du dazu bei Design -> Themes nach Funktionen filtern:

Beliebte barrierefreie Themes sind:

• Twenty Twenty-Four
• Astra
• GeneratePress
• Kadence

Wenn du wie ich das Divi-Theme nutzt, kannst du weiter unten Tipps finden, wie du deine Inhalte damit weitestgehend barrierefrei umsetzt.

Schritt 2: Überschriften richtig strukturieren

Sorge dafür, dass die Überschriften auf deinen Seiten – mit H1, H2 usw. eingeteilt – korrekt verwendet werden. Auf jeder Seite kannst du nur eine H1 verwenden, wenn du weitere Unterüberschriften hast, sollten diese H2 sein und Überschriften, die deine Inhalte noch feiner einteilen dann H3, also ungefähr so:

html<h1>Hauptüberschrift (nur einmal pro Seite)</h1>
<h2>Hauptabschnitt</h2>
<h3>Unterabschnitt</h3>
<h2>Zweiter Hauptabschnitt</h2>

Ich kenne ja einige, die die Überschriften danach auswählen, wie groß der Text gerade dargestellt werden soll – das solltest du allerdings ab jetzt nicht mehr tun.

In WordPress:

• Nutze die Überschriften-Blöcke im Gutenberg-Editor (oder im Divi Builder beim Textmodul die H1, H2 etc. Auswahl)
• Überspringe keine Überschriftenebenen (nicht von H1 auf H3)
• Pro Seite nur eine H1-Überschrift

Übrigens empfehle ich dir auch wenn du das Divi-Theme oder ein anderes Theme mit Pagebuilder verwendest, die Blogartikel ruhig mit dem Gutenberg-Editor zu schreiben. Der erzeugt meist sehr sauberen Code ohne Schnickschnack, während du bei Pagebuildern eigentlich immer noch weitere Codeschnipsel auf deiner Seite hast, die die Barrierefreiheit verringern.

Schritt 3: Alt-Texte für alle Bilder

Generell solltest du schon beim Hochladen der Bilder in deine Mediathek darauf achten, dass du einen „vernünftigen“ = sprechenden Dateinamen (also z.B. Frau-am-Computer.jpg statt IMG01238.jpg) verwendest.

In den ALT-Texten /ALT Tags beschreibst du dann, was genau in dem Bild zu sehen ist.

So geht’s in WordPress:

1. Klicke auf ein Bild im Editor (oder in der Mediathek)
2. Rechte Sidebar → „Alt-Text (alternativer Text)“
3. Beschreibe den Bildinhalt prägnant – was sieht man auf dem Bild?
4. Bei dekorativen Bildern: Alt-Text leer lassen, sonst wird vom Screenreader was vorgelesen, was gar nicht relevant ist

Gute Alt-Texte:

• „Frau arbeitet am Laptop im Café“
• „Balkendiagramm zeigt Umsatzsteigerung von 20%“

Schlechte Alt-Texte:

• „Bild1.jpg“
• „Klicke hier“
• Zu lange Beschreibungen

Schritt 4: Links verständlich gestalten

Schlechte Linktexte:

• „Hier klicken“
• „Weiterlesen“
• „Mehr“

Gute Linktexte:

• „Kostenlose Website-Checkliste herunterladen“
• „Preise für Webdesign-Pakete ansehen“
• „Kontakt für individuelle Beratung“

Schritt 5: Farben und Kontraste optimieren

Als nächstes schaust du, ob du wirklich Farben mit guten Kontrasten verwendest – falls nicht, kannst du diese jetzt anpassen.

WordPress-Anpassungen:

1. Gehe zu Design → Customizer → Farben oder → Global – Farben (je nachdem, welches Theme du verwendest, kann dies auch an anderer Stelle stehen – bei Divi findest du Farben z.B. bei Divi → Theme Optionen → Standardpalette Farbauswähler und kannst diese dann separat bei Typographie, Buttons, Footer etc. im Theme Customizer einstellen)
2. Prüfe alle Farbkombinationen mit https://coolors.co/contrast-checker/112a46-acc8e5, oder WebAIM Contrast Checker (oder einem anderen Kontraste-Tool deiner Wahl)
3. Mindestkontrast: 4.5:1 für normalen Text, 3:1 für große Überschriften – wenn du es ganz genau wissen willst:

Schritt 6: Formulare barrierefrei gestalten

Wichtige Elemente:

• Jedes Eingabefeld braucht ein eindeutiges Label (quasi einen Titel für das Feld)
• Pflichtfelder solltest du deutlich kennzeichnen (üblich ist ein *)
• Fehlermeldungen sollten klar formuliert sein, damit man genau weiß, was nicht passt (z.B. Postleitzahl darf nur aus 5 Ziffern bestehen)

Schritt 7: Videos barrierefrei einbinden

• Untertitel für alle Videos
• Audio-Beschreibung für wichtige visuelle Inhalte
• Steuerelemente mit Tastatur bedienbar

Wenn du Videos aus Youtube einbettest, würdest du es über diesen angepassten Code machen können:

html<!-- Barrierefrei eingebettetes YouTube-Video -->
<div class="video-container" role="region" aria-label="Video: Website-Optimierung Tipps">
<iframe
src="https://www.youtube.com/embed/VIDEO-ID?cc_load_policy=1"
title="Website-Optimierung: 10 wichtige Tipps"
allowfullscreen>
</iframe>
</div>

Schritt 8: Menü barrierefrei gestalten

Damit dein Hauptmenü barierefrei wird, prüfe einmal die folgenden Punkte:

Skip-Links einbauen
Ermögliche deinen Besucher*innen, direkt zum Hauptinhalt zu springen – ohne sich erst durch zig Menüpunkte oder Header-Elemente tabben zu müssen. Das spart Nerven und Zeit. Beispiel: Ein unsichtbarer Link ganz oben auf der Seite, der beim Fokus sichtbar wird und direkt zum Inhalt führt. Klingt unscheinbar, macht aber einen riesigen Unterschied.

Tastaturfreundlich statt Maus-zentriert
Dein Menü sollte sich komplett mit der Tastatur bedienen lassen – also per Tab-Taste durchklickbar, Untermenüs sollten sich mit Enter öffnen lassen und nicht nur beim Hovern mit der Maus auftauchen. Probiere es selbst mal aus: Hände weg von der Maus und einmal durch die Navigation tabben. Läuft’s flüssig?

Aktuellen Menüpunkt markieren
Ein kleiner, aber wichtiger Helfer für die Orientierung: Markiere den aktuell aktiven Menüpunkt visuell – z. B. durch eine andere Farbe oder Unterstreichung. So wissen alle sofort, wo sie sich auf deiner Website gerade befinden.

Breadcrumb-Navigation ergänzen
Besonders auf größeren Websites lohnt sich eine Brotkrumen-Navigation (auch Breadcrumbs genannt). Sie zeigt übersichtlich den Pfad zur aktuellen Seite an – z. B. Startseite > Blog > SEO-Tipps. Du kennst es vielleicht aus Online-Shops, aber oft macht dies auch auf Websites mit viel Inhalt Sinn. Es hilft nicht nur Nutzer*innen mit Screenreader, sondern auch allen anderen, die sich sonst schnell verirren.

Schritt 9: Barrierefreie Schriftarten für Websites: Das solltest du bei der Schriftwahl beachten

Barrierefreiheit endet nicht beim Überschriftenlevel oder den Kontrasten – auch die gewählte Schriftart beeinflusst ganz erheblich, wie gut deine Inhalte wahrgenommen werden.

Denn: Eine schöne Schrift bringt nichts, wenn sie niemand entziffern kann.

Hier sind ein paar einfache, aber oft übersehene Regeln, mit denen du die Lesbarkeit deiner Website sofort verbesserst:

Diese Schriftarten solltest du auf barrierefreien Websites vermeiden

• Schnörkelschriften und verspielte Fonts (z. B. für Zitate oder Überschriften) wirken zwar hübsch, sind aber oft schwer lesbar, besonders für Menschen mit Legasthenie, Sehschwäche oder Konzentrationsproblemen.
  → Wenn überhaupt, dann bitte sparsam und nur dekorativ als Akzent verwenden.
• Zentrierter Fließtext über mehrere Zeilen:
  Klingt unwichtig, aber erschwert beim Lesen enorm die Orientierung – gerade bei längeren Absätzen. Der Blick muss bei jeder neuen Zeile erst wieder den Anfang suchen.
  → Besser: Linksbündig – das ist übrigens auch auf Mobilgeräten deutlich angenehmer. Netter Nebeneffekt: Verringert auch die Absprungrate deiner Besucher*innen, weil sie deinen Text besser und einfacher aufnehmen können!
• Längere Texte in Großbuchstaben (VERSALIEN):
  Wir erkennen Wörter nicht nur Buchstabe für Buchstabe, sondern als Form – Großbuchstaben zerstören diese Form und sollten daher auch nicht für längere Texte verwendet werden.
  → Verwende Großbuchstaben nur für ganz kurze Wörter oder Buttons.
• Zu dünne, zu kleine oder extrem gestaltete Schriftarten:
  Gerade bei kleiner Darstellung oder schlechtem Kontrast gehen feine Linien unter. Achte also darauf, dass insbesondere feine / dünne Schriftarten ausreichend groß dargestellt werden, damit sie lesbar bleiben.
  → Wichtig für Mobilansicht & ältere Bildschirme!

Empfohlene Schriftarten für barrierefreie Websites: 19 gut lesbare Fonts

Wenn du auf Nummer sicher gehen willst, nutze gut ausgebaute, serifenlose Schriften, die speziell für Bildschirmdarstellung optimiert wurden.
Hier findest du eine Auswahl von 19 Schriftarten, die sich für barrierefreie Websites besonders eignen:

Google Fonts – zuverlässig & DSGVO-konform einbindbar (lokal, wie ich das in diesem Blogartikel zeige)

• Poppins – klar, modern, vielseitig
• Open Sans – Klassiker mit sehr guter Lesbarkeit
• Inter – speziell für Interfaces entwickelt
• Roboto – technisch & vertraut
• Lato – weich und neutral
• Source Sans Pro – neutraler Allrounder
• Nunito / Nunito Sans – freundlich, leicht rund
• Work Sans – schlicht und effektiv
• IBM Plex Sans – modern mit Charakter
• Mulish – leicht und vielseitig einsetzbar

Weitere barrierefreundliche Schriften:

• Arial – langweilig, aber funktional
• Verdana – für Bildschirmdarstellung entwickelt
• Tahoma – sehr gute Abstände, ideal für kleinere Schrift
• Trebuchet MS – webfreundlich & robust
• Atkinson Hyperlegible – speziell für Sehbehinderte entwickelt
• Fira Sans – technisch, gut bei kleinen Schriftgrößen
• Segoe UI – von Microsoft für gute Lesbarkeit optimiert
• Quicksand – eher weich, aber gut strukturiert
• Helvetica Neue – gut lesbar, aber nur mit sauberem Einbau empfehlenswert

Mehr zur Auswahl findest du in meinem Blogartikel „Schriftarten für deine Website wählen„.

Divi barrierefrei gestalten – Spezielle Tipps

Divi ist nicht von Haus aus barrierefrei, kann aber mit einigen Anpassungen deutlich verbessert werden:

Divi-spezifische Probleme und Lösungen

Problem 1: Fehlende Überschriften-Struktur

• Lösung: Nutze die Text-Module und stelle die Überschriften manuell ein
• Markiere dafür eine Zeile und wähle H1, H2, H3 etc. bewusst aus – passend zur Inhaltsstruktur

Tipp: Auf jeder Seite sollte es nur eine H1 geben – das ist die Hauptüberschrift. Danach folgt logisch die H2 (z. B. für einzelne Abschnitte) und dann H3 (z. B. für Unterpunkte).

Problem 2: Fehlende Alt-Texte bei Hintergrundbildern

• Lösung: Nutze das Bild-Modul statt Hintergrundbilder für wichtige Inhalte

Problem 3: Slider sind schwierig für Screenreader

Wenn es irgendwie möglich ist, solltest du auf Slider verzichten (das gilt nicht nur für das Divi-Theme). Oft lassen sie sich nicht per Tastatur bedienen, die Inhalte darin werden nicht korrekt vorgelesen und die Bewegung lenkt ab oder ist nicht steuerbar.

Wenn du unbedingt Slider nutzen möchtest, dann …

• Max. 3–5 Slides – und diese kurz & aussagekräftig
• Keine Autoplay-Funktion aktivieren, wenn der Slider nicht manuell pausiert werden kann
  das geht oft direkt im Inhaltsbereich unter „Slider -> Autoplay“: NO statt YES 🙂

• Pfeile & Punkte gut sichtbar machen, damit Nutzer*innen sehen, dass hier etwas gesteuert werden kann

Wie genau das im Detail umgesetzt wird, lernst du auch in meinem Divi Powerkurs.

Hilfreiche Plugins und Tools

WordPress-Plugins für Barrierefreiheit

1. WP Accessibility

• Kostenlos
• Skip-Links einfügen: Besucher*innen können per Tastatur direkt zum Hauptinhalt springen, ohne durch Header und Menü zu tabben.
• Formulare verbessern: Das Plugin ergänzt fehlende Beschriftungen (Labels) und sorgt so dafür, dass Screenreader die Felder korrekt vorlesen.
• Fehlende Alt-Texte kennzeichnen – damit du keinen vergisst.
• Barrierefreiheits-Hinweise anzeigen – z. B. zu Kontrasten oder Strukturelementen.

2. One Click Accessibility – fügt eine Toolbar zu deiner Website hinzu!

Mit dieser Toolbar können Besucher*innen selbst:

• Schriftgröße ändern – Ideal für Menschen mit eingeschränkter Sehkraft.
• Kontrastmodus aktivieren – Z. B. hoher Kontrast oder dunkler Hintergrund.
• Screenreader-Modus einschalten – Anpassungen, die das Lesen per Screenreader erleichtern.
• Unterstreichung aller Links – Für bessere Sichtbarkeit von klickbaren Elementen.
• Benutzerdefinierte Einstellungen für Farben und Sichtbarkeit

3. AccessibleWP – Accessibility Toolbar

1. Kostenlos
2. Tastaturnavigation: Ermöglicht die Navigation mit der Tastatur.
3. Animationen deaktivieren: Schaltet CSS3-Animationen aus.
4. Kontrastmodus: Bietet Optionen für dunklen Kontrast und ermöglicht die Auswahl benutzerdefinierter Farben.
5. Schriftgröße ändern: Erlaubt das Vergrößern oder Verkleinern der Schriftgröße.
6. Lesbare Schriftart: Wechselt zu einer besser lesbaren Schriftart.
7. Titel markieren: Hebt Überschriften hervor.

Die Plugins werde ich in Kürze testen und dann hier im Detail berichten! Schreib mir gern in die Kommentare, ob du eins der Plugins – oder ein anderes – schon kennst und nutzt und empfehlen kannst.

Häufige Fehler bei der Barrierefreiheit vermeiden

Fehler 1: Nur auf automatisierte Tests vertrauen

Problem: Tools wie WAVE erfassen oft nur 30% aller Barrieren.

Lösung: Kombiniere automatisierte Tests mit manuellen Tests:

• Tastatur-Navigation testen
• Screenreader verwenden
• Verschiedene Browser testen

Fehler 2: Alt-Texte für dekorative Bilder

Problem: Dekorative Bilder sollten leere Alt-Texte haben.

Beispiel:

html<!-- Dekoratives Bild -->
<img src="deko-linie.jpg" alt="" role="presentation">

<!-- Inhaltliches Bild -->
<img src="team-foto.jpg" alt="Unser fünfköpfiges Team bei der Arbeit">

Fehler 3: Farbe als einziges Unterscheidungsmerkmal beim Link

Problem: Links nur durch Farbe zu kennzeichnen reicht nicht. Sie sollten unterstrichen sein, oder du arbeitest alternativ mit Icons wie z.B. 🔗, die du vor oder nach den Linktext stellst. Den folgenden CSS Code könntest du für eine Unterstreichung in deinem Theme Customizer bei „Zusätzliches CSS“ eintragen und deine Farbe entsprechend anpassen.

Codebeispiele:

css/* Nur Links im Fließtext unterstreichen */
p a,
li a {
  color: #005fcc;
  text-decoration: underline;
}

Das eignet sich, wenn du z. B. Links im Footer, Header oder Navigationsmenü ausnehmen willst.

css/* Alle Links unterstreichen, aber NICHT innerhalb von Buttons oder mit Bildern */
a {
  color: #005fcc;
  text-decoration: underline;
}

/* Ausnahmen definieren */
a.et_pb_button,         /* Divi-Buttons */
a.button,               /* generische Button-Klassen */
a img,                  /* verlinkte Bilder */
.et_pb_button a,        /* Buttons innerhalb von anderen Elementen */
.wp-block-button__link, /* Gutenberg-Buttons */
a[class*="button"]      /* Buttons mit „button“ im Klassennamen */
{
  text-decoration: none !important;
}

Diese Variante funktioniert gut mit Divi, Gutenberg und vielen Themes – du kannst sie bei Bedarf noch um eigene Button-Klassen erweitern.

Fehler 4: Unverständliche Fehlermeldungen

Problem: „Fehler in Feld 3“ sagt nichts aus.

Lösung: Konkrete, hilfreiche Fehlermeldungen:

html<!-- Schlecht -->
<div class="error">Ungültige Eingabe</div>

<!-- Gut -->
<div class="error" role="alert">
    Die E-Mail-Adresse muss ein @-Zeichen enthalten.
    Beispiel: name@domain.de
</div>

Video: Barrierefreie Website ab 2025: Wer ist betroffen & 5 einfache Maßnahmen

Sie sehen gerade einen Platzhalterinhalt von YouTube. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.

Mehr Informationen

Inhalt entsperren Erforderlichen Service akzeptieren und Inhalte entsperren

Fazit: Barrierefreiheit ist ein Prozess

Barrierefreiheit ist kein einmaliges Projekt, sondern ein kontinuierlicher Prozess. Starte mit den wichtigsten Punkten:

1. Prüfe deine rechtliche Verpflichtung mit den Kriterien oben
2. Teste deine aktuelle Website mit den vorgestellten Tools und manuellen Tests
3. Behebe die wichtigsten Probleme zuerst (Überschriften, Alt-Texte, Kontraste)
4. Implementiere systematisch weitere Verbesserungen
5. Teste regelmäßig mit echten Nutzer*innen

Die Investition in Barrierefreiheit lohnt sich: Du erreichst eine größere Zielgruppe, verbesserst dein SEO-Ranking und zeigst gesellschaftliche Verantwortung 💪. Außerdem ist eine barrierefreie Website oft auch für alle anderen Nutzer*innen benutzerfreundlicher!

Brauchst du Hilfe bei der Umsetzung? Barrierefreiheit kann am Anfang überfordernd wirken. Gerne unterstütze ich dich mit einem VIP Umsetzungstag dabei, deine WordPress-Website mit Divi barrierefrei zu gestalten – von der ersten Analyse bis zur vollständigen Umsetzung.

Schreib mir gerne in die Kommentare, welche Fragen du zur Barrierefreiheit hast oder welche Tools du bereits verwendest!