Wie kann man eine Website barrierefrei gestalten?
Ab Mitte 2025 werden barrierefreie Webseiten für viele Unternehmen Pflicht. Was sind die wichtigsten Kriterien, die ein Webdesigner beachten muss, wenn er eine barrierefreie und robuste Webseite erstellt?Â
Wichtige Kriterien für barrierefreie Webseiten
Eine barrierefreie Website zu gestalten ist kompliziert, viele Aspekte sollten bedacht werden. Menschen haben unterschiedliche Beeinträchtigungen. Zum Beispiel beim Sehen, Hören, Bewegungen ausführen oder Informationen begreifen. Eine Webseite ist barrierefrei, wenn alle Menschen sie ohne Probleme nutzen können. Hier sind einige wichtige Merkmale für Webseiten.
Schriftart und Schriftgröße
Kontrast und Farben
Der Kontrast zwischen Schrift und Hintergrund ist essenziell und wird von den Testtools oft bemängelt. 8 bis 10 % der Menschen sind farbenblind oder haben eine Rot-grün-Schwäche.
Navigation und Struktur
Eine gut lesbare, durchgängige und logische Navigation ist immer wichtig gewesen. Unerfahrene oder beeinträchtigte Besucher müssen sich auf größeren Webseiten gut zurechtfinden.
Animationen
Ohne Maus, mit Tastatur.
Nicht jeder kommt mit der Computer-Maus klar, das kann an einer Sehschwäche oder an einer Mobilitätsstörung liegen. Die Seite muss also per Tastatur bedienbar sein. Hier ist eine logische Reihenfolge der Seitensektionen notwendig.
Alternativtexte
Wer sich den Inhalt vorlesen lassen muss, kann keine Bilder sehen. Das kann durch aussagefähige und individuelle Alt-Texte behoben werden. Diese alternativen Texte beschreiben das Bild und der Screenreader kann das vorlesen.
Einfache Sprache
Vermeiden Sie unbedingt Fachchinesisch und bauen Sie keine Hürden durch Fremdwörter und komplizierte Formulierungen auf. Wenn Sie Fachbegriffe verwenden müssen, dann erklären Sie das gut. Zwischenüberschriften machen jeden Text leichter lesbar.
Links, Schaltflächen
Buttons oder Links mit dem Wort „weiter“ geben keinen Hinweis, wohin die Reise geht. Deshalb sollten diese interaktiven Elemente immer eindeutig bezeichnet werden. Das gilt noch mehr, wenn ein Symbol oder Bild mit einem anderen Inhalt verlinkt ist.
Was ist ein Screenreader?
Alle hier genannten Maßnahmen sind ohne Screenreader sinnlos, wenn der User stark sehbehindert ist. Ein Screenreader ist ein Programm, das den Inhalt eines Bildschirms laut vorliest und weitere individuelle Einstellungen ermöglicht.
Wer ist zur Erstellung von barrierefreien Webseiten verpflichtet?
Werden Waren oder Dienstleistungen online verkauft oder erworben ( Shops), können Termine verbindlich gebucht oder bestätigt werden, wird Ihre Website vermutlich barrierefrei sein müssen. Das gilt nur, wenn Ihre Kunden Privatleute sind. Kleinstunternehmen sind von der Regelung nicht betroffen.
Dazu gibt es eine Reihe von Ratgebern. Hier ein paar Links zu Webseiten, die wir als kompetent einschätzen:
Nicht jeder muss, aber alle können
Auch wenn Sie möglicherweise nicht betroffen sind, könnten Sie über entsprechende Maßnahmen nachdenken. Passt eine Einschränkung zu einem Teil Ihrer Kunden, wird man Ihnen dankbar sein. Vielleicht gewinnen Sie damit sogar neue Kunden dazu.
Wie kann man die Barrierefreiheit prüfen bzw. testen?
Neben manuellen Tests von Mitarbeitern, externen Experten oder Betroffenen finden Sie auch online Hilfe. Es gibt diverse Tools, um barrierefreie Webseiten während der Gestaltung und danach zu testen. Hier sind ein paar Links dazu.
Siteimprove:
Bietet einen schnellen Überblick über die Barrierefreiheit.
Accessibility Insights for Web:
Die Chromeerweiterung versorgt Sie mit einer detaillierten Analyse.
Lighthouse:
Integriert in Chrome, liefert einen umfassenden Bericht
WCAG Contrast Checker:
Prüft den Farbkontrast zwischen Text und Hintergrund.
Website selbst auf Barrierefreiheit testen
Mithilfe dieser Checkliste können Sie Ihre Webseite weitgehend selbst überprüfen.
Checkliste: Webseite barrierefrei selber testen
Checkliste: Deine Webseite barrierefrei gestalten
Eine barrierefreie Webseite ist für jeden Menschen nutzbar, egal welche Fähigkeiten oder Einschränkungen er hat.
Logische Gliederung: Achte auf eine klare Hierarchie bei Überschriften (H1, H2, H3 etc.). Überspringe keine Ebenen, um die Struktur verständlich zu halten.
Bilder mit Alternativtexten (Alt-Texte): Jedes bedeutungsvolle Bild benötigt eine kurze, prägnante Beschreibung im Alt-Text. Bei rein dekorativen Bildern nutze alt=““.
Einfache Sprache: Formuliere Texte kurz, klar und verständlich. Vermeide unnötigen Fachjargon.
Sprachauszeichnung im HTML: Stelle sicher, dass das Attribut oder die entsprechende Sprache im HTML-Code gesetzt ist. Das ist entscheidend für Screenreader.
Medien zugänglich machen:
Videos: Biete Untertitel, Transkripte oder Gebärdensprache für alle Videos an.
Audio: Sorge dafür, dass gesprochene Inhalte auch als Text verfügbar sind.
Navigation & Interaktion
Tastatur-Bedienbarkeit: Das gesamte Menü und alle interaktiven Elemente müssen sich ausschließlich mit der Tastatur (Tabulator, Enter) bedienen lassen.
Sichtbarer Fokus: Es muss immer klar erkennbar sein, welches Element gerade aktiv ist (z.B. durch einen farbigen Rahmen).
Aussagekräftige Links: Verwende beschreibende Linktexte, die den Inhalt des Links klar benennen (z.B. „Mehr über unsere Services“ statt „Hier klicken“).
Erkennbare Links: Es reicht für Farbenblinde nicht, einen Link im Text nur farbig zu machen. Eine zusätzliche Unterstreichung macht den Link dann barrierefrei.
Enter-Taste für Buttons & Links: Stelle sicher, dass Buttons und Links nicht nur mit der Maus, sondern auch mit der Enter-Taste aktiviert werden können.
Keine Tastatur-Fallen: Nutzende müssen jederzeit in der Lage sein, modale Fenster, Menüs oder andere Overlays problemlos wieder zu schließen.
——————————————
Slideshows und Karussells:
Die beste Slideshow ist eigentlich keine Slideshow zu nutzen.
Pausierbar & Steuerbar: Ermögliche immer, Slideshows anzuhalten, vor- und zurückzuspringen. Die automatische Wiedergabe sollte deaktiviert sein.
Tastaturbedienung: Auch Slideshows müssen vollständig mit der Tastatur steuerbar sein.
Sichtbare Steuerelemente: Die Steuerelemente (Pfeile, Punkte zur Navigation) müssen klar sichtbar und anklickbar sein.
————————————
Visuelle Gestaltung
Kontrastverhältnis: Text und interaktive Elemente (wie Schaltflächen) sollten ein Kontrastverhältnis von mindestens 4,5:1 zum Hintergrund haben.
Zoom-Funktion: Die Webseite sollte bis zu 200% vergrößerbar sein, ohne dass das Layout bricht oder Inhalte unlesbar werden.
Lesbare Schriftgröße: Eine Basisschriftgröße von mindestens 16 Pixeln sorgt für gute Lesbarkeit, auch für Menschen mit Sehschwäche.
Text nicht als Bild: Vermeide es, Text in Bilder einzubetten. Text sollte immer maschinenlesbar und skalierbar sein.
Formulare & Eingabefelder
Korrekte Beschriftung: Alle Formularfelder benötigen klare und korrekte Beschriftungen (Labels), die fest mit dem Eingabefeld verbunden sind.
Hilfreiche Fehlermeldungen: Fehlermeldungen sollten präzise und verständlich sein (z.B. „Bitte gültige E-Mail-Adresse eingeben“ statt nur „Fehler“).
Visuelle & textliche Fehleranzeige: Fehler müssen nicht nur farblich (z.B. rot), sondern auch textlich gekennzeichnet werden.
Klare Button-Zwecke: Beschrifte Buttons eindeutig mit ihrer Funktion (z.B. „Formular absenden“ statt „OK“).
Autovervollständigung (Autocomplete): Aktiviere die Autovervollständigung für Formularfelder, um das Ausfüllen zu erleichtern, insbesondere für Menschen mit kognitiven Einschränkungen.
Kognitive Barrierefreiheit
Begriffs-Erklärungen: Erläutere komplexe oder fachspezifische Begriffe einfach und verständlich.
Keine schnellen Animationen: Vermeide blinkende oder schnell wechselnde Animationen (mehr als 3 Blitze pro Sekunde), da diese ablenkend oder gesundheitlich problematisch sein können.
Kontrolle über Pop-ups: Nutzende sollten die Kontrolle darüber haben, wann sich Pop-ups oder Overlays öffnen.
Technische Zugänglichkeit
Screenreader-Test: Teste deine Webseite mit mindestens einem Screenreader (z.B. NVDA für Windows oder VoiceOver für Mac/iOS), um die Zugänglichkeit zu prüfen.
Wir sind als Agentur auf WordPress spezialisiert. Wenn Sie Fragen haben oder Beratung zur Erstellung von barrierefreien Webseiten mögen, sind wir für Sie da. Hier finden Sie Einzelheiten zum BFSG-Barrierefreiheitsstärkungsgesetz.
Autor ist Gilbert Röhrborn.
Inhaber und Gründer der Berliner Webagentur wtm-online. Ausgebildeter SEO Professional & SEM Manager und Webanalyst.