Accessibility: Die Checkliste für eure barrierefreie Website

Accessibility, sprich der barrierefreie Zugang zu sämtlichen Bereichen des alltäglichen Lebens, wird für Unternehmen zunehmend zur Pflicht. Insbesondere bei der Gestaltung und Umsetzung digitaler Angebote ist das Thema präsenter als je zuvor. Eine längst überfällige Entwicklung, von der ihr doppelt profitieren könnt.

Neben Menschen mit einer Beeinträchtigung hat die barrierefreie Gestaltung von digitalen Angeboten  positive Effekte für all eure User. Gestaltet ihr eure Website barrierefrei, verbessert ihr die allgemeine Nutzerfreundlichkeit und somit die User-Experience.

Warum es also höchste Zeit wird, euren Internetauftritt barrierefrei zu gestalten und worauf ihr bei der Umsetzung achten müsst, erfahrt ihr im Artikel.

1. Was ist Accessibility?
2. Warum ist eine barrierefreie Website wichtig?
3. Warum barrierefreie Websites ab 2025 Pflicht sind
4. Welche Arten von Beeinträchtigungen gibt es?
5. Checkliste für eure barrierefreie Website
6. Digitale Barrierefreiheit in der Praxis
7. Digitale Barrierefreiheit für ein herausragendes User Experience Design:Best Practices

Was ist Accessibility?

Wörtlich übersetzt bedeutet Accessibility »Zugänglichkeit«. Geht es um eure digitalen Angebote, steht Web Accessibility dafür, eure Webseiten, Apps oder digitale Dokumente für alle Menschen intuitiv zu gestalten. Das heißt, dass all eure User diese wahrnehmen, bedienen und uneingeschränkt nutzen können, egal welche Hardware oder Software sie nutzen, aus welcher Kultur sie kommen und vor allem unabhängig davon welche körperlichen und geistigen Fähigkeiten sie mitbringen.

Dafür müsst ihr bei der Web Accessibility neben rein visuellen Aspekten auch die Funktionsweisen eurer digitalen Dienste anpassen. Erst dann können Menschen, die beispielsweise Hilfsmittel wie Screenreader verwenden, eine Webseite oder App reibungslos bedienen.

Warum ist eine barrierefreie Website wichtig?

Davon abgesehen, dass digitale Barrierefreiheit ab 2025 zur Pflicht wird, entscheidet sie maßgeblich über die Nutzererlebnisse eurer User. Und zwar aller User.

Denkt ihr bereits bei der Konzeption oder dem Relaunch eurer Website daran, wie ihr eure Seite möglichst übersichtlich, verständlich und intuitiv gestalten könnt, finden eure Kunden schneller, wonach sie suchen.
Digitale Barrierefreiheit sollte aber nicht nur deswegen ganz oben auf eurer Agenda stehen. Als fortschrittliches Unternehmen könnt ihr mit einer digitalen Website Corporate Social Responsibility, kurz CSR, übernehmen und eure Zielgruppe erweitern.

Denn vor allem Menschen mit einer physischen Einschränkung gehen aufgrund der großen Hürden ungern im stationären Handel einkaufen. 61 Prozent der Personen mit einer Beeinträchtigung kaufen regelmäßig online ein. Das sind 10 Prozent mehr als bei denjenigen ohne Einschränkung . Daher solltet ihr insbesondere Menschen mit einer Beeinträchtigung die Nutzung eurer digitalen Angebote erleichtern.

Vorteile von Accessibility

• erweiterte Zielgruppe

• verbesserte User Experience für alle Nutzenden

• erfolgreiche Positionierung als fortschrittliches Unternehmen

• geringeres rechtliches Risiko

• besseres Google Ranking

Rechtliche Rahmenbedingungen: Warum barrierefreie Websites ab 2025 Pflicht sind

Bereits 2019 wurde mit dem »European Accessibility Act« eine EU-Richtlinie verabschiedet, die konkrete Vorgaben für die barrierefreie Gestaltung im digitalen Raum festlegt. In Deutschland sind diese im Barrierefreiheitsstärkungsgesetz (kurz BFSG) umgesetzt, das ab dem 28. Juni 2025 in Kraft tritt.

Mit dem Gesetz werden private Unternehmen erstmals verpflichtet, insbesondere digitale Produkte und Dienstleistungen barrierefrei anzubieten. Diese Vorgaben haben Auswirkungen auf den gesamten E-Commerce. Insbesondere B2C-Unternehmen, die Produkte und Services an Endverbraucherinnen und -verbraucher vertreiben, werden hier in die Pflicht genommen.

