Lesedauer: 0 Minuten
Im digitalen Zeitalter ist die Zugänglichkeit von Websites nicht nur eine Frage der Benutzerfreundlichkeit, sondern auch eine rechtliche Verpflichtung.
Dieser Artikel beleuchtet die wichtigsten Faktoren, die eine Website barrierefrei machen, identifiziert häufige Barrieren und zeigt Lösungen zu deren Beseitigung auf.
Zu Barrieren zählen technische Einschränkungen als auch körperliche, geistige und seelische Einschränkungen, sowie zahlreiche temporäre Barrieren.
Eine barrierefreie Website ermöglicht es Menschen mit unterschiedlichen Einschränkungen, sich im Internet zurechtzufinden und Informationen zu konsumieren.
Gesetzliche Anforderungen an die Barrierefreiheit sollen die Verbraucher:innen schützen.
Eine Website ist barrierefrei, wenn sie so gestaltet ist, dass sie für alle Menschen, unabhängig von ihren körperlichen oder kognitiven Einschränkungen, zugänglich, leicht verständlich und nutzbar ist. Dazu gehören Aspekte wie die Lesbarkeit von Texten, die Bedienbarkeit von Navigationselementen und die Kompatibilität mit assistiven Technologien wie Bildschirmleseprogrammen.
Die Herausforderung besteht darin, allen Anforderungen der Digitalen Barrierefreiheit und gleichzeitig auch den Bedürfnissen der Nutzer:innen gerecht zu werden. Eine barrierefreie Website sollte für sehende Menschen optisch ansprechend und für Menschen, die auf technische Hilfsmittel angewiesen sind, erfassbar sein.
Barrieren sind sowohl technische als auch körperliche, geistige und seelische Einschränkungen. Diese können dauerhaft oder vorübergehend sein. Sie sind auch in § 3 des deutschen Behindertengleichstellungsgesetzes (BGG) aufgeführt.
Technische Hürden können Websites sein, die nicht barrierefrei gestaltet sind. Zum Beispiel, wenn Inhalte nicht durch spezielle Hilfsmittel zugänglich sind, wie durch fehlende…
Für Menschen mit Seheinschränkungen können Hindernisse wie fehlende Beschreibungstexte zu Bildern, schlechter Farbkontrast oder zu kleine Schrift problematisch sein. Sogar ein…
Bei Einschränkungen des Hörens wie Taubheit oder temporäre Einschränkung des Gehörs können fehlende Untertitel oder Audiodeskriptionen oder audiobasierte Navigationselemente ohne…
Menschen mit motorischen Einschränkungen, wie zum Beispiel einem gebrochenen Arm oder anderen körperlichen Beeinträchtigungen, haben Schwierigkeiten, wenn Websites nicht mit…
Gesetze und Richtlinien zur Barrierefreiheit spielen eine zentrale Rolle, um sicherzustellen, dass Webinhalte für Menschen mit unterschiedlichsten Einschränkungen zugänglich und nutzbar sind.
Die Web Content Accessibility Guidelines (kurz: WCAG) aus dem Jahr 2008 sind eine mehrstufige Richtlinie und Anleitung, um IT-Anwendungen für Menschen mit Behinderungen möglichst barrierefrei zu gestalten. Sie bieten klare Angaben zur technischen und visuellen Umsetzung und legen Standards für barrierefreie Webauftritte fest.
Der Katalog ist nach den vier POUR-Prinzipien gegliedert: Wahrnehmbarkeit (Perceivable), Bedienbarkeit (Operable), Verständlichkeit (Understandable), Robustheit (Robust).
Er gliedert sich zusätzlich in drei Stufen der Barrierefreiheit. Es wird zwischen den Stufen A, AA und AAA unterschieden. A beschreibt die niedrigsten Kriterien und AAA die höchsten. Diese geben spezifische Kriterien für die Zugänglichkeit vor, wie beispielsweise Textalternativen für nicht-textuelle Inhalte, die Lesbarkeit von Texten und die Kompatibilität mit assistiven Technologien.
Die Einhaltung dieser Gesetze und Richtlinien ist ab 2025 verpflichtend, andernfalls drohen Klagen. Für Unternehmen ist es daher entscheidend, sich mit diesen Vorgaben auseinanderzusetzen und ihre Onlineshops und Websites entsprechend anzupassen.
Die Web Accessibility Initiative (WAI) ist ein Teil des World Wide Web Consortium (W3C), der sich mit der Verbesserung der Zugänglichkeit des Internets für Menschen mit Behinderungen befasst. Ziel der Initiative ist es, möglichst vielen Menschen das Web zugänglich zu machen.
Die WAI entwickelt Richtlinien, die als internationaler Standard für Web-Zugänglichkeit dienen. Zu den wichtigsten Publikationen gehören die Web Content Accessibility Guidelines (WCAG), die Authoring Tool Accessibility Guidelines (ATAG) und die Accessible Rich Internet Applications (ARIA). Diese Richtlinien geben detaillierte Empfehlungen für die Entwicklung von barrierefreien Webinhalten, Webanwendungen und Webtools.
Die Arbeit der WAI umfasst nicht nur die Erstellung von Richtlinien, sondern auch die Förderung der Zugänglichkeit durch Bildung, Forschung und die Entwicklung von Tools, die Entwickler:innen, Webdesigner:innen und Organisationen helfen, die Zugänglichkeit ihrer Websites und Anwendungen zu verbessern.
Dadurch trägt die WAI dazu bei, das Web inklusiver zu gestalten und sicherzustellen, dass alle Nutzer:innen, unabhängig von ihren körperlichen oder kognitiven Fähigkeiten, Zugang zu Informationen und Diensten haben, die das Internet bietet.
Seit 2002 schreibt § 3 des deutschen Behindertengleichstellungsgesetzes vor, Webangebote barrierefrei zu gestalten. Die BITV - seit 2011 BITV 2.0 - ist eine Ergänzung des Gesetzes und basiert auf den Richtlinien des W3C. Sie hat zum Ziel, Informationstechnik für Menschen mit Behinderungen aller Art zugänglich und nutzbar zu machen.
Die Verordnung gilt insbesondere für alle öffentlich zugänglichen Webangebote des Bundes. Private und kommerzielle Websites sind nicht betroffen, können sich aber an den WCAG des W3C orientieren.
Um Ihre Website barrierefrei und nach den Richtlinien der WAI zu gestalten, können Sie folgende Punkte beachten:
Skalierbarkeit: Geben Sie Schriftgrößen, Flächen und Abstände relativ mit em- oder Prozent an. Das hilft dabei, dass die Website áuch dann lesbar und übersichtlich bleibt, wenn die Textgröße im Browser bis zu 200% vergrößert.
Responsivität: Ihre Website sollte auf allen Endgeräten gut lesbar sein.
Überschriftenstruktur (h-Tags): Beim Gestalten einer Webseite ist es wichtig, die Überschriften h1-h6 richtig zu benutzen. Es gibt eine große Hauptüberschrift (h1), wie die Überschrift eines Buches. Danach kommt h2, vergleichbar mit den Kapiteltitels eines Buches. Weiter im Text sollten Sie dann entweder wieder eine h2 oder eine kleinere Überschrift, h3, verwenden.
Navigation: Die Navigation der Website sollte so einfach sein, dass jede:r sie nutzen kann, auch wenn dabei keine Maus verwendet wird, sondern nur die Tastatur.
Kontrastverhältnis: Farben und Kontraste sollten sich gut voneinander abheben. Besonders wichtig ist das bei Texten. Der Text und der Hintergrund sollten so gewählt sein, dass sie leicht zu unterscheiden sind. Das ist besonders bei kleiner Schrift wichtig.
Lesbarkeit/Hochdeutsch: Achten Sie auf eine gute Lesbarkeit mit einfachen Sätzen und leicht verständlicher Sprache auf Hochdeutsch. Hochdeutsch wird von Vorleseprogrammen eher erkannt als z.B. Jugendsprache. Wenn Sie eine gewisse Sprache oder Fremdwörter verwenden wollen, sollten Sie ein zusätzliches Lexikon mit Erklärungen anbieten.
Akronyme und Abkürzungen: Zeichnen Sie Akronyme und Abkürzungen mit dem vorgesehenen HTML-Element <abbr> aus.
Aussagekräftige Metadaten: Füllen Sie immer die Title-Tags und Meta-Description aus.
Alternativtexte: Verwenden Sie für Bilder und Formulare immer Alternativtexte und Bildbeschreibungen. Vorleseanwendungen benötigen diese für die Sprachausgabe des Inhaltes. Das title-Attribut ist wichtig für Links.
Menschen mit Einschränkungen stoßen bei der Nutzung von Computern und anderen Endgeräten oft auf Barrieren, die ihnen den Zugang zu gesuchten Informationen erschweren. Assistierende Technologien, Hilfsmittel, spielen daher eine entscheidende Rolle, um das Internet zugänglicher und inklusiver zu machen.
Screenreader sind spezielle Programme, die Texte von einem Computerbildschirm in gesprochene Sprache umwandeln. Das ermöglicht es Menschen mit Seheinschränkungen, die Inhalte auf Webseiten durch Hören über Lautsprecher oder Kopfhörer wahrzunehmen.
Sie können mit solchen Programmen auch Kontaktformulare ausfüllen oder Links nutzen. Vorausgesetzt, die Webseite ist so aufgebaut, dass der Screenreader alles richtig interpretieren kann. Dafür ist es wichtig, dass Links und Formulare klar als solche erkennbar sind.
Ein weiteres wichtiges Hilfsmittel für Menschen mit Sehbeeinträchtigung sind Braillezeilen. Diese Geräte übersetzen den Text vom Bildschirm in Brailleschrift, indem sie kleine Punkte durch eine Oberfläche drücken, die mit den Fingerspitzen gefühlt werden kann. So können die Informationen durch Tasten statt durch Sehen aufgenommen werden.
Menschen mit motorischen Beeinträchtigungen verwenden häufig Tastaturen, um durch Websites zu navigieren. Es gibt unzählige Varianten von Spezialtastaturen. Die Tastatur kann manuell oder mit anderen Körperteilen (Ellenbogen, Kopf, Mund etc.) bedient werden.
Spracherkennungssoftware wandelt das gesprochene Wort in Text um, um die Bedienung und Steuerung des Computers und von Websites über Sprachbefehle zu ermöglichen.
Menschen mit eingeschränktem Sehvermögen nutzen oft solche Softwarelösungen. Aber auch bei anderen körperlichen Einschränkungen kann eine Spracherkennungssoftware hilfreich sein.
Vergrößerungssoftware ermöglicht Menschen mit eingeschränktem Sehvermögen, Inhalte auf dem Bildschirm zu vergrößern, um sie besser erkennen zu können. Die Software zeigt immer einen vergrößerten Bildschirmausschnitt, den die Nutzer:innen durch spezielle Farb- und Kontrasteinstellungen optisch verändern können.
Die Navigierbarkeit durch eine barrierefreie Website ist entscheidend, damit alle Nutzer:innen, mit und ohne Einschränkungen, die Inhalte effektiv nutzen können.
Um auch Menschen mit Einschränkungen die Navigation auf einer Website zu ermöglichen, können spezielle Techniken wie "tabindex" oder "ARIA" helfen.
Bei "tabindex" handelt es sich um einen speziellen Code, der dafür sorgt, dass Elemente in einer bestimmten Reihenfolge angezeigt oder übersprungen werden.
Für Nutzer:innen, die Tastaturbefehle statt der Maus verwenden, erleichtert dies die Navigation durch die Website und trägt dazu bei, dass die wichtigsten Inhalte in einer logischen Reihenfolge erreichbar sind.
ARIA (Accessible Rich Internet Application) ist eine Art Baukasten für Web-Entwickler:innen, um Websites besser nutzbar zu machen. Das ist besonders wichtig für Programme, die Websites vorlesen können, so genannte Screenreader. Mit ARIA können die Entwickler:innen bestimmte Teile der Website markieren und beschreiben, damit der Screenreader besser versteht, um was es sich genau handelt. Zum Beispiel kann ein Bereich als Button markiert werden, auch wenn er nicht wie ein typischer Button aussieht. Dadurch kann das Programm den Nutzer:innen sagen, dass dieser Bereich ein Button ist. Das ist für eine intuitive und barrierefreie User Experience unerlässlich.
Gemeinsam tragen "tabindex" und ARIA dazu bei, das Web universeller zugänglich zu machen. Sie gewährleisten, dass alle Nutzer:innen, unabhängig von ihren Fähigkeiten oder Einschränkungen, auf Inhalte zugreifen und mit ihnen interagieren können.
Sie können Ihre Website mit folgenden Tools auf Barrierefreiheit testen:
Lighthouse ist ein Open-Source-Tool und in die Chrome Developer Tools integriert. Es bewertet verschiedene Aspekte von Websites, einschließlich Barrierefreiheit. Es führt automatisierte Audits durch, um Probleme wie fehlende Alt-Texte für Bilder, mangelnde Kontrastverhältnisse und andere Probleme zu identifizieren. Lighthouse bietet einen umfassenden Bericht mit Empfehlungen zur Verbesserung der Performance, der Barrierefreiheit, der Anwendungsoptimierung für Mobilgeräte und mehr.
Das Testverfahren zur BITV wurde vom Bundesministerium für Arbeit und Soziales im Rahmen des Projektes „Barrierefrei informieren und kommunizieren (BIK)“ entwickelt. Es basiert auf den Anforderungen der Barrierefreie Informationstechnik-Verordnung (BITV). Die BITV wiederum basiert auf den Vorgaben der Web Content Accessibility Guidelines (WCAG) der Web Accessibility Initiative (WAI).
Der BITV-Test bewertet, inwieweit Webangebote den gesetzlichen Anforderungen an die Barrierefreiheit entsprechen. Der Test umfasst eine Reihe von manuell durchgeführten Prüfschritten, mit denen verschiedene Aspekte wie Wahrnehmbarkeit, Bedienbarkeit und Verständlichkeit überprüft werden. Er liefert detaillierte Ergebnisse und Handlungsempfehlungen zur Verbesserung der Barrierefreiheit von Webangeboten.
Siteimprove ist ein kommerzielles Online-Tool, das automatisierte Testverfahren anbietet. Es prüft nicht nur die Zugänglichkeit, sondern auch die Suchmaschinenoptimierung, die Qualität der Inhalte und den Datenschutz.
Es hilft Organisationen, ihre Webpräsenz durch automatisierte Analysen und Berichte zu verbessern.
Im Bereich der Barrierefreiheit identifiziert Siteimprove Probleme, die den WCAG (Web Content Accessibility Guidelines) entsprechen, und bietet Lösungen zu deren Behebung an. Siteimprove ist besonders nützlich für Unternehmen, die ihre digitale Compliance sicherstellen möchten.
Die WAVE Toolbar ist ein kostenloses Browser-Plugin, das von WebAIM entwickelt wurde. Es ermöglicht eine einfache und visuelle Überprüfung der Zugänglichkeit von Websites direkt im Browser. Nach der Aktivierung auf einer Webseite zeigt WAVE farbkodierte Icons und Indikatoren an, die auf verschiedene Zugänglichkeitsprobleme hinweisen. Zum Beispiel Fehler bei der Verwendung von ARIA, Probleme mit dem Kontrastverhältnis und fehlende Alt-Attribute bei Bildern. WAVE ist ein leicht zugängliches Tool, mit dem Sie Schwachstellen in der Zugänglichkeit Ihrer Sites schnell erkennen können.
Eine Website gilt als barrierefrei, wenn sie für Nutzer:innen mit unterschiedlichen Einschränkungen zugänglich und nutzbar ist. Dazu gehören Aspekte wie die Lesbarkeit von Texten, die Bedienbarkeit von Navigationselementen und die Kompatibilität mit assistiven Technologien wie Bildschirmleseprogrammen.
Grundsätzlich nein. Dies gilt allerdings nur dann, wenn der B2B-Shop eindeutig als solcher gestaltet ist und bei Aufruf klar erkennbar ist, dass sich die Präsentationen und Angebote ausschließlich an Unternehmer richten und Vertragsabschlüsse mit Verbraucher:innen nicht erfolgen. Barrierefreiheitsanforderungen müssen grundsätzlich nur Verbraucherprodukte und solche Dienstleistungen erfüllen, die für Verbraucher:innen erbracht werden.
Durch die Berücksichtigung von Barrierefreiheit werden Websites und Onlineshops nicht nur für Menschen mit Einschränkungen besser nutzbar, sondern die User Experience verbessert sich für alle Besucher:innen gleichermaßen.
Und eine bessere User Experience führt zu einer geringeren Absprungrate, einer längeren Verweildauer und potenziell zu einer höheren Conversion-Rate.
Barrierefreiheit im Web ist also weit mehr als eine ethische und gesetzliche Verpflichtung. Sie ist auch aus betriebswirtschaftlicher Sicht bedeutend.
Um Ihre Website auf Barrierefreiheit zu testen, können Sie automatisierte Tools wie WAVE oder Lighthouse verwenden, mit denen die meisten Zugänglichkeitsprobleme erkannt werden können. Sie können die logische Reihenfolge der Inhalte oder die Bedienbarkeit mit der Tastatur manuell überprüfen. Mit Screenreader-Software können Sie die Zugänglichkeit für Nutzer:innen mit Seheinschränkungen testen. Zudem können Sie auch Tests mit realen Nutzer:innen durchführen, die auf assistive Technologien angewiesen sind.
Gute Beispiele für barrierefreie Websites finden Sie hier:
W3C Web Accessibility Initiative (WAI): Die WAI stellt Ressourcen und Beispiele für die Umsetzung der Web Content Accessibility Guidelines (WCAG) zur Verfügung.
A11y Project: Eine Community-gesteuerte Website, die Checklisten, Ressourcen und Beispiele für barrierefreie Webentwicklung anbietet.
Global Accessibility Awareness Day (GAAD): Die Website des GAAD präsentiert Fallstudien und Beispiele von Unternehmen, die ihre Websites und Anwendungen barrierefrei gestaltet haben.
WebAIM (Web Accessibility In Mind): Bietet eine Liste von Websites, die als positive Beispiele für Barrierefreiheit gelten, sowie Tools und Ressourcen zur Verbesserung der Barrierefreiheit im Web.
Accessible University Demo Site: Eine Demo-Website der University of Washington, die bewusst sowohl barrierefreie als auch nicht barrierefreie Elemente enthält, um den Unterschied zu demonstrieren.
Diese Quellen bieten Inspiration und Beispiele, aber auch Leitfäden und Best Practices, um die Barrierefreiheit Ihrer eigenen Website zu verbessern.
Bei der Barrierefreiheit von Websites geht es nicht nur um gesetzliche Anforderungen, sondern um die Schaffung eines positiven und inklusiven Einkaufserlebnisses für alle Kund:innen
Durch die Berücksichtigung unterschiedlicher Bedürfnisse und Einschränkungen werden nicht nur die User Experience und die Kundenzufriedenheit verbessert, sondern auch neue Kundensegmente erschlossen.
Die Umsetzung der WCAG-Richtlinien, das Verständnis der vielfältigen Barrieren, der Einsatz assistiver Technologien sowie eine durchdachte Navigations- und Inhaltsstruktur sind Schlüsselfaktoren, um Barrierefreiheit im Web zu gewährleisten.
In Zukunft wird es noch wichtiger werden, diese Prinzipien in die Praxis umzusetzen, um den Anforderungen einer vielfältigen Gesellschaft gerecht zu werden und rechtliche Konsequenzen zu vermeiden. Jeder Schritt in Richtung Barrierefreiheit ist ein Schritt in Richtung einer inklusiveren Welt.
Wenn Sie Ihre Website professionell testen lassen möchten, können Sie unser Angebot nutzen. Wir bieten UX-Audits und WCAG-Checks an, um die User Experience Ihres Online-Auftritts zu verbessern und digitale Barrierefreiheit zu gewährleisten. Kontaktieren Sie uns für eine unverbindliche Beratung.
