Nur etwa drei Prozent des Internets sind für Menschen mit Einschränkungen zugänglich. Damit sind allein in Deutschland 20 Millionen Menschen von bis zu 97 Prozent aller Internetservices abgeschnitten. Mit dem 2025 in Kraft tretenden European Accessibility Act (EAA) rückt das Thema digitale Barrierefreiheit nun notgedrungen in den Fokus vieler Unternehmen. Ziel ist es, eine digitale Barrierefreiheit zu schaffen.
Auch wenn der EAA in erster Linie auf Inklusion und digitale Teilhabe von Personen mit einer Behinderung abzielt, bietet die Umsetzung der neuen Richtlinien weitreichende Potenziale für Onlinehändler:
- Eine breitere Zielgruppe erschließen: Allein in Deutschland ermöglichen es barrierefreie Webauftritte rund 20 Millionen Menschen mit Einschränkungen, digitale Inhalte (besser) nutzen zu können.
- Verbesserte Usability: Eine barrierefreie Gestaltung geht Hand in Hand mit höchster Nutzer:innenfreundlichkeit (Usability). Davon profitieren grundsätzlich alle Anwender:innen.
- Positive SEO-Effekte: Was für Bildschirmlesegeräte funktioniert, ist auch für Suchmaschinen lesbar. Mit semantisch hochwertigen Codes und verständlichen Beschreibungen werden Webshops in den Suchergebnissen höher gerankt und sind besser auffindbar.
- Die Conversion-Rate steigern: Intuitiv bedienbare Plattformen führen Nutzer:innen schnell zum Ziel. Das verbessert die Kundenzufriedenheit und erhöht die Kaufbereitschaft.
- Die Qualitätssicherung vereinfachen: Verbindliche Richtlinien für die barrierefreie Gestaltung geben Orientierung bei der Content-Optimierung und -Pflege sowie bei Design- und Entwicklungsfragen.
- Die Brand-Reputation verbessern: Barrierefreie Nutzer:innenerlebnisse wirken sich positiv auf die Markenwahrnehmung aus. Davon können alle Unternehmen profitieren und als Vorreiter in ihrer Branche neue Standards etablieren.
Eckpfeiler aller Bundes- und EU-Verordnungen sind die Web Content Accessibility Guidelines (WCAG), die das World Wide Web Consortium (W3C) definiert hat. Die WCAG 2.2 stützen sich auf vier Prinzipien für barrierefreie Web-Inhalte: Wahrnehmbarkeit, Bedienbarkeit, Verständlichkeit und Robustheit, denen 13 Richtlinien und 86 Erfolgskriterien untergeordnet sind. Zu berücksichtigen sind außerdem drei Konformitätsstufen A, AA und AAA, die aufsteigend den Grad der Barrierefreiheit angeben. In den EU-Verordnungen wird der AA-Standard referenziert.
Praxisleitfaden: Digitale Angebote barrierefrei gestalten
Ein genauerer Blick auf die WCAG gibt Aufschluss darüber, wie Entwickler:innen, UX-Designer:innen und Content-Verantwortliche die Anforderungen umsetzen können.
Prinzip 1: Wahrnehmbarkeit
Die Wahrnehmbarkeit ist vor allem für Menschen mit visuellen, auditiven und kognitiven Einschränkungen relevant. Anforderung ist, Inhalte so darzustellen, dass sie für alle Nutzer:innen erkennbar sind. Informationen müssen also über mehrere Sinne wahrgenommen und auf unterschiedliche Weise bedient werden können.
Textalternativen bieten: Für alle nichtschriftlichen Inhalte wie Bilder und Grafiken müssen textbasierte Alternativen verfügbar sein, die von Nutzer:innen in andere Formen übertragbar sind, etwa in Großschrift, haptische Braille-Schrift, Symbole oder als Sprachausgabe.
Empfehlungen der Redaktion
Multimedia-Alternativen schaffen: Auch für audiovisuelle Medien müssen alternative Darstellungsformen verfügbar sein, etwa Untertitel, Audiodeskriptionen, Transkriptionen oder Videos in Gebärdensprache.
Anpassungsfähige Layouts und Strukturen nutzen: Durch ein flexibles Layout und eine stabile Struktur sind Seiten leichter an verschiedene Kontexte anpassbar – nicht nur an unterschiedliche Endgeräte, sondern auch an benötigten Support durch Assistenztools wie Screenreader.
Inhalte unterscheidbar machen: Durch ausreichende Kontraste, dezente Hintergründe und angemessene Schriftgrößen lassen sich Informationen besser unterscheiden und wahrnehmen.
Prinzip 2: Bedienbarkeit
Die Bedienbarkeit rückt gute Usability in den Fokus und hilft insbesondere Menschen mit kognitiven oder motorischen Einschränkungen. Das User-Interface (UI) muss so gestaltet sein, dass alle Anwender:innen problemlos mit den Inhalten interagieren und gewünschte Informationen erreichen können.
Tastaturbedienbarkeit sicherstellen: Browser und Betriebssysteme unterstützen von Haus aus Tastaturbedienbarkeit, sodass Nutzer:innen mithilfe der Tab-Taste durch interaktive UI-Elemente navigieren und Buttons, Links, Formularfelder bedienen können. Wichtig ist, dass durch semantisch korrektes HTML alle Elemente per Tastatur erreichbar sind und der Fokus des aktiven Elements visuell sichtbar ist.
Zeit für Interaktion lassen: Um Informationen lesen, verstehen und nutzen zu können, sollte für Interaktionen kein unangekündigtes Zeitfenster vorgegeben sein. Das gilt vor allem bei manuellen Eingaben wie Login- und Checkout-Prozessen, Formularen und elektronischen Signaturen.
Visuelle Reize minimieren: Unangekündigte Effekte sind hinsichtlich der Barrierefreiheit ein No-Go. Überladene Menüs sind ebenso zu vermeiden wie blinkende, sich schnell bewegende Elemente und nicht steuerbare Inhalte wie etwa Autoplay.
Webinhalte sinnvoll strukturieren: Semantisch hochwertiges HTML ist Voraussetzung für eine klare, schlüssige Seitenstruktur. Eine wegweisende, erklärende Strukturierung wird mit Alternativtexten, Title-Tags, sogenannten Aria-Labels, Link- und Buttontiteln, Überschriften sowie Beschriftungen für Textabschnitte erreicht.
Bedienung über unterschiedliche Geräte ermöglichen: Bei der Integration von assistierenden Technologien für die Ein- und Ausgabe von Inhalten – zum Beispiel Sprachsteuerung, Screenreader, Bildschirmlupen und Braille-Tastaturen – verhält es sich ähnlich wie mit der Tastaturbedienbarkeit: Nur durch ein korrektes HTML kann die Software automatisch die richtigen Informationen ausgeben.
Prinzip 3: Verständlichkeit
Damit Nutzer:innen stets verstehen, wo sie sich auf einer Seite befinden, welche Optionen sie haben und wohin sie navigieren, müssen Informationen und die Bedienung durchgehend nachvollziehbar sein. Für Nicht-Muttersprachler:innen, Fachfremde und Personen mit kognitiven Einschränkungen können Inhalte in leichter Sprache eine große Hilfe sein.
Lesbarkeit optimieren: Neben der Kontraststärke entscheidet die Typografie maßgeblich über die Lesbarkeit. Dabei sind neben zoombaren Schriften auch Zeilen- und Zeichenabstände zu berücksichtigen. Vermieden werden müssen durchgängige Großschreibung oder die Kursivstellung ganzer Textblöcke. Auch UI-Elemente wie Buttons, Inputfelder und Slider sollten sich klar vom Hintergrund abheben.
Eingabehilfen bieten: Eindeutige Labels, eine automatische Fehlererkennung und Korrekturvorschläge helfen bei manuellen Eingaben, Fehler zu vermeiden.
Vorhersehbarkeit schaffen: Bei der Gestaltung funktionaler und interaktiver Elemente kann man sich an gewohntem Nutzungsverhalten orientieren: Hilfefunktionen sollten immer an der gleichen Stelle zu finden sein. Der Klick auf einen Button oder ein Icon sollte die erwartbare und ausgewiesene Aktion auslösen. Überraschende Elemente wie Autoplay und Popups sind zu vermeiden.
Prinzip 4: Robustheit
Digitale Barrierefreiheit hängt nicht nur von zugänglichen, leicht nutzbaren Inhalten ab, sondern auch von der Kompatibilität mit Browsern und anderen Benutzeragenten. Das Prinzip der Robustheit zielt darauf ab.
Browser- und plattformübergreifende Kompatibilität optimieren: Digitale Angebote sollten in verschiedenen technischen Umgebungen wie Webbrowsern und assistierenden Ausgabegeräten funktionieren. Das wird durch eine vollständige, fehlerfreie Implementierung von Inhalten erreicht, was ein semantisch hochwertiges HTML und eine saubere Programmierung voraussetzt.
Wichtig: In Deutschland ist die Barrierefreie-Informationstechnik-Verordnung das Maß der Dinge für die Umsetzung des EAA. Die Verordnung umfasst insgesamt 98 Richtlinien – Tendenz steigend – und geht damit über die Kriterien der WCAG hinaus.
Welche Tools helfen bei der Implementierung von Barrierefreiheit?
Bei vielen Fragen zur Umsetzung der Standards können spezielle Tools unterstützen. Die Web Accessibility Initiative, ein Bereich innerhalb des W3C, hat eine Liste mit Programmen und Online-Diensten zur Verfügung gestellt, bei der die Suche über Filter eingegrenzt werden kann.
Abseits dieser Liste gibt es weitere Tools, die gezielt bei Entwicklungsprozessen, ersten Einschätzungen und beim Allgemeinverständnis für die Barrierefreiheit deiner Plattform helfen können.
Page-Scans
Zwei Klassiker für umfassende Page-Scans und Empfehlungen zur Optimierung einzelner Seiten: die Browserextension von axe DevTools und das Online-Tool AccessibilityChecker. Eine userfreundliche Open-Source-Variante ist das Bookmarklet von sa11y.
Entwicklungsbegleitende Qualitätssicherung h3
Klassiker ist der IBM Qual Access Checker als Browser-Addon oder Entwicklungs-Tool. Codes können fortlaufend geprüft und Kriterien für Barrierefreiheit als Code-Qualitätsstandard integriert werden. Eine leichtgewichtige Open-Source-Alternative ist pa11y, die Monitoring und automatisiertes Testing mit verschiedenen Accessibility-Checks ermöglicht.
Design- und Content-Checks
Fragen nach ausreichenden Kontrasten von Texten, Schaltflächen und anderen Elementen erübrigen sich mit Online-Tools wie dem WebAIM Contrast Checker. Für die Verifizierung lesbarer Überschriften und Strukturen ist die Browser-Extension HeadingsMap ein Must-have.
Solche Testing-Tools fokussieren sich allerdings nur auf einzelne Bereiche der barrierefreien Gestaltung und beziehen sich überwiegend auf die WCAG. Sie decken daher nicht alle Anforderungen ab, die zur Einhaltung der rechtlichen Standards zur Barrierefreiheit notwendig sind.
Das Testen mit Screenreader-Software und auch wichtige Erkenntnisse durch manuelle Bedienbarkeitstests bleiben mit solchen Tools aus. Besondere Vorsicht ist bei KI-basierten Heilsversprechen geboten: Viele Betroffene berichten, dass sogenannte KI-Overlays für Barrierefreiheit das Ergebnis eher verschlechtern als verbessern.
Fazit
Das Erfüllen der gesetzlichen Standards ist das eine, die strategische Optimierung und das Ausschöpfen aller Potenziale das andere. Digitale Barrierefreiheit umfasst technische, konzeptionelle, redaktionelle, kommunikative und organisatorische Aspekte. Es erfordert daher das Zusammenwirken unterschiedlicher Kompetenzen und Fachbereiche als Teil einer ganzheitlichen Arbeitsweise, die Inklusion im Web priorisiert. Bei diesem gewerkeübergreifenden Herangehen muss Barrierefreiheit als grundlegender Qualitätsstandard verstanden werden. Auf lange Sicht gelingt das nur in einem fortlaufenden Prozess, der mit Analysen als Bestandsaufnahme beginnt und von einer qualitätssichernden Accessibility Assurance und Schulungen begleitet wird.
Maria Kern ist technische Beraterin mit Schwerpunkt auf Frontend-Technologien in der E-Commerce-Entwicklung bei Valantic und unterstützt ihre Kunden bei der Erschaffung maßgeschneiderter E-Commerce-Plattformen.
Ariane Rosing ist Senior Frontend Developer & Accessibility Specialist bei Valantic: Umsetzung und Analyse barrierefreier digitaler Auftritte erarbeitet sie sowohl anhand rechtlicher Kriterien als auch durch Netzwerkarbeit und Best-Practice-Ansätzen über den Tellerrand hinaus.
