Checkliste für barrierefreie Websites

Wie sieht eine barrierefreie Website aus? 

Die Mindestanforderungen an barrierefreie Websites basieren auf den vier Prinzipien der Web Content Accessibility Guidelines (WCAG), dem internationalen Standard zur barrierefreien Gestaltung von Websites:

• Wahrnehmbar: Website-Inhalte müssen so gestaltet sein, dass alle Nutzenden sie wahrnehmen können, z.B. durch ALT-Texte für Bilder oder Untertitel für Videos. Die Website sollte klare visuelle und auditive Darstellungen bieten, um Menschen mit sensorischen Einschränkungen den Zugang zu erleichtern.

• Bedienbar: Alle Funktionen müssen nutzbar sein, unabhängig von der verwendeten Eingabemethode, wie Maus, Tastatur oder Touchscreen. Interaktive Elemente sollten so gestaltet sein, dass sie einfach zu steuern und nicht zeitlich begrenzt sind.

• Verständlich: Die Inhalte und Funktionen müssen leicht verständlich sein, z.B. durch einfache Sprache, klare Anweisungen und konsistente Navigation. Nutzende sollten keine unnötigen Barrieren in der Bedienlogik oder beim Verständnis von Inhalten erleben.

• Robust: Websites müssen mit verschiedenen Browsern, Geräten und unterstützenden Technologien kompatibel sein, z.B. Screenreadern. Zudem müssen sie zukunftsfähig sein, also auch bei technischen Weiterentwicklungen problemlos funktionieren.

7 Kernkriterien für barrierefreie Websites

Die WCAG, der internationale Standard für barrierefreie Websites, umfassen insgesamt 78 Kriterien. Laut der Aktion Mensch, BITV-Consult, Stiftung Pfennigparade und Google sind folgende Kriterien aber die Wichtigsten für Ihren Barrierefreiheits-Check:

1. Tastaturbedienbarkeit

   Alle Funktionen Ihrer Website sollten mit der Tastatur erreichbar sein. Probieren Sie es einfach selbst: Können Sie nur mithilfe der Tastatur alle Bereiche Ihrer Website ansteuern? Aktivieren Sie zusätzlich einen Screenreader, wie Google Talkback auf Android oder Apple VoiceOver auf iOS, um die Bedienung mit Sprachunterstützung zu testen. Achten Sie danach darauf, dass der Tastaturfokus klar erkennbar ist. Fokussierte Elemente sollten optisch hervorgehoben sein, um die Navigation zu erleichtern, sobald sie per Tab-Taste angesteuert werden. Die Tab-Reihenfolge der Elemente sollte logisch sein.

2. Beschriftungen, Labels und Kontraste

   Prüfen Sie alle Formulare auf Ihrer Website – sind Beschriftungen (Labels) für alle Felder hinterlegt? Beschriftungen in Formularfeldern dürfen beim Ausfüllen dieser Felder nicht komplett verschwinden, sondern müssen darüber eingeblendet sichtbar sein. Heutzutage werden Labels in vielen Webdesigns aus rein ästhetischen Gründen weggelassen. Barrierefrei ist das aber leider nicht – Labels müssen immer sichtbar sein.

   Zudem erfordert die gute Lesbarkeit von Texten ausreichend Kontrast zwischen Schrift und Hintergrund, insbesondere bei kleineren Schriftgrößen. Hierfür können Sie kostenlose Tools wie den WebAIM Kontrastchecker nutzen. Dabei sollte auch auf Farbsehschwächen wie die häufige Rot-Grün-Schwäche Rücksicht genommen werden. Hohe Kontraste sind auch bei der mobilen Nutzung hilfreich – so bleiben Inhalte selbst im Freien bei starker Sonneneinstrahlung gut erkennbar.

3. Textgröße, Textabstand und Textumbruch

   Kann man Textgröße, Abstand und Zeilenhöhe verändern – und alles bleibt lesbar?

   Ihre Website sollte es Nutzenden erlauben, diese Änderungen ohne Einschränkung vorzunehmen. Achten Sie zuerst darauf, dass die Lesbarkeit auch bei vergrößerten Texten erhalten bleibt und keine Inhalte überlappen oder abgeschnitten werden. Auch die Vergrößerung von Fotos oder Seiten durch das Auseinanderziehen von zwei Fingern („Pinch-To-Zoom“) ist für Menschen mit Sehschwäche ein Muss.

   Einige Personen haben Schwierigkeiten, kleine Links und Schaltflächen auszuwählen. Per Mausklick mag es für die meisten noch funktionieren, aber selbst hier haben Personen mit zittrigen Händen ihre Probleme. Bei der Bedienung mit dem Finger auf einem Tablet oder mit dem Handy werden kleine Buttons auch für weitere Nutzergruppen zu einer Herausforderung. Testen Sie es selbst: Sind alle Ihre Links und Schaltflächen für die mobile Nutzung optimiert?

   Ein dynamischer Textumbruch stellt sicher, dass Inhalte auf allen Bildschirmgrößen lesbar bleiben, ohne horizontales Scrollen zu erfordern. Ermöglichen Sie Zeilenumbrüche aller Ihrer Texte bei Veränderung des Textabstandes, zum Beispiel bei Änderung der Zeilenhöhe oder des Buchstabenabstands. Das Wichtigste ist, dass Inhalte grundsätzlich weiterhin lesbar bleiben.

