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?
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 sie alle Menschen ohne Probleme nutzen können. Hier sind einige wichtige Merkmale für Webseiten.
Die wichtigsten Kategorien
Schrift
Die Art, Farbe und Größe der Schrift haben großen Einfluss auf die Lesbarkeit. Klare schnörkellose Buchstaben. Diese sollten nicht zu eng aneinander stehen und auch der Zeilenabstand ist wichtig.
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
Eine gut lesbare und logische Navigation ist immer wichtig gewesen. Unerfahrene oder beeinträchtigte Besucher müssen sich auf größeren Webseiten gut zurechtfinden.
Animationen
Animationen können ablenken und bei Nutzern mit Epilepsie sogar Anfälle auslösen. Der Einsatz ist eine Gratwanderung, auf jeden Fall darf der Screenreader nicht gestört und der Inhalt muss auch ohne Navigation verstanden werden.
Mit Tastatur
Nicht jeder kommt mit der Computer-Maus klar. Die Seite muss also alternativ ausschließlich per Tastatur bedienbar sein. Hier ist besonders auch eine logische Reihenfolge der Seiteninhalte 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“ oder „mehr“ geben keinen Hinweis, wohin der Link führt. Deshalb sollten Links immer eindeutig bezeichnet und gestaltet werden. Das gilt auch, wenn ein Symbol oder Bild mit einem anderen Inhalt verlinkt ist.
Textstruktur
Überschriften von H1 bis H6 müssen in einer richtigen Reihenfolge erscheinen und keine Ebenen überspringen. Wenn man Hilfstechnologien verwendet, ist es dadurch leichter, sich auf der Seite zurechtzufinden und die Inhalte zu verstehen.
Iframe mit title
Wenn z. B. Google-Maps oder ein YouTube-Video per iframe eingebunden wird, sollte ein title-Attribut hinzugefügt werden. Ohne iframe würden Screenreader nur „Frame“ vorlesen, was keine Information über den Inhalt liefert.
Screenreader
Alle hier genannten Maßnahmen sind ohne Screenreader sinnlos, wenn der User sehbehindert ist. Ein Screenreader ist ein Programm, das den Inhalt eines Bildschirms laut vorliest, und diese Funktion ist in unserer Sidebar enthalten.
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“).
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:
Pausierbar & Steuerbar: Biete immer die Möglichkeit, Slideshows anzuhalten, vor- und zurückzuspringen. Die automatische Wiedergabe sollte deaktivierbar 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.
Bilder brauchen Alt-Texte
Bilder benötigen fast immer einen sog. Alt-Text. Der Text beschreibt das Bild und erscheint, wenn das Bild nicht zu sehen ist oder wenn der gesamte Text vorgelesen wird. Ausnahmen sind Schmuckbilder ohne Funktion.
Mithilfe der Sidebar können Sie die Bilder komplett ausblenden, oder die Alt-Texte vergrößert anzeigen lassen. Auch die Farben und der Kontrast lassen sich individuell anpassen. Die Alt-Texte müssen aber immer individuell und sinnvoll erstellt werden, nur dann können sie angezeigt oder vorgelesen werden.
Kontaktformulare müssen barrierefrei sein
Besucher benutzen Formulare, um mit Ihnen zu interagieren. Alle Kunden können online mit Ihnen in Kontakt treten, falls diese Formulare barrierefrei sind.
Schnelltest für Formulare:
Das Formular muss ohne Maus, nur mit der Tastatur bedienbar sein. Klicken Sie dazu im Formular auf die Beschriftung eines Eingabefeldes, etwa auf das Wort „Name“. Springt der Mauszeiger ins Eingabefeld, ist das Feld mit der Beschriftung verknüpft – das ist wichtig für barrierefreie Formulare.
Die hier genannten Kriterien sind das Mindestmaß, um die Website barrierefrei nutzen zu können. Es reicht nicht, nur unsere Sidebar zu installieren, sie ist nur ein Hilfsmittel.
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.