Barrierefreie Websites - die technischen Aspekte

06. Juli 2023

Die barrierefreie Gestaltung von Websites bringt eine bessere Bewertung bei Google und auch Vorteile bei der Nutzung für Menschen ohne Einschränkung. In unserem Blogbeitrag erklären wir die technischen Aspekte, die hinter dem Begriff Barrierefreiheit stecken.

In diesem Beitrag - Fünf technische Aspekte für barrierefreie Websites:

• 1. Verwendung barrierefreier Gestaltungsmuster
• 2. Optimierung für verschiedene Bildschirmgrößen
• 3. Tastaturnavigation
• 4. Unterstützung für assistive Technologien, wie z.B. Screenreader
• 5. Richtige Verwendung von WAI-ARIA und nativen HTML-Elementen

Durch die Implementierung dieser technischen Aspekte kann eine Website für alle Menschen zugänglicher gemacht werden, was zu einer inklusiveren und gerechteren Online-Community führt.

Barrierefreie Internetseiten müssen so gestaltet werden, dass sie von allen Menschen unabhängig von ihren Fähigkeiten und Einschränkungen genutzt werden können. Hier sind fünf technische Aspekte, die dafür sorgen, dass eine Website barrierefrei ist:

1. Verwendung barrierefreier Gestaltungsmuster

Eine der wichtigsten Maßnahmen für die Schaffung einer barrierefreien Online-Erfahrung besteht darin, bewährte Gestaltungsmuster zu verwenden. Diese Muster umfassen zum Beispiel klare und konsistente Navigationselemente, ausreichenden Kontrast zwischen Text und Hintergrundfarben, gut strukturierten Inhalt mit Überschriften und Absätzen sowie die Verwendung von Alternativtexten für Bilder.

Die Barrierefreiheit endet nicht bei Textinhalten und interaktiven Elementen. Auch die Einbindung von Videos erfordert besondere Aufmerksamkeit, um eine inklusive Online-Erfahrung zu gewährleisten.

Indem diese Gestaltungsmuster implementiert werden, können Menschen mit Sehbeeinträchtigungen oder anderen Behinderungen den Inhalt besser verstehen und navigieren.

Klare Schrift und Farben, guter Kontrast

Die Schrift auf der Website sollte groß genug sein, damit sie leicht lesbar ist. Die Farben sollten so gewählt werden, dass sie für alle Menschen leicht zu unterscheiden sind, insbesondere für Menschen mit Farbsehstörungen (z.B. Rot-Grün-Sehschwäche). Und alle Seiten-Elemente sollten sich durch kontrastreiche Darstellung von ihrer Umgebung abheben.

Alternative Texte für Bilder

Jedes Bild auf der Website sollte mit einem alternativen Text (Alt-Text) versehen werden. Dieser Text beschreibt das Bild und seine Bedeutung. Dadurch können blinde Menschen mit Hilfe sogenannter Screenreader verstehen, was auf dem Bild zu sehen ist. Das Hilfsprogramm liest ihnen nämlich den hinterlegten Alt-Text vor. Google belohnt das Vorhandensein von Alt-Text übrigens mit einer besseren Platzierung, da es den Seiteninhalt genauer auswerten kann.

Barrierefreie Einbindung von Videos

Ein wichtiger Aspekt bei der Einbindung von Videos ist die Verwendung eines barrierefreien Videoplayers. Der Videoplayer selbst muss so gestaltet sein, dass er von assistiven Technologien erkannt und bedient werden kann. Dazu gehört beispielsweise die Möglichkeit, Untertitel ein- und auszuschalten. Untertitel sind für Menschen mit Hörbeeinträchtigungen von entscheidender Bedeutung, da sie den gesprochenen Inhalt des Videos in schriftlicher Form bereitstellen.

Darüber hinaus sollten Videos mit Audiodeskriptionen versehen werden. Audiodeskriptionen sind zusätzliche Beschreibungen des visuellen Inhalts, die Menschen mit Sehbeeinträchtigungen helfen, den Kontext und die visuellen Informationen des Videos zu verstehen. Audiodeskriptionen können entweder in das Video selbst eingebettet oder separat als Textalternative bereitgestellt werden.

2. Optimierung für verschiedene Bildschirmgrößen

