Websites barrierefrei gestalten

Getting your Trinity Audio player ready...

Barrierefreiheit im Internet bedeutet, dass ein Webprojekt von möglichst vielen Menschen – auch solchen mit körperlichen oder geistigen Behinderungen – auf möglichst vielen Geräten genutzt werden kann. Dies gilt sowohl für Personen mit einer dauerhaften Behinderung als auch für jene mit vorübergehenden Einschränkungen.

Barrieren sind vielfältig und weit verbreitet

Es gibt viele Formen von Barrieren, die Menschen mit Beeinträchtigungen betreffen können. Wenn bei einer Praxis eine Rampe fehlt oder die Türen eines Labors zu schmal sind, um sie mit einem Rollstuhl zu passieren, ist das im Alltag sofort erkennbar. Auf Websites sind Barrieren oft weniger sichtbar, aber genauso hinderlich. Zu den Hindernissen gehören beispielsweise fehlende Beschriftungen von Schaltflächen, Formularfeldern und Links, Bilder ohne Alternativtexte und Videos, die keine Untertitel, Transkription oder Audiobeschreibung haben. Barrieren entstehen aber nicht nur durch fehlende Informationen. Auch eine verschachtelte Navigation, eine komplexe Sprache, überladene Layouts, ein zu geringer Farbkontrast oder Animationen, die nicht angehalten werden können, erschweren den Zugang zu den Inhalten.

Barrierefreiheit dient allen

Nehmen wir als Beispiel wieder die Rampe: Sie hilft dem Rollstuhlfahrer, der Mutter mit dem Kinderwagen und dem Postboten mit dem schweren Paket gleichermaßen. So ist es auch im digitalen Raum: Barrierefreiheit macht eine Website für alle besser. Untertitel helfen nicht nur gehörlosen Menschen, sondern allen Personen, die Videos in lauter oder leiser Umgebung ansehen.

Eine klare Sprache erleichtert auch gestressten Nutzern oder solchen, deren Muttersprache nicht Deutsch ist das Verständnis des Inhalts. Ein hoher Farbkontrast hilft nicht nur Sehbehinderten, es ermöglicht auch das Lesen auf dem Smartphone bei Sonnenlicht. Um die ersten Schritte in Richtung Barrierefreiheit gehen zu können, ist es wichtig, sich zunächst einen Überblick über mögliche Behinderungen zu verschaffen:

• Sehbehinderungen reichen von leichtem bis vollständigem Sehverlust auf einem oder beiden Augen (Abb. 1) über Farbenfehlsichtigkeit (Abb. 2) als Symptom verschiedener Behinderungen bis hin zu Sehstörungen wie dem Tunnelblick. Besonders häufig ist die diabetische Retinopathie, die bei vielen Patienten mit Diabetes auftritt.
• Hörbehinderungen umfassen einen leichten bis vollständigen Hörverlust auf einem oder beiden Ohren sowie Hörstörungen, bei denen die betroffene Person einige Töne hören kann, andere jedoch nicht.
• Körperliche Einschränkungen werden manchmal auch als „motorische Behinderungen“ bezeichnet. Dazu gehören Schwäche und Einschränkung der Muskelkontrolle, Gelenkerkrankungen (z. B. Arthritis), körperliche Schmerzen, Lähmungen und das Fehlen von Gliedmaßen.
• Kognitive, lernbedingte und neurologische Behinderungen können sich auf die Motorik, das Hören, Sehen, Sprechen und Verstehen von Informationen auswirken. Sie beeinträchtigen aber nicht unbedingt die Intelligenz einer Person. Derzeit leben in Deutschland fast 20 Millionen Menschen über 65 Jahren, die von physiologischen und kognitiven Veränderungen betroffen sind. Mehr als doppelt so viele tragen aufgrund von Sehschwächen eine Brille, jeder siebte Erwachsene in Deutschland ist schwerhörig. Manche Einschränkungen sind sichtbar, andere, insbesondere mentale Veränderungen oder psychische Erkrankungen, jedoch nicht. Jeder einzelne dieser Faktoren kann die Informationsaufnahme im Internet erschweren.

Nutzerzentriert denken

Barrierefreiheit wird oft als technische Herausforderung gesehen. Doch eigentlich ist es viel mehr, nämlich eine Frage der Haltung: Was brauchen die Nutzer, um sich auf der Website zurechtzufinden?

Dafür ist zunächst ein grundsätzliches Verständnis für die Zugänglichkeit im Internet sowie für die rechtlichen Anforderungen notwendig. Außerdem sollte sich der Website-Betreiber fragen, wie er digitale Angebote so gestalten kann, dass sie für Menschen mit unterschiedlichen Voraussetzungen verstehbar und nutzbar sind. Dabei sollte sich der Blick über den Tellerrand hinaus auch auf Alter, wirtschaftliche Situation, geografische Lage, Sprache, ethnische Herkunft und vieles mehr richten. Also: hin zur Nutzerperspektive. Viele Barrieren entstehen, weil man unbewusst von seinen eigenen Bedürfnissen ausgeht. Allerdings besitzen andere Personen auch andere Wahrnehmungs-, Denk- und Handlungsmuster.

Und sie bringen mitunter sehr unterschiedliche Voraussetzungen mit, beispielsweise wie sie digitale Inhalte wahrnehmen und mit ihnen interagieren. So kommen häufig assistive Technologien zum Einsatz – vom Screenreader über die Bildschirmvergrößerung bis hin zur Sprachsteuerung. Wer die Funktionsweise dieser Hilfsmittel kennt, kann Barrieren gezielt abbauen oder sogar
ganz vermeiden: durch eine Struktur, die dafür sorgt, dass Screenreader Texte sinnvoll vorlesen können, dass Navigationselemente mit der Tastatur bedienbar sind und durch ausreichend Kontraste für Menschen mit Sehbehinderungen.

