Conversion Rate Optimization/16. August 2023 -Aktualisiert am 13. Februar 2024/5 Min. Lesezeit

Barrierefreiheit im Web: Webseitenbeispiele mit gelungener Accessibility

Die Barrierefreiheit im Web ist ein essentieller Aspekt, um sicherzustellen, dass Menschen mit unterschiedlichen Fähigkeiten und Bedürfnissen gleichberechtigt auf Online-Inhalte zugreifen können. In diesem Artikel wird die Implementierung von Web Accessibility auf verschiedenen Webseiten evaluiert und dabei Beispiele für vorbildliche Umsetzungen hervorgehoben. Hierbei werden insbesondere die Leitlinien des W3C Accessibility Guidelines (WCAG) 3.0 berücksichtigt.

BBC (https://www.bbc.co.uk/)

Die BBC hat sich als führende Medienorganisation für Barrierefreiheit eingesetzt. Ihre Webseite ist ein Beispiel dafür, wie Medieninhalte für Menschen mit Hör- oder Sehbehinderungen zugänglich gemacht werden können. Untertitel und Audiodeskriptionen sind für viele Videos verfügbar, und die Webseite ist gut strukturiert, um eine einfache Navigation zu ermöglichen.

Die BBC nutzt konsistente Beschriftungen und Textäquivalente mit einem einheitlichen Symbol oder Logo über verschiedene Plattformen hinweg. Diese Strategie erleichtert den Nutzern die Navigation, verstärkt die Marke und schafft Vertrauen. Dies unterstreicht die Bedeutung einer durchdachten Gestaltung für die Web Accessibility und User Experience.

Auf der Webseite wurde ein diskreter Link mit dem Text "Skip to content" (Zum Inhalt springen) am oberen Rand des Registerkartenindex implementiert. Dieser Link wird sichtbar, wenn eine Registerkarte ausgewählt wird, und bietet auch einen Verweis auf die Barrierefreiheitshilfe. Diese Gestaltung ermöglicht es Nutzer:innen, die erstmals eine Tastatur oder einen Bildschirmleser verwenden, eine rasche Hilfe zu erhalten, ohne sich durch die übrigen Webseiten-Inhalte navigieren zu müssen. Es demonstriert die gezielte Berücksichtigung der Bedürfnisse von Nutzer:innen mit unterschiedlichen Zugangsgeräten im Rahmen der Web Accessibility und User Experience.

"BBC Accessibility Webseitebeispiel"

(Quelle: https://www.bbc.com/)

Dazu verfügen die Bilder auf der Webseite über alternative Texte (Alt-Texte), die gemäß WCAG 3.0 verwendet werden müssen. Im Folgenden ein Beispiel für einen Alt-Text eines Bildes:

Lebenshilfe e.V. (https://www.lebenshilfe.de/)

Sofort am Anfang der Body-Attribute befinden sich versteckte Links, die Screenreader-Nutzern helfen, sofort zum Seiteninhalt oder zur Hauptnavigation zu springen.

"Lebenshilfe Webseite Accessibility Beispiel anhand HTML-Elemente"

(Quelle: https://www.lebenshilfe.de/)

Ein bemerkenswertes Merkmal der Webseite des Lebenshilfe e.V. ist die Integration von Artikeln in "leichte Sprache". Diese spezielle Funktion ermöglicht es, Inhalte in einer klaren und einfachen Sprache zu präsentieren, die besonders für Menschen mit Lernschwierigkeiten oder kognitiven Beeinträchtigungen zugänglich ist. Durch die Bereitstellung von Inhalten in "leichter Sprache" wird eine inklusive Erfahrung für ein breiteres Publikum geschaffen. Die Integration von dieses Features zeigt, wie bewusst die Organisation darauf abzielt, Barrieren abzubauen und die Inklusion in ihrer digitalen Präsenz zu fördern.

Zusätzlich wurde hier ein Einstellungscontainer eingebaut, der Nutzern ermöglicht, das Erscheinungsbild der Webseite nach ihren individuellen Präferenzen anzupassen. Mit dieser Funktion können Textgröße, Farbkontraste, Bildlauf-Einstellungen und andere Aspekte der Benutzeroberfläche personalisiert werden. Dies eröffnet eine Barrierefreiheit auf individueller Ebene und berücksichtigt die unterschiedlichen Bedürfnisse der nutzenden Personen. Der Container ist entweder leicht zugänglich im unteren linken Bereich der Webseite platziert oder direkt nach <body> am Anfang des Main-Teil für Screenreader. Zusätzlich dazu können Tastaturkürzel aktiviert werden, um die Interaktion mit der Webseite für Menschen mit motorischen Einschränkungen zu erleichtern. Dieses Feature ermöglicht eine inklusive User Experience und betont die Bedeutung individueller Anpassungsmöglichkeiten, um die Barrierefreiheit für eine vielfältige Benutzerbasis zu gewährleisten.

"Der Einstellungscontainer von lebenshilfe.de"

(Quelle: https://www.lebenshilfe.de/)

"Der Einstellungscontainer von lebenshilfe.de"

(Quelle: https://www.lebenshilfe.de/)

Deutschland.de (https://www.deutschland.de)

Deutschland.de ist ein weiteres gutes Beispiel dafür, wie man viele kleine Dinge tun kann, um das Gesamterlebnis so umfassend wie möglich zu gestalten. Es besteht die Möglichkeit, die gesamte Webseite in Gebärdensprache umzuschalten. Diese Funktion zeigt das Bestreben bzgl. Inklusion und Barrierefreiheit in einer besonders ansprechenden Weise.

"Deutschland.de Webseite Accessibility Beispiel anhand HTML-Elemente"

Fazit: Auf dem Weg zu einer inklusiven digitalen Welt

Die fortlaufende Entwicklung des Internets eröffnet Möglichkeiten für eine breite Online-Präsenz. Doch um sicherzustellen, dass dieser Fortschritt allen gleichermaßen zugutekommt, ist die Umsetzung von Web Accessibility von entscheidender Bedeutung. Die vorgestellten Beispiele illustrieren eindrucksvoll, wie Webseiten durch die Umsetzung der WCAG 3.0-Richtlinien eine inklusive Umgebung schaffen können, in der Menschen mit unterschiedlichen Fähigkeiten nahtlos auf digitale Inhalte zugreifen können. Es ist wichtig zu betonen, dass die WCAG 3.0-Richtlinien nicht nur eine theoretische Grundlage bieten, sondern auch einige praktische Beispiele. Zusätzlich zur Gestaltungsrichtlinien stellt das Gesetz W3C Accessibility Guidelines (WCAG) 3.0 auch eine Liste von Tools zur Bewertung der Barrierefreiheit im Internet zur Verfügung, die es Entwicklern ermöglichen, die Barrierefreiheit ihrer Webseiten zu überprüfen und zu verbessern. Dieser Schritt in Richtung einer inklusiven digitalen Welt ermutigt nicht nur zu technischer Innovation, sondern fördert auch soziale Integration und Chancengleichheit für alle Nutzer. Im Zeitalter der digitalen Kommunikation ist es entscheidend, dass Webseiten die Bedürfnisse aller Nutzer respektieren und eine inklusive Online-Gemeinschaft fördern.