Ob ihr die Vorgaben umsetzt, wird überwacht. Solltet ihr diese bis zum Stichtag nicht erfüllen, kann euch das bis zu 100.000 Euro Strafe kosten.

Es wird also höchste Zeit, sich Gedanken zu machen, wie ihr die relevanten 55 Kriterien der Web Content Accessibility Guidelines (WCAG) umsetzen könnt. Auf diesen Kriterienkatalog, der vom World Wide Web Consortium (W3C) entwickelt wurde, verweist das BFSG nämlich.

Welche Arten von Beeinträchtigungen gibt es?

Wer bei Barrierefreiheit nur an eine langfristige physische Beeinträchtigung denkt, der irrt sich. Es gibt zahlreiche Faktoren, die dazu führen, dass Menschen digitale Angebote schwer oder gar nicht nutzen können.

Neben Menschen mit einer Sehbehinderung kann es auch für hörbeeinträchtigte Personen und solche mit kognitiven und motorischen Einschränkungen eine Herausforderung sein, sich in der digitalen Welt zurechtzufinden. Der Anteil der Bevölkerung, der in irgendeiner Form beeinträchtigt ist, ist hoch: Fast zehn Prozent der Deutschen haben eine schwere Behinderung. Weitere 13,04 Millionen sind anderweitig beeinträchtigt.

Hinzu kommt, dass auch temporäre oder situationsbedingte Einschränkungen Einfluss darauf haben, ob eure digitalen Angebote nutzbar sind. So kann beispielsweise helles Sonnenlicht oder eine starke Geräuschkulisse Einfluss darauf haben, wie gut User eure digitalen Services konsumieren können. Erstellt ihr bei der Konzeption eurer Website verschiedene User Szenarien, könnt ihr für – diese Herausforderungen bereits vorab Lösungen entwickeln.

Die Beispiele zeigen bereits, dass nahezu alle Sinne einen Einfluss darauf haben, wie gut oder schlecht sich Menschen digital zurechtfinden. Daher solltet ihr bei euren digitalen Angeboten alle Beeinträchtigungen mitbedenken, die das Sehen, die Motorik, das Hören, die Sprache oder das Verständnis betreffen.

Die nachfolgende Grafik bietet dazu einen guten Überblick:Quelle: Inclusive Microsoft Design

Checkliste für eure barrierefreie Website

Web Accessibility klingt in der Theorie ziemlich komplex und ist in der praktischen Umsetzung nicht minder herausfordernd.
Die im WCAG festgelegten Kriterien bieten euch bei der Umsetzung eine hilfreiche Orientierung. Sie lassen sich vier übergeordneten Grundsätzen zuordnen: perceivable (wahrnehmbar), operable (bedienbar), understandable (verständlich) und robust (robust) – kurz »POUR«.

Wahrnehmbarkeit von Informationen

Diese Anforderung zielt darauf ab, dass all eure Informationen von euren Usern durch mindestens einen Sinn wahrgenommen werden können.

Beispielsweise müssen für Video- und Audioinhalte auch immer Transkripte angeboten werden. Außerdem benötigen eingebundene Bilder einen eindeutigen Alternativtext, damit Personen, die den Screenreader nutzen, nicht verwirrt werden.

Bedienbarkeit von Elementen

Jede Person muss in der Lage sein, Bedienelemente wie die Navigation, Formulare, Play- und Pause-Buttons zu benutzen.

Nutzen Menschen beispielsweise aufgrund physischer Einschränkungen die Tastatursteuerung, muss dies reibungslos funktionieren. Dazu sollte beispielsweise die Reihenfolge, in der die Elemente angesteuert werden, logisch und der Tastaturfokus deutlich sichtbar sein.

Verständlichkeit durch Struktur

Eure Inhalte müssen gut strukturiert und möglichst verständlich formuliert sein. Mit Überschriften, Absätzen, Aufzählungen und einfacher Sprache können User eure Botschaft einfach erfassen. Verzichtet also auf Fachjargon und komplexe Satzstrukturen.

Auch eine einheitliche Navigation sorgt für mehr Übersichtlichkeit.

Robustheit

Diese Anforderung zielt unter anderem darauf ab, dass eure Inhalte über verschiedene Browser und technische Hilfsmittel in gleicher Qualität ausgespielt werden. Zur Robustheit gehört auch der Umgang mit fehlerhaften Eingaben. Stellt sicher, dass Fehlermeldungen eindeutig kommuniziert werden, und weist auf mögliche Problemlösungen hin.