Die Web Content Accessibility Guidelines (WCAG, www.w3.org/TR/WCAG22) sind eine Reihe von Empfehlungen und Standards, um Webinhalte für Menschen mit Behinderungen zugänglicher zu gestalten. Sie wurden vom World Wide Web Consortium (W3C) entwickelt.

Kennzeichen barrierefreier Websites

Einige zentrale Maßnahmen, mit denen Sie Websites zugänglicher machen können, sind:

• Alternativtexte (kurz: Alt-Texte): Sie beschreiben ein Bild oder eine Grafik und werden anstelle der Abbildung angezeigt (Abb. 3). Der Alt-Text stellt dann sicher, dass z. B. sehbehinderte Personen, die Screenreader oder andere assistierende Technologien benutzen, auf alle Informationen zugreifen können, die bei den Bildern hinterlegt sind.
• Tastaturbedienung: Für viele Menschen mit Behinderungen wie Handzittern oder nachlassender Feinmotorik ist nicht die Maus, sondern die Tastatur das zentrale Eingabegerät. Daher ist es wichtig, dass sich Websites vollständig mit der Tastatur bedienen lassen. Mit der Tabulatortaste und den Pfeiltasten können Nutzer beispielsweise effizient navigieren, Schaltflächen aktivieren und Formularfelder ausfüllen.
• Semantisches HTML: Die Semantik beschäftigt sich mit den Bedeutungen sprachlicher Zeichen und Zeichenfolgen. Mithilfe von semantischem HTML lässt sich der Inhalt einer Seite strukturieren und seine Zugänglichkeit gewährleisten. Jedes HTML-Element beschreibt die Art des Inhalts, den es darstellt. Das <h1>-Element enthält eine Überschrift der ersten Ebene, ein <p>-Element einen Textabsatz, das <ul>-Elementen eine ungeordnete Liste mit <li>-Elementen und so weiter. Ein semantisch korrekter HTML-Code stellt sicher, dass moderne Browser und unterstützende Technologien Inhalte richtig kommunizieren und damit von den Nutzern korrekt erfasst werden können. Zum Beispiel liest ein Screenreader sehbehinderten Menschen den Text entsprechend vor. Die korrekte Auszeichnung ist wichtig, da auch die Crawler der Suchmaschinen den Code auslesen und seine Bedeutung erfassen, was auch das Ranking einer Website bei den Suchergebnissen beeinflusst.
• Seitentitel: Sie identifizieren Websites im Browser, ähnlich wie es Buchtitel in einer Bibliothek tun. Ohne einen beschreibenden Seitentitel wissen Nutzer nicht, welche Seite in einem Tab geöffnet ist und worum es darin geht – außer, sie navigieren direkt zu dieser Seite und durchsuchen ihren Inhalt. Seitentitel werden im sogenannten Head-Bereich des HTML-Codes einer Website definiert und sind eines der wichtigsten Elemente der Suchmaschinenoptimierung. Wenn ein Seitentitel fehlt oder nicht präzise formuliert ist, hat das zur Folge, dass Nutzer ihren aktuellen Standort und den Hauptzweck der Website nicht identifizieren können.
• Festlegen der Sprache: Unterstützende Technologien wie Screenreader oder andere Text-to-Speech-(TTS-)Software müssen die Sprache der Seite kennen, um den Inhalt in natürlicher Sprache ausgeben zu können. Die Sprache wird im sogenannten Head-Bereich des HTML-Codes einer Website definiert und ist auch für Suchmaschinen oder automatische Übersetzungsdienste wichtig.
• Beschreibende Linktexte: Sie zeigen den Zweck eines Hyperlinks an, ohne dass ausschließlich visuelle Hinweise vorhanden sind. Dies ist besonders wichtig für Personen, die auf unterstützende Technologien wie Screenreader oder Tastaturnavigation angewiesen sind. Screenreader können Hyperlinks nur anhand ihrer Aktivierbarkeit und des zugehörigen Texts erkennen. Texte wie „mehr erfahren“ oder „hier“ haben jedoch keinen beschreibenden Charakter. Nutzer verstehen möglicherweise nicht, wohin sie der Link führt und was sie auf der verlinkten Website erwartet. Das erschwert die Navigation auf der Website.
• Untertitel und Transkripte bei Video- und Audiodateien: Untertitel und Transkripte machen Video- und Audioinhalte zugänglich, indem sie eine Textalternative zum Ton bieten. Untertitel zeigen das gesprochene Wort auf dem Bildschirm an, während Transkripte eine schriftliche Aufzeichnung des Gesagten liefern. Beides hilft gehörlosen oder schwerhörigen Menschen, den Ton in Videos und Audiomitschnitten zu verstehen.
• Kontrast: Ist der Kontrast zu gering, haben Nutzer mit Sehbehinderungen Schwierigkeiten, die Informationen auf Ihrer Website zu lesen oder wahrzunehmen. Daher ist ein hoher Kontrast wichtig (Abb. 4).

Barrierefreiheit von Anfang an mitdenken

Das Thema Barrierefreiheit sollte bereits in der Konzeptionsphase der Website berücksichtigt werden. Wird ein Dienstleister beauftragt, lohnt es sich, nach dessen Erfahrung und Kompetenzen zu erkundigen. Eine andere Möglichkeit ist es, automatisierte Tools wie WAVE (wave.webaim.org) einzusetzen (Abb. 5). Damit lässt sich die Website auf wichtige Punkte der Barrierefreiheit überprüfen, und man erhält wertvolle Hinweise, wie man sie weiter verbessern kann.