Barrierefreiheit: So machst du deine Website inklusiv und benutzerfreundlich

„Komm, wir laufen um die Wette,“ sagte Emil zu seinem neuen Freund, „wer als Erster bei dem Baum ist!“

Blöd nur, dass sein neuer Freund ein Fisch ist.

Was wie der schlechteste Dad-Joke aller Zeiten klingt, ist für viele Menschen im Alltag bittere Realität. Denn oft gestalten wir unsere Umgebung so, dass sie für uns selbst perfekt funktioniert, ohne zu bedenken, dass andere Menschen ganz andere Bedürfnisse haben.

Stell dir vor, du bist auf einen Rollstuhl angewiesen und der einzige Zugang zu deinem Lieblingscafé führt über eine steile Treppe. Oder du bist sehbehindert und die einzige Speisekarte ist winzig klein gedruckt.

Aber nicht nur Menschen mit Behinderungen stoßen im Alltag auf solche Barrieren. Auch Eltern mit Kinderwagen kämpfen oft mit zu schmalen Türen und für ältere Menschen sind kleingedruckte Zeitungen ein echtes Hindernis.

Das sind Barrieren, die viele Menschen täglich erleben – und im digitalen Raum ist es nicht anders.

Deswegen möchte ich dir in diesem Artikel zeigen, wie du mit einfachen Handgriffen auf deiner Website dafür sorgst, dass Besucher sich rundum wohlfühlen und nicht wie ein Fisch beim Wettrennen.

Was ist barrierefreies Webdesign und warum ist das so wichtig?

Barrierefreies Webdesign bedeutet, dass deine Website so gestaltet ist, dass sie von allen Menschen problemlos genutzt werden kann – unabhängig von ihren individuellen Fähigkeiten.

Es geht darum, digitale Barrieren abzubauen und sicherzustellen, dass niemand ausgeschlossen wird. Das betrifft Menschen mit Seh-, Hör-, motorischen oder kognitiven Einschränkungen.

Und die Umsetzung ist denkbar einfach. Wenn du ein paar Regeln befolgst, schaffst du direkt ein inklusives und positives Nutzererlebnis.

Vorteile einer barrierefreien Website

Weißt du, was das schöne an einer barrierefrei gestalteten Website ist?

Sie hat nur Vorteile. 😊

Du erreichst eine größere Zielgruppe, da auch Menschen mit Einschränkungen deine Website nutzen können – Menschen, die du sonst vielleicht verlieren würdest.

Barrierefreiheit bedeutet, dass Menschen sich auf deiner Website besser zurechtfinden, dank klarer Strukturen und übersichtlicher Inhalte. Das sorgt für eine bessere Benutzererfahrung für alle Besucher.

Barrierefreies Webdesign sorgt automatisch für ein besseres Google Ranking, weil es auch Suchmaschinen hilft deine Inhalte besser zu verstehen.

Und, last but not least, zeigt eine barrierefreie Website, dass du dir Gedanken um alle deine Besucher machst. Das hinterlässt einen positiven Eindruck und stärkt das Vertrauen in deine Marke.

Denn Inklusion ist nicht nur ethisch korrekt, sondern wird auch von immer mehr Menschen und Unternehmen als wichtiger Faktor für die Wahl eines Dienstleisters wahrgenommen.

Ist WordPress barrierefrei?

Gleich mal vorweg: Mit WordPress bist du im Thema Barrierefreiheit gut aufgestellt.

Denn die WordPress-Gemeinschaft und das Open-Source-WordPress-Projekt verpflichtet sich, so inklusiv und zugänglich zu sein wie möglich. Entsprechend müssen alle neuen und aktualisierten Codes, die in WordPress veröffentlicht werden, den Richtlinien gemäß den WordPress Accessibility Coding Standards entsprechen.

Und obwohl das WordPress-Projekt nicht garantieren kann, dass alle Themes kompatibel sind, wurden die barrierefreien Themes vom Theme-Review-Team überprüft, um sicherzustellen, dass diese Themes die grundlegenden Anforderungen erfüllen.

Barrierefreie WordPress Themes

Wenn du gerade auf der Suche nach einem barrierefreien Theme bist, kannst du in deiner WordPress-Installation unter Design > Themes > Neues Theme hinzufügen nach Funktionen filtern und dort „für Barrierefreiheit geeignet“ auswählen.

Oder du nimmst die Abkürzung, denn das von mir empfohlenen Kadence-Theme, auf dem auch meine Website und alle Kund:innen-Websites der letzten Jahre basieren, legt auch großen Wert auf Barrierefreiheit.

Ab 2025: Gesetz zur Barrierefreiheit (European Accessibility Act)

Der European Accessibility Act (EAA) schafft klare Regeln bezüglich digitaler Barrierefreiheit, die bis 28.06.2025 umgesetzt sein müssen.

Grundlage dafür sind die Web Content Accessibility Guidelines (WCAG 2.2).  

