Am 28. Juni 2025 tritt das Europäische Gesetz zur Barrierefreiheit(EAA) in Kraft, das die Barrierefreiheit von Produkten, Websites und anderen Dienstleistungen regelt. Als Unternehmen drohen Ihnen Strafen, wenn die gesetzlichen Anforderungen nicht erfüllt werden. Um die gesetzlichen Vorgaben zu erfüllen und eine Ausgrenzung von Nutzern zu vermeiden, empfehlen wir die Anwendung der WCAG (Web Content Accessibility Guidelines).
Die Web Content Accessibility Guidelines (WCAG) sind ein internationaler Standard für die Erstellung von Webinhalten, die für alle Menschen zugänglich sind, unabhängig von einer Behinderung. Sie umfassen eine breite Palette von Richtlinien zur Förderung der Barrierefreiheit, und in diesem Artikel werden wir einige davon näher betrachten. Neben den verschiedenen Konformitätsstufen basieren die Web Content Accessibility Guidelines (WCAG) zudem auf vier Kernprinzipien der Barrierefreiheit im Web.
Robust
Wahrnehmbar
Bedienbar
Verständlich
Diese Grundsätze bilden eine solide Grundlage für die Beurteilung Ihrer Einhaltung der Barrierefreiheitsstandards.
Um die Inklusion aller Nutzer zu gewährleisten, sollte die Website über verschiedene Browser zugänglich sein und die Nutzung verschiedener assistiver Technologien unterstützen.
Ein Screenreader ist ein Hilfsmittel, das Text und visuelle Inhalte vorliest und von Menschen mit Sehbehinderungen genutzt wird. Um Nutzer mit Seh- oder motorischen Behinderungen einzubeziehen, die ausschließlich auf eine Tastatur oder Sprachsteuerung angewiesen sind, sollten Komponenten anhand ihrer Funktion beschrieben und die Seitenstruktur übersichtlich gestaltet werden. Verwenden Sie beispielsweise das „button“-Element im Code, wenn eine Schaltfläche vorgesehen ist.
Um dies zu überprüfen, können Sie Validierungstools wie den Markup Validation Service verwenden.
Es ist unerlässlich, sicherzustellen, dass Nutzer Elemente wahrnehmen und die Struktur von Inhalten verstehen können. Visuelle Medien sollten verbale Beschreibungen enthalten, der Farbkontrast muss ausreichend sein, und Audioinhalte sollten klar und gut unterscheidbar sein. Diese Aspekte sind besonders wichtig für Nutzer, die auf assistive Technologien angewiesen sind.
Die Inhalte auf der Seite sollten so strukturiert sein, dass Nutzer sich mit einem Screenreader leicht zurechtfinden können – sowohl bei visuellen Elementen als auch bei Text. Fehlt diese Struktur, kann es für Nutzer schwierig sein, sich zu orientieren. Beachten Sie, dass die Wiederholung desselben Textes für mehrere anklickbare Elemente es jemandem, der das Layout nicht sehen kann, unmöglich machen kann, zwischen ihnen zu unterscheiden.
Alt-Text dient dazu, visuelle Medien zu beschreiben, damit Screenreader die visuelle Botschaft vermitteln können. Ohne Alt-Text kann das Bild von Nutzern mit Sehbehinderungen nicht wahrgenommen werden.
Um zu überprüfen, ob das Kontrastverhältnis zwischen Text und Hintergrund dem vorgeschriebenen Mindestwert von 4,5:1 entspricht, stehen verschiedene Tools zur Verfügung. Es gibt jedoch Ausnahmen – wie beispielsweise Diagramme und andere visuelle Elemente –, für die lediglich ein Kontrastverhältnis von 3:1 erforderlich ist. Elemente, die übereinander liegen oder ineinander verschachtelt sind, sollten ebenfalls einen ausreichenden Farbkontrast aufweisen und müssen im Verhältnis zueinander geprüft werden. Zum Testen des Farbkontrasts können Tools wie der „Contrast Checker“ von WebAIM verwendet werden.
Es ist außerdem wichtig, sich nicht ausschließlich auf Farbe als einzigen Informationsträger auf der Seite zu verlassen. Es sollten auch strukturelle Unterschiede genutzt werden, damit Menschen mit verschiedenen Arten von Farbenblindheit die Informationen wahrnehmen können. Darüber hinaus können Sie Tooltips – Text, der beim Darüberfahren mit der Maus erscheint – verwenden, um die Botschaft weiter zu verdeutlichen und zu verstärken.
Benutzeroberflächenkomponenten und die Navigation müssen bedienbar sein. Das bedeutet, dass Nutzer unabhängig von ihren motorischen Fähigkeiten mit der Benutzeroberfläche interagieren können müssen. Beispielsweise sollten alle Funktionen über die Tastaturnavigation zugänglich sein, und interaktive Elemente sollten über eine eindeutige Fokusanzeige verfügen, die anzeigt, an welcher Stelle auf der Seite sich der Nutzer gerade befindet.
Leerräume zwischen den Elementen sind von Vorteil, da sie den Nutzern helfen, interaktive Komponenten leicht anzutippen oder anzuklicken. Dies gilt sowohl für mobile Touchscreens als auch für die Mausbedienung auf Desktop-Bildschirmen. Es ist wichtig zu berücksichtigen, wie dies bei verschiedenen Formaten funktioniert, wenn die Seite responsiv gestaltet ist.
Um sich wiederholende Informationen zu vermeiden und den Nutzern zu helfen, den Zusammenhang zwischen interaktiven Elementen und zugehörigen Inhalten zu verstehen, kann ein beschreibender Link, der sich auf die Überschrift bezieht, besser geeignet sein als die wiederholte Verwendung eines generischen „Weiterlesen“-Links unter dem Text. Dies bietet Nutzern von Bildschirmleseprogrammen sofortigen Kontext innerhalb des Linktextes selbst, sodass sie genau wissen, worauf sie klicken, um fortzufahren.
Tastaturkürzel können die Effizienz für viele Nutzer verbessern, sind jedoch besonders wichtig für Menschen mit motorischen oder Sehbehinderungen, da die Maus ausschließlich auf visuelle Navigation angewiesen ist. Verschiedene Geräte und Betriebssysteme verwenden möglicherweise unterschiedliche Tastaturkürzel, daher ist es wichtig, diese Unterschiede zu kennen.
Da Kommunikation der einzige Weg ist, Nutzer zur Interaktion mit Ihrer Website zu bewegen, sollten die Inhalte informativ und leicht verständlich sein. Was der Nutzer auf der Seite sieht, sollte zudem vorhersehbar sein. Daher ist es hilfreich, Designmuster und Formulierungen zu verwenden, die im Internet allgemein anerkannt und bekannt sind.
Außerdem ist es wichtig, dass die Elemente auf der Seite einheitlich gestaltet sind, damit Nutzer nicht immer wieder neu lernen müssen, wie die Funktionen zu bedienen sind. Dies reduziert unnötige kognitive Belastung und sorgt dafür, dass die Kernbotschaft und die Informationen, die Sie vermitteln möchten, stärker im Fokus stehen. Auch Screenreader müssen die Inhalte auf der Seite interpretieren können; daher wird dringend empfohlen, Tests mit einem Screenreader durchzuführen, um sicherzustellen, dass alles wie beabsichtigt funktioniert.
Benutzer sollten die Möglichkeit haben, an verschiedenen Stellen eine Pause einzulegen und dennoch zu wissen, an welcher Stelle der Seite sie sich befinden, damit sie die Interaktion fortsetzen können, wenn sie zurückkehren. Eine klare Navigation ist auch dann unerlässlich, wenn etwas passiert – wird beispielsweise eine Fehlermeldung angezeigt, muss der Benutzer verstehen, welche Maßnahme er als Nächstes ergreifen muss.
Ein Beispiel hierfür ist die Platzierung von Hilfetext vor Eingabefeldern, sodass Nutzer von Bildschirmleseprogrammen die Meldung erhalten, bevor sie mit der Eingabe beginnen.
Wichtig ist auch, dass sich interaktive Elemente vorhersehbar verhalten, insbesondere für Nutzer mit kognitiven Beeinträchtigungen. Wenn der Nutzer beispielsweise auf eine Schaltfläche klickt, sollte er genau dorthin weitergeleitet werden, wohin die Schaltfläche hinweist. Deshalb ist es unerlässlich, dass Inhalte und Navigation aufeinander abgestimmt und konsistent sind.
Ebenso wichtig ist es, Elemente auf der Grundlage etablierter Designmuster zu gestalten. Zudem sollten interaktive Elemente auf der Seite einheitlich gestaltet sein, damit Nutzer leicht erkennen können, dass eine Schaltfläche eine Schaltfläche und ein Eingabefeld ein Eingabefeld ist.
Da das Europäische Barrierefreiheitsgesetz (EAA) am 28. Juni 2025 in Kraft tritt, sind viele Unternehmen davon betroffen und müssen damit beginnen, die Struktur ihrer Websites, Produkte oder anderer in der Entwicklung befindlicher Systeme anzupassen. Je früher die „Web Content Accessibility Guidelines“ (WCAG) befolgt werden, desto einfacher und kostengünstiger wird die Umsetzung der notwendigen Verbesserungen der Barrierefreiheit sein. Daher ist es ratsam, so früh wie möglich – also lange vor Inkrafttreten des Gesetzes – zu prüfen, ob das Produkt, das Sie besitzen oder an dem Sie arbeiten, die EU-Anforderungen an die Barrierefreiheit erfüllt.
Wir führen Barrierefreiheitsprüfungen durch, die deutlich aufzeigen, was verbessert werden muss, um die gesetzlichen Anforderungen zu erfüllen.
Schauen Sie hier vorbei, wenn Sie Unterstützung benötigen.
Dieser Artikel wurde am 9. Januar 2025 vom QESTIT UX-Team aktualisiert.