In einer Welt, in der ein bedeutender Teil des Lebens online stattfindet, sollten alle Menschen – unabhängig von Beeinträchtigungen – Zugang zu digitalen Inhalten haben. Niemand sollte ausgeschlossen werden, wenn es um Zugang zu Informationen, Dienstleistungen und Gemeinschaften online geht. Barrierefreiheit bietet jedoch nicht nur ethische Vorteile, sondern ist seit dem 28.06.2025 durch das Barrierefreiheitsstärkungsgesetz (BFSG) auch zu einer rechtlichen Anforderung in Deutschland geworden. Die Web Content Accessibility Guidlines (WCAG) verlangen eine barrierefreie Gestaltung von Webanwendungen. Unternehmen, die diese ignorieren, riskieren empfindliche Geldstrafen.
In diesem Blogbeitrag möchten wir Dir neben einem besseren Bewusstsein für die bestehenden Barrieren auch erste Schritte aufzeigen, wie Du Deine Webanwendung barrierefreier gestalten kannst.
Einschränkungen und ihre Auswirkungen
Schlüpft man in die Haut eines älteren Menschen, wird schnell klar, dass eingeschränkte Sehkraft oder motorische Probleme die Interaktion mit digitalen Inhalten erschweren können. Kleine Schrift, unzureichender Farbkontrast und dicht beieinanderliegende Buttons können dabei schnell zum Hindernis werden. Deshalb ist es wichtig, sich zunächst bewusst zu machen, welche Einschränkungen existieren, um die Hürden zu verstehen.
Visuelle Barrieren:
Menschen mit Sehbeeinträchtigungen, wie Blindheit oder Farbenblindheit, haben oft Schwierigkeiten, Bilder auf Webseiten wahrzunehmen, insbesondere wenn keine Alternativtexte vorhanden sind oder der Farbkontrast unzureichend ist.
Auditive Barrieren:
Menschen mit Hörbeeinträchtigungen haben Schwierigkeiten, Videoinhalte zu verstehen, wenn keine Untertitel oder Transkriptionen bereitgestellt werden. Audioinhalte ohne begleitenden Text bieten ihnen keinen Zugang zu relevanten Informationen.
Motorische Barrieren:
Personen mit motorischen Einschränkungen haben häufig Probleme mit präzisen Klicks und benötigen möglicherweise spezielle Eingabegeräte. Eine Seite, die stark auf Mausinteraktionen angewiesen ist, kann für sie eine nervenaufreibende Hürde darstellen.
Kognitive Barrieren:
Menschen mit kognitiven Beeinträchtigungen fühlen sich oft von komplexer Sprache und unstrukturierten Inhalten überfordert; klare und einfache Kommunikationsweise sowie gut gegliederte Informationen sind entscheidend, um ihren Zugang zu erleichtern.
Technologische Barrieren:
Nicht jede:r hat Zugriff auf die neueste Technik oder die schnellste Internetverbindung. Webseiten, die zu komplex sind oder stark von modernen Technologien abhängen, können Nutzer:innen ohne die entsprechenden Geräte oder Verbindungsmöglichkeiten ausschließen.
Nachdem wir ein besseres Verständnis für die verschiedenen Einschränkungen bekommen haben, können wir nun genauer auf konkrete Schritte zur Vermeidung von Barrieren eingehen. Welche Barrieren könnten hier bestehen, die Menschen mit diesen Einschränkungen daran hindern, die Inhalte zu nutzen?
Zehn Schritte zur Verbesserung der Barrierefreiheit Deiner Webanwendung
Im Folgenden findest Du zehnpraktische Schritte, die auf den A- und AA-Kriterien der WCAG-Richtlinien basieren und Dir helfen, die Barrierefreiheit Deiner Webanwendung mit minimalem Aufwand zu erhöhen. Gehe dabei Deine Webseite Schritt für Schritt durch und nimm bewusst die Perspektive von Menschen mit Einschränkungen ein. Nutze dabei die nachstehenden Hilfsmittel und Werkzeuge, um eventuelle Barrieren zu entdecken.
Schritt 1 - Texte einbinden
Stelle sicher, dass Texte nicht als Bilder eingebunden, sondern als tatsächlicher Text verwendet werden. Nur so kann der Text von Tools verarbeitet und beispielsweise vorgelesen werden. Der Kontrast zwischen Text und Hintergrund sollte mindestens 4,5 betragen (3 für großen Text). Zudem sollte das Design responsive sein und eine Vergrößerung des Textes von bis zu 200 % ohne Verlust von Inhalt oder Funktionalität ermöglichen. Den Farbkontrast kann man häufig mit den Developer-Tools des Browsers oder auch mit speziellen Tools wie dem WebAIM Contrast Checker überprüfen. Nützlich sind auch Tools wie Eye-Able, die direkt mehrere Funktionen wie Schriftvergrößerung, Kontrastanpassung und eine Vorlesefunktion bieten.Schritt 2 - Alternativtexte für nicht-textuelle Inhalte
Füge für alle nicht-textuellen Inhalte wie Bilder, Icons und Diagramme textbasierte Alternativen hinzu. Verwende alt-Attribute für <img>-Elemente und geeignete ARIA-Attribute. Der Alternativtext sollte kontextbezogen und aussagekräftig sein und den nicht-textuellen Inhalt im jeweiligen Zusammenhang erklären. Hintergrundbilder können mit einem leeren alt-Wert versehen werden, um sie von assistiven Technologien zu ignorieren.
Schritt 3 - verwendung von Screenreadern
Nutze verschiedene Screenreader-Programme, wie JAWS, NVDA oder VoiceOver, um durch Deine Webanwendung zu navigieren. Schließe die Augen und achte darauf, ob alle wichtigen Inhalte vorgelesen werden und die Reihenfolge stimmig ist. Es ist sinnvoll, Screenreader in unterschiedlichen Browsern und auf diversen Endgeräten auszuprobieren, um alle Optionen abzubilden.
Schritt 4 - Barrierefreie Formulare
Jedes Eingabefeld sollte ein Label oder eine Beschreibung haben (z.B. mit dem label-Tag, aria-label, aria-labelledby, aria-describedb oder einer textuellen Anweisung). Bei fehlerhaften Eingaben sollten verständliche Fehlermeldungen textuell bereitgestellt werden. ARIA-Attribute wie aria-invalid können hier hilfreich sein.
Schritt 5 - Klickbare Objekte vergrößern
Stelle sicher, dass klickbare Objekte wie Buttons und Links mindestens 24x24px groß sind. Der Zweck von Links sollte klar erkennbar sein, beispielsweise durch beschreibende Linktexte oder aria-labels.
Schritt 6 - Barrierefreie CAPTCHAs
CAPTCHAs sollten eine textuelle Erklärung ihres Zwecks bieten und eine alternative Modalität, wie etwa ein Audio-CAPTCHA, zur Verfügung stellen, um Zugänglichkeit zu ermöglichen.
Schritt 7 - Sensorische Merkmale berücksichtigen
Achte darauf, dass wichtige sensorische Merkmale wie Farben und Formen textuell beschrieben werden, wenn sie für das Verständnis oder die Bedienbarkeit notwendig sind. So sollte zum Beispiel ein roter Fehlerhinweis zusätzlich erklärt werden, damit auch Personen mit Farbsehschwäche ihn verstehen können. Der Kontrast muss auch hier mindestens 3 betragen.
Schritt 8 - Responsive Design
Teste Deine Webanwendung in verschiedenen Bildschirmorientierungen (Quer- und Hochformat) und Bildschirmformaten. Stelle auch bei kleinen Bildschirmen wie Smartphones sicher, dass Nutzer nur in eine Richtung scrollen müssen. Verwende die responsiven CSS-Layouts flex oder grid.
Schritt 9 - Tastaturnavigierbarkeit
Vergewissere dich, dass alle Interaktionen auf der Webanwendung vollständig über die Tastatur bedienbar sind. Vermeide „Keyboard Traps“ - also Situationen, in denen ein:e Nutzer:in mit der Tastatur in einem bestimmten Bereich stecken bleibt und nicht mehr zu anderen Elementen navigieren kann. Achte auch hierbei darauf, dass der aktuelle Fokus während der Tastaturnavigation visuell sichtbar ist.
Schritt 10 - Verwendung von semantischem HTML
Nutze die passenden HTML-Tags für verschiedene Inhalte. Setze <button>-Elemente für interaktive Schaltflächen ein und formatiere Überschriften mit <h1>- bis <h6>-Tags in einer klaren Überschriftenhierarchie, um die Struktur klar darzustellen. Verwende <ul> für ungeordnete und <ol> für geordnete Listen, damit Screenreader die Anzahl der Elemente erkennen. Setze im html-Tag die Default-Sprache Deiner Webanwendung als lang-Attribut.
Fazit
Barrierefreiheit ist nicht nur eine rechtliche Anforderung, sondern ein ethischer Anspruch, der es uns ermöglicht, alle Menschen im digitalen Raum willkommen zu heißen. Die Initiativen zur Verbesserung der Barrierefreiheit können in jedem Unternehmen beginnen, unabhängig von den Ressourcen oder dem technischen Fachwissen. Durch die Umsetzung der hier vorgestellten zehn praktischen Schritte machst Du Deine digitalen Inhalte für alle zugänglich, unabhängig von Fähigkeiten oder Einschränkungen. Letztlich fördert jede Maßnahme zur Verbesserung der Barrierefreiheit nicht nur eine positive Nutzererfahrung, sondern erhöht auch die Reichweite Deiner Webanwendung.
Autorinnen
Nina Utzelmann ist als Beraterin bei der viadee IT-Unternehmensberatung tätig und legt ihren Schwerpunkt im Kundeneinsatz auf Frontend- und Backend-Entwicklung. Darüber hinaus widmet sie sich intern den Bereichen Frontend und User Experience, um benutzerfreundliche Lösungen zu entwickeln.
Sarah Augustin ist als Beraterin bei der viadee IT-Unternehmensberatung tätig. Sowohl im Kundeneinsatz als auch in internen Projekten beschäftigt sie sich aktuell schwerpunktmäßig mit der Frontend-Entwicklung.
zurück zur Blogübersicht
Diese Beiträge könnten Sie ebenfalls interessieren
Keinen Beitrag verpassen – viadee Blog abonnieren