Einige Dienstleister:innen nutzen diese „Chance“ nun, um Unsicherheiten unter Online Unternehmer:innen zu schüren. Nach der ganzen Aufregung rund um die DSGVO wird damit also die nächste sprichwörtliche Kuh durchs Dorf getrieben.

Betrifft dich und deine Website der European Accessibility Act?

In den allermeisten Fällen: Nein.

Als Unternehmer:in mit weniger als 10 Mitarbeitern und weniger als 2 Millionen Jahresumsatz bist du davon nicht betroffen. (Quelle: WKO)

Trotzdem möchte ich dir die folgenden Tipps ans Herz legen, damit sich die Besucher:innen deiner Website rundum wohlfühlen und sie wirklich einfach umzusetzen sind.

Tipp #1: Je weniger Klicks desto besser

Einfachheit ist entscheidend für barrierefreies Webdesign. Je weniger Klicks es braucht, um ans Ziel zu kommen, desto leichter finden sich Besucher auf deiner Website zurecht.

Eine sehr geschätze Kollegin von mir hat an dieser Stelle immer gesagt: „3x geklickt = eingenickt.“

Überlege, wie du die wichtigsten Informationen so platzieren kannst, dass sie mit minimalen Klicks erreichbar sind.

Tipp #2: Optimiere deine Navigation

Eine gut strukturierte Navigation ist das Herzstück einer barrierefreien Website und trägt wesentlich dazu bei, dass Besucher sich gut orientieren können.

Klar benannte Menüpunkte, eine logische Seitenstruktur und die Möglichkeit, mit der Tastatur zu navigieren, machen es für viele Menschen leichter, deine Website zu benutzen.

Tipp #3: Strukturiere deine Texte

Verwende einfache, kurze Sätze und vermeide Fachjargon. Deine Texte sollten so formuliert sein, dass sie von allen verstanden werden, auch von Menschen mit kognitiven Einschränkungen oder Lernschwierigkeiten.

Strukturiere deine Inhalte mit Überschriften, Absätzen und nutze Aufzählungen, damit deine Leser die Informationen schnell erfassen können.

Tipp #4: Achte auf ausreichenden Kontrast

Ein guter Farbkontrast sorgt dafür, dass Inhalte für Menschen mit Sehschwächen oder Farbenblindheit gut lesbar sind.

Achte darauf, dass der Kontrast zwischen Text und Hintergrund hoch genug ist. WordPress unterstützt dich dabei, indem es dich auf zu geringen Kontrast aufmerksam macht. (Block-Editor „Gutenberg“)

Tipp #5: Wähle passende Schriftgrößen

Wähle ausreichend große Schriftgrößen, damit deine Inhalte gut und angenehm zu lesen sind.

Für Fließtext sollten mindestens 16px eingestellt werden, für Überschriften empfehle ich eine Range von 21-42 px. Diese Größenangaben sind zusätzlich von deiner ausgewählten Schriftart abhängig und sollten darauf abgestimmt werden.

Tipp #6: Nutze Alternativtexte für deine Bilder

Alt-Texte beschreiben den Inhalt von Bildern und sind besonders wichtig für Menschen, die Screenreader verwenden. Diese Texte helfen dabei, Bilder in Worte zu fassen, sodass alle Nutzer die visuellen Inhalte deiner Website verstehen können.

Achte darauf, dass die Alt-Texte präzise und beschreibend sind.

Tipp #7: Erstelle Untertitel und Transkripte für Videos

Videos sind ein tolles Medium, aber eben nicht für alle Menschen zugänglich.

Indem du Untertitel hinzufügst, können auch Menschen mit Hörbehinderungen den Inhalt verstehen. Transkripte bieten eine textbasierte Alternative und sind besonders hilfreich für Menschen, die lieber lesen oder auf Videos verzichten wollen.

Teste deine Website auf Barrierefreiheit

Nachdem du deine Website für Barrierefreiheit optimiert hast, ist der nächste wichtige Schritt: Testen!

Dafür kannst den WAVE Accessibility Checker oder Google Lighthouse nutzen.

Beide Tools scannen deine Website und identifizieren technische Hürden, wie fehlende Alt-Texte, unzureichende Kontraste oder Probleme bei der Tastaturnavigation.

Eine Website ist nie fertig 😉

Dieser Satz – und ich werde nicht müde ihn zu wiederholen – gilt auch in diesem Thema.

Barrierefreiheit ist kein einmaliger Akt, sondern ein fortlaufender Prozess. Es lohnt sich, regelmäßig zu testen und sicherzustellen, dass deine Website nicht nur inklusiv bleibt, sondern sich auch an neue Standards anpasst.

Häufig gestellte Fragen

---

Hast du noch Fragen zur Barrierefreiheit oder der Umsetzung auf deiner Website? Dann schreib mir gerne einen Kommentar. 💖