Kommt es zu technischen Problemen oder kompletten Ausfällen, braucht ihr einen Back-up-Plan. Stellt sicher, dass User auch in solchen Situationen auf benötigte Informationen zugreifen können. Bietet dazu alternative Kommunikationskanäle an oder richtet eine temporäre Weiterleitung ein.
Mit regelmäßigen Sicherheitsupdates könnt ihr Sicherheitsrisiken reduzieren und die Robustheit eurer Systeme stärken.

Digitale Barrierefreiheit in der Praxis

Damit ihr all diesen Grundsätzen gerecht werdet, solltet ihr euch fragen: Welche Hürden euer Shop, Webseite oder App für eure Zielgruppe bereitstellt und wie ihr diese abbauen könnt.

Die 6 häufigsten Hürden auf Webseiten:

• geringer Kontrast bei Texten (81 %)

• fehlender alt Text bei Bildern (55 %)

• fehlende Label bei Formularfeldern (48%)

• leere Links (45 %)

• leere Buttons (28%)

• fehlende Definition der Dokumentensprache (17 %)

Sind Accessibility Overlays die einfache Lösung?

Fehlendes Know-how im Unternehmen und die Komplexität der Anforderungen haben zu Folge, dass Unternehmen die Umsetzung digitaler Barrierefreiheit scheuen.

Daher gewinnen Tools, die diese Herausforderungen lösen, zunehmend an Relevanz. Eine einfache Lösung versprechen sogenannte Accessibility Overlays. Diese sollen sich vermeintlich einfach als zusätzliches Plugin auf Webseite oder App implementieren lassen. Deren Anbieter beteuern, dass dafür keine umfassende Anpassung des digitalen Angebots notwendig ist.

Allerdings sorgen Overlays in der Praxis nicht automatisch für mehr Barrierefreiheit und erfüllen auch nicht zwangsweise die rechtlichen Anforderungen des BFSG. Im Gegenteil. Sie erschweren eingeschränkten Personen sogar teilweise noch den Zugriff auf die jeweilige Seite, sodass sich viele Betroffene gegen Overlays für Barrierefreiheit aussprechen.

Zur barrierefreien Website mit einem UX-Audit

Erst die tatsächliche Anpassung eures Codes, eures Designs und eurer Inhalte ermöglicht es, Barrieren eurer digitalen Angebote tatsächlich abzubauen.

Ein auf barrierefreies Design beziehungsweise Usability ausgerichteter UX-Audit kann hier schon viele Pain Points offenlegen und euch dabei helfen, Dinge nachhaltig zu verbessern. Und eine gezielte Schulung eurer Content-Creator kann den Grundstein für eine dauerhafte Optimierung eurer Webauftritte darstellen.

Gemeinsam könnt ihr dann eine Strategie entwerfen und eine Timeline festlegen, um die oben genannte EU-Richtlinie beziehungsweise das BFSG zu erfüllen. Am besten startet ihr mit den »low hangig fruits« als Maßnahmen, die ihr schnell und einfach umsetzen könnt.

Zum Beispiel kann das Redaktionsteam eurer Webseite die Pflege der Alt-Texte von Abbildungen selbst vornehmen. Außerdem könnt ihr die Größe oder Farbe eurer Texte durch simple Cascading Style Sheets (CSS) – Änderungen vornehmen. Grundsätzliche Änderungen des Codes beziehungsweise umfangreiche Anpassungen durch eure Entwicklungsteams müssen langfristig geplant werden.

Der Lebensmittelanbieter bofrost* hat seinen ohnehin geplanten Relaunch beispielsweise genutzt, um eine möglichst barrierefreie Customer Journey zu gewährleisten.

Digitale Barrierefreiheit für ein herausragendes User Experience Design:Best Practices

Noch mehr Inspirationen und weitere Tipps, wie ihr mit einer verbesserten Usability die Bindung zu euren Kunden stärkt, findet ihr in den Best Practices »User Experience Design«. Spannende Fallbeispiele erfolgreicher Unternehmen aus dem B2B- und B2C-Bereich, zeigen, wie es gelingt, die Customer Experience durch nutzerzentriertes Design über alle Touchpoints hinweg zu optimieren. 

Füllt jetzt das Formular aus und sichert euch euer kostenfreies Exemplar!