4. Untertitel für multimediale Inhalte wie Videos

   Durch die Integration von Youtube-Videos werden Untertitel automatisch generiert. Automatische Untertitel alleine reichen jedoch nicht aus, da Videos nicht nur mit Worten Botschaften vermitteln. Die gesamte Geräuschkulisse ist relevant. Alles, was jemand verpassen würde, der nicht hören kann, muss mittels Untertitel kommuniziert werden: ein Hintergrundgeräusch, eine Identifikation des Sprechers (bei mehreren Personen im Bild) oder Musik.

   Die Einbettung von Gebärdensprachvideos ist zu empfehlen, um eine vollständige Barrierefreiheit von Videos mit Ton zu gewährleisten. Ein gutes Beispiel hierfür ist auf der Website von Aktion Mensch zu sehen.

   Zudem benötigen Sie für Menschen, die nicht sehen, aber hören können eine Audiodeskription bzw. akkustische Bildbeschreibung. Eine Volltextbeschreibung ist zusätzlich nützlich um weitere Barrieren abzubauen, weil User diese z. B. in Braille konvertieren können. Alleine reicht sie allerdings nicht aus, um das BSFG zu erfüllen.

5. Pausieren, beenden und ausblenden

   Nutzende sollten jederzeit die Kontrolle über automatisch abspielende oder sich bewegende Inhalte haben. Die Möglichkeit, Animationen zu pausieren, zu beenden oder auszublenden, ist wichtig für ein angenehmes Nutzungserlebnis. Diese Funktionen unterstützen besonders Menschen mit kognitiven oder visuellen Einschränkungen. Für Sie zum Nachprüfen: Gibt es Karussells auf Ihrer Seite, die automatisch beginnen und nicht pausiert werden können?

6. Überschriften und Beschriftungen

   Bei diesem Kriterium geht es um Verständlichkeit, nicht um die Hierarchie. Allgemeine Überschriften und Beschriftungen wie „Primär“, „Allgemein“ oder “Jetzt neu” helfen nicht weiter bei der Orientierung auf Ihrer Website. Am wichtigsten für die Hierarchie ist hingegen, dass das „Inhaltsverzeichnis“ der Seite voll erfassbar ist. Ziel dieses Kriteriums ist, dass sowohl die Inhalte als auch die Struktur leicht nachvollziehbar sind und dadurch auch Screenreader hilfreich werden.

   Überprüfen Sie: Sind alle Überschriften Ihrer Website ohne den dazugehörigen Content aussagekräftig?

7. Name, Rolle und Wert

   Jedes interaktive Element auf einer Website sollte klar definiert sein: der Name des Elements, seine Rolle und sein aktueller Wert. Diese Informationen helfen Screenreadern, die Funktionen korrekt zu interpretieren und den Nutzern mitzuteilen. Eine saubere Implementierung verbessert die Zugänglichkeit und sorgt für eine intuitive Bedienung.

   Beispiele zur Überprüfung Ihrer Website: Sind alle Bedienelemente beschriftet und geben per Screenreader den Status und die Auswahlmöglichkeiten aus? Haben Ihre Formularfelder die korrekte Bezeichnung, z.B. Text- oder Zahlenfelder?

Die Erfüllung dieser sieben Kriterien ist besonders wichtig für Menschen mit Beeinträchtigungen oder Behinderungen wie Blindheit und Sehbehinderung, Gehörlosigkeit sowie nachlassendes Hörvermögen, kognitive Beeinträchtigung und eingeschränkte Bewegungsfähigkeit.

Gerne können wir, Ihre Full-Service Digitalagentur aus Stuttgart, Sie hierbei auch unterstützen.

Wir bieten Ihnen professionelle Unterstützung bei der technischen und gestalterischen Umsetzung Ihrer barrierefreien Website. Das bedeutet: Wir konzipieren, designen und programmieren Ihre Website so, dass sie den Anforderungen des BFSG (Barrierefreiheitsstärkungsgesetz) bzw. der digitalen Barrierefreiheit entspricht.

Barrierefreiheit: Mehrwert für alle Nutzenden

Barrierefreiheit ist kein „Nice to Have“ für manche – sie ist essenziell für alle. Sie sorgt nicht nur dafür, dass Menschen mit Behinderungen digitale Angebote nutzen können, sondern verbessert die User Experience für alle. Funktionen wie Autocomplete in Formularen, klare Navigation und einfache Bedienbarkeit machen das Web für alle angenehmer und effizienter. Unabhängig davon, ob Ihre Website unter das BFSG fällt oder nicht, können Sie Barrierefreiheit als Chance sehen, Ihr digitales Angebot zu verbessern und inklusiver zu gestalten.