Barrierefreiheit betrifft nicht nur Menschen mit Behinderungen, sondern auch Benutzer:in mit unterschiedlichen Geräten und Bildschirmgrößen. Eine responsive Gestaltung, bei der sich die Inhalte dynamisch an verschiedene Bildschirmgrößen anpassen, ist daher entscheidend. Dies gewährleistet, dass der Inhalt unabhängig vom verwendeten Gerät oder der Bildschirmgröße optimal dargestellt wird. Durch die Berücksichtigung verschiedener Bildschirmgrößen wird die Benutzerfreundlichkeit für alle verbessert.

3. Tastaturnavigation

Die Website sollte so gestaltet sein, dass sie mit Hilfe der Tastatur navigiert werden kann. Dahinter steckt: Viele Menschen mit motorischen Einschränkungen können keine Maus verwenden, und daher müssen für sie alle anklickbaren Elemente, wie z.B. Buttons, Aufklapp-Listen und Menüs, mit Hilfe der Tastatur bedienbar sein. So können sie trotzdem auf alle Inhalte der Website zugreifen.

4. Unterstützung für assistive Technologien, wie z.B. Screenreader

Menschen mit Sehbeeinträchtigungen verwenden oft Screenreader, um den Inhalt von Websites oder Anwendungen zu erfassen. Damit diese Programme effektiv funktionieren können, ist es wichtig, den Inhalt mit entsprechenden Struktur- und Formatierungselementen zu kennzeichnen. Dies beinhaltet die Verwendung von Überschriften, Listen, Links und Formatierungen, um den Lesefluss zu erleichtern. Durch die ordnungsgemäße Kennzeichnung des Inhalts können Bildschirmleseprogramme den Text korrekt vorlesen und eine bessere Benutzererfahrung ermöglichen.

5. Richtige Verwendung von WAI-ARIA und nativen HTML-Elementen

Um eine vollständige Barrierefreiheit zu gewährleisten, ist es wichtig, sowohl WAI-ARIA (Web Accessibility Initiative - Accessible Rich Internet Applications) als auch nativen HTML-Elementen eine angemessene Bedeutung zuzuweisen. WAI-ARIA ist eine spezielle Technologie, die es ermöglicht, zusätzliche Informationen über die Struktur und Interaktion von Elementen bereitzustellen. Es erweitert die Fähigkeiten nativer HTML-Elemente und kann verwendet werden, um assistiven Technologien mehr Kontext zu geben.

Bei der Entwicklung barrierefreier Websites ist es ratsam, zuerst die nativen HTML-Elemente zu verwenden, da sie bereits eine bestimmte Semantik und Funktion haben.

Allerdings haben native HTML-Elemente ihre Grenzen, insbesondere wenn es um interaktive Komponenten geht. Hier kommt WAI-ARIA ins Spiel. Es ermöglicht die Definition von Rollen, Zuständen und Eigenschaften für Elemente, die von assistiven Technologien erkannt werden können. Zum Beispiel kann die Rolle "button" einem Link zugewiesen werden, um es als Schaltfläche zu kennzeichnen. Dadurch wird sichergestellt, dass Bildschirmleseprogramme und andere assistive Technologien das Element korrekt interpretieren und den Benutzern mitteilen können, dass es sich um eine interaktive Schaltfläche handelt.

Die richtige Auszeichnung von Elementen mit den entsprechenden Rollen ist von entscheidender Bedeutung, da assistive Technologien darauf angewiesen sind, um den Inhalt einer Website zu interpretieren und Menschen mit Beeinträchtigungen eine optimale Nutzungserfahrung zu bieten. Wenn Elemente nicht korrekt ausgezeichnet werden, können Bildschirmleseprogramme den Inhalt falsch interpretieren oder wichtige Informationen übersehen. Dies kann zu Frustration und einer eingeschränkten Nutzungserfahrung führen.

Zusammenfassung

Die technischen Aspekte der Barrierefreiheit spielen eine wesentliche Rolle bei der Schaffung einer inklusiven Online-Erfahrung. Durch die Verwendung barrierefreier Gestaltungsmuster, die Unterstützung für Screenreader, die Gewährleistung der Tastaturzugänglichkeit und die Optimierung für verschiedene Bildschirmgrößen können Websites und Anwendungen für alle Benutzer zugänglich gemacht werden. Indem wir uns auf diese grundlegenden Aspekte konzentrieren, können wir das Internet zu einem Ort machen, an dem jeder gleichberechtigt teilhaben kann.

Neben den genannten Beispielen gibt es noch viele weitere Dinge zu beachten, um eine Website optimal barrierefrei zu gestalten. Wir beraten Sie gerne unverbindlich anhand Ihres Internetauftritts. Hier geht's zu unserem Kontaktformular.