Barrierefreie Webseite
Eine barrierefreie Webseite ist ein Gewinn für alle Nutzenden.
Barrierefreie Websites sind nicht nur für Menschen mit Behinderungen unverzichtbar, sondern für alle. Wir alle könnten irgendwann auf temporäre Einschränkungen stoßen, sei es durch einen gebrochenen Arm oder einfach durch das Älterwerden. Deshalb ist es entscheidend, dass alle Informationen im Internet für jeden zugänglich sind.
Als Webseitenbetreibende haben Sie die Verantwortung, sicherzustellen, dass Sie alle Menschen, problemlos auf Ihre wichtigen Informationen zuzugreifen können. Nur so können wir sicherstellen, dass alle Menschen die gleichen Chancen haben, sich im digitalen Raum zu bewegen.
Barrierefreiheit ist kein Luxus, sondern eine Notwendigkeit für eine gerechte und gleichberechtigte Gesellschaft.
Der internationale WCAG-Standard
Die Web Content Accessibility Guidelines (WCAG) definieren, wie Web-Technologien barrierefrei eingesetzt werden können. Diese Richtlinien, die von der Arbeitsgruppe Web Accessibility Initiative (WAI) im World Wide Web Consortium (W3C) entwickelt wurden, sind entscheidend für die Schaffung zugänglicher Websites. Das W3C als internationales Gremium setzt Standards für Web-Technologien und gewährleistet so, dass mit diesen Technologien barrierefreie Online-Inhalte erstellt werden können.
Durch die Verankerung der WAI Arbeitsgruppe im W3C wird sichergestellt, dass Experten gemeinsam an der Förderung von Barrierefreiheit im Internet arbeiten. Seit der Veröffentlichung der ersten Version der WCAG im Mai 1999 haben diese Richtlinien dazu beigetragen, die Zugänglichkeit des Webs für alle Nutzer zu verbessern.
Die WCAG bieten klare Anleitungen und Best Practices zur Gestaltung von Websites, die Menschen mit unterschiedlichen Fähigkeiten gerecht werden. Indem sie technische Standards setzen und auf Universal Design-Prinzipien basieren, tragen die WCAG maßgeblich dazu bei, eine inklusive Online-Umgebung zu schaffen.
EU führt den Standard EN 301 549 ein
Die Einführung der Norm EN 301 549 durch die EU markiert einen bedeutenden Schritt in Richtung Barrierefreiheit im Bereich der digitalen Produkte und Dienstleistungen. Diese maßgebliche Norm, veröffentlicht im Europäischen Amtsblatt im August 2021, baut auf den bewährten Richtlinien der WCAG auf und umfasst zusätzliche Kapitel, die spezifische Kriterien für die Barrierefreiheit von 2-Wege-Kommunikation, Video-Playern, Hardware, Dokumenten, Software und mehr festlegen.
Das Kapitel zu Web-Technologien verweist explizit auf die WCAG und stellt somit eine kohärente Herangehensweise sicher. Nicht nur innerhalb der EU wird die EN 301 549 (PDF) als Leitfaden für Barrierefreiheit angesehen, sondern auch in anderen Ländern wie Kanada, Indien und Japan.
Die Einführung dieser Norm unterstreicht das wachsende Bewusstsein für die Bedeutung digitaler Barrierefreiheit auf internationaler Ebene und ebnet den Weg für eine inklusivere digitale Zukunft.
4+1 Prinzipien
Um barrierefreie Produkte zu gestalten, müssen sie vier prinzipielle Eigenschaften erfüllen
- Sie müssen wahrnehmbar sein, auch bei eingeschränktem Hören und Sehen.
- Sie müssen bedienbar sein, auch wenn sich der Nutzende nicht frei bewegen kann.
- Sie müssen verständlich sein, auch wenn nicht die volle Aufmerksamkeit zur Verfügung steht.
- Sie muss robust programmiert sein, damit auch die unterschiedlichen Hilfsmittel den Code interpretieren können.
Hinzu kommt noch das 2-Sinne-Prinzip: Wenn die Information über zwei unterschiedliche Sinne zugänglich ist, kann sie von den meisten Menschen genutzt werden, also wenn man sie zum Beispiel sehen, Text, und hören, vom Computer vorgelesener Text, kann. Das 2-Sinne-Prinzip im Detail beschreiben wir in unserem Blog.
Die Richtlinien der WCAG
Um Ihre Website barrierefrei zu machen, können Sie sich an den 13 Richtlinien aus der WCAG orientieren.
-
Text ist per se barrierefrei, da er sowohl gesehen als auch vorgelesen werden kann. Für alle anderen Inhalte, den sogenannten Nicht-Text Inhalten, benötigen Sie Alternativen. Unter die Nicht-Text-Inhalte fallen Grafiken, Objekte, Bedienelemente und Captchas, also die Inhalte einer Website, die kein Text sind. Diese sind für die Bedienung der Website nötig, z.B. das Icon „Lupe“ um die Suche auszulösen.
Wenn Grafiken und Bilder Inhalte transportieren, benötigen sie einen sog. Alternativ- oder ALT-Text. Dieser beschreibt blinden Menschen, was auf dem Bild zu sehen ist. Wenn auf den Bildern Text dargestellt wird, muss dieser ebenfalls im Alternativ-Text stehen, damit die Information für blinde Nutzende nicht verloren geht.
Auch sog. CAPTCHAS, die verhindern sollen, dass Formulare automatisiert ausgefüllt werden, brauchen Alternativen, damit Menschen mit Einschränkungen das Formular trotzdem selbständig ausfüllen können.
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps:
-
Informationen, die rein akustisch vorliegen, können von Menschen ohne Hörvermögen nicht wahrgenommen werden. Deswegen benötigen Audio-Dateien ein Transkript und Videos, mit gesprochenen Texten, Untertitel.
Wenn in Videos, wesentliche Informationen rein optisch wiedergegeben werden, brauchen diese eine Audiodeskription oder eine textliche Beschreibung des Video-Inhalts.
Größere Flächen mit raschen Farbwechseln, ob in Videos oder durch andere Elemente auf der Webseite, können epileptische Anfälle auslösen.
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps:
-
Blinde Menschen nutzen in der Regel einen Screenreader. Screenreader lesen nicht nur den Text selbst vor, sondern auch semantische Zusatzinformationen. Beispielsweise geben Sie an, ob der vorgelesene Text eine Überschrift ist. Deswegen müssen Online-Redakteure nicht nur auf die optische Darstellung, sondern auch auf die semantische Auszeichnung der Texte achten.
Dies ist insbesondere bei Überschriften und Listen wichtig. Auch Tabellen dürfen nicht zur optischen Gestaltung von Text eingesetzt werden, sondern nur, um Daten strukturiert dazustellen. Deswegen brauchen Tabellen auch immer eine Kopfzeile, die auch bei größeren Tabellen Orientierung bietet.
Ganz besonders wichtig, dass die Beschriftung von Formularelementen eindeutig und vor dem Formular-Feld angegeben ist, so dass diese gut verständlich und erkennbar sind.
Um sich in einem Webangebot gut zurecht zu finden, sind eine klare und eindeutige Kennzeichnung der Inhalte wesentlich. Da die Nutzenden die Informationen auf der Webseite mit unterschiedlichen Hilfsmitteln und in unterschiedlichen Ansichten wahrnehmen, müssen die Texte auf sensorische Hinweise wie „nebenstehend“, „in roter Schrift“ oder ähnliches verzichten.
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps:
-
Farbig hervorgehobener Text und Bedienelemente benötigt einen ausreichenden Kontrast zum Hintergrund. Auch Schriften in Grafiken oder Diagrammen benötigen einen ausreichenden Kontrast zum Hintergrund und zu benachbarten Elementen. Gerade bei Grafiken sollten Sie eine Textalternative bieten, wenn die Informationen in der Grafik nur durch Farben gekennzeichnet werden (können).
Der gesamte Inhalt der Seite sollte auch ohne Farbe verständlich sein. Viele Menschen leben mit einer Farbfehlsichtigkeit und dann erscheinen beispielsweise Elemente in rot und grün in unterschiedlichen Braun-Schattierungen.
Neben der Farbe muss auch auf die Schriftgröße geachtet werden. Die Darstellung der Website ist nicht nur auf dem Computer und dem Smartphone unterschiedlich. Benutzer müssen selbst entscheiden können, in welchem Vergrößerungsfaktor sie die Website ansehen. Dabei darf keine Information verloren gehen.
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps:
-
Viele Menschen können mit der Maus nicht oder nicht gut arbeiten. Blinde Menschen sehen einfach nicht, wo der Mauszeiger gerade steht. Menschen, deren Arme und Hände keine oder eine eingeschränkte Beweglichkeit haben. Diese und viele mehr nutzen die Tastatur als primäres Eingabegerät, vor allem weil sie auch als Bildschirmtastatur – nur mit der Sprache bedient werden kann.
Deswegen muss es Ihren Nutzern möglich sein, Webseiten nur mit der Tastatur zu bedienen:
- Alle Elemente müssen erreicht werden
- Alle Elemente müssen bedienbar sein
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps:
-
Werden Eingaben von den Nutzenden benötigt, müssen diese genügend Zeit dafür haben. Vor allem Menschen mit Eingeschränkter Bewegung benötigen nicht nur für Eingaben mehr Zeit, sondern auch für die Navigation auf dem Bildschirm.
Hierein fällt auch eine Eigenheit von bewegten Inhalten. Diese lenken vom Rest der Seite ab. Deswegen sollten bewegte Inhalte nach spätestens 5 Sekunden von selbst stoppen oder vom Nutzer gestoppt werden können. Videos sollten niemals in Dauerschleife laufen.
-
Schnelle Lichtwechsel können bei sensiblen Menschen Anfälle auslösen. Diese sind dann auch nicht mehr in der Lage, die Website einfach zu schließen. Deswegen darf auf der Website, auch innerhalb von Videos, nichts länger als 3 Mal pro Sekunde flackern.
-
Der konkrete Titel der jeweiligen Webseite muss sowohl den Namen des Web-Auftritts enthalten als auch eine eindeutige Kennzeichnung der jeweils angezeigten Seite. Wird auf andere Inhalte verlinkt, muss aus dem Linktext oder dem direkten Kontext konkret hervorgehen, was passieren wird, wenn der Nutzende dem Link folgt.
Wichtig ist hier auch der Tastaturfokus. Um eine Website nur mit der Tastatur zu bedienen, ist es wichtig zu sehen, welches Element gerade fokussiert wird. Dazu muss der Tastaturfokus sowohl zum Feld als auch zum Umgebung einen ausreichenden Kontrast haben.
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps:
-
Soll ein Nutzer mit einer Website interagieren ist es besonders wichtig, dass keine komplexen Zeigergesten benötigt werden, da die von Menschen mit Bewegungseinschränkung, dazu gehören oft auch ältere Menschen, nicht gut ausgeführt werden können.
-
Blinde Menschen lassen sich die Website von einem Hilfsmittel vorlesen, dem Screenreader. Damit dieser die Worte auch korrekt aussprich, muss bei einer Website die Hauptsprache angegeben werden und bei fremdsprachigen Sätzen oder Absätzen muss die jeweilige Sprache angegeben werden.
-
Wenn der Benutzer ein Element fokussiert oder eine Aktion auslöst sollte genau das passieren, was zu erwarten ist. Beispielsweise sollte beim Fokussieren nur der Fokus versetzt werden und nicht schon durch das alleinige Fokussieren eine Aktion ausgelöst werden.
Überschriften sollten möglichst konkret den folgenden Inhalt beschreiben und gleiches sollte immer gleich genannt werden.
-
Sollen Nutzende Informationen auf einer Website eingeben, beispielsweise in Anmeldformularen, muss nicht nur angegeben werden, welche Eingaben in welchem Feld erwartet werden. Gleichfalls muss das System mit konkreten Fehlermeldungen auf Falscheingaben reagieren und idealerweise die entsprechenden Felder markieren.
-
Hier geht es um die korrekte Programmierung. Korrekt verschachteltes HTML, eindeutige IDs, und korrekte Umsetzung selbst programmierter Bedienelemente fallen in diese Richtlinie.
Weitere Anforderungen aus der EN 301 549
Die Macher der EN 301 549 hatten bei der Erstellung der Norm die aktuellen Entwicklungen in der Webtechnologie im Blick, weshalb aus dieser weitere Anforderungen hinzukommen.
-
Setzen Sie bei Ihrer Website Programme für die Erhöhung der Zugänglichkeit ein, müssen auch diese Barrierefrei zugänglich sein. Das können Vorleseprogramme sein (Webreader), oder ein Schalter, der die Webseite in einer Farbvariante für hohen Kontrast aufruft.
Auch darf ein einziges biometrische Merkmal, Fingerabdruck, Gesichtserkennung oder Stimmerkennung, nicht die einzige Möglichkeit sein, sich auf Ihrer Website anzumelden.
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps.
Auch sog. CAPTCHAS, die verhindern sollen, dass Formulare automatisiert ausgefüllt werden, brauchen Alternativen, damit Menschen mit Einschränkungen das Formular trotzdem selbständig ausfüllen können.
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps:
-
Bieten Sie Ihren Nutzern die Möglichkeit direkt auf der Website mit Ihnen in Kontakt zu treten, muss dies ebenfalls barrierefrei möglich sein. Dies gilt sowohl für Chat als auch für Audio- oder Videokommunikation.
-
Nicht nur ihre Video-Inhalte müssen durch Untertitel und Audiodeskription barrierefrei sein, auch der verwendete Player muss Anforderungen erfüllen. Dazu gehört, dass die Untertitel vom Nutzer vergrößert werden können oder schriftliche Audiodeskription automatisch vorgelesen werden kann.
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps:
-
Nicht nur die Texte, Bilder und Videos auf einer Website müssen barrierefrei sein, auch alle verlinkten Dokumente. Das betrifft PDF-Dateien, genauso wie Office Dokumente. Einzig Dateien, die den barrierefreien Inhalte auf der Website wiederholen, sind von der Regelung ausgenommen, weil es genügt, dass der Inhalte auch einem Weg barrierefrei zugänglich ist.
Das Kapitel 10 (Non-web Documents) der EN 301 549 beschreibt, welche Eigenschaften Dokumente barrierefrei machen. Speziell für PDF-Dateien kann auch der PDF /UA (Universal Accessibility) heran gezogen werden.
In unseren Blog-Beiträgen finden Sie detaillierte Erläuterungen und praktische Tipps:
-
Jede Website einer Öffentlichen Stelle benötigt eine Erklärung zur Barrierefreiheit, in der beschrieben wird, ob die Website barrierefrei zugänglich ist. Falls nicht, müssen die nicht zugänglichen Stellen verständlich beschrieben werden.
Details zur Erklärung zur Barrierefreiheit finden Sie im Handlungsleitfaden für Öffentliche Stellen.
Sie suchen Unterstützung?
Der Handlungsleitfaden zur zur digitalen Barrierefreiheit des bayerischen Staatsministeriums für Digitales bietet verschiedene Informationen, wie Hinweise zu den rechtlichen Rahmenbedingungen, eine Mustererklärung zur Barrierefreiheit und Ausschreibungskriterien für Dienstleister.
Und natürlich unterstützen wir Sie auch persönlich bei Fragen zur digitalen Barrierefreiheit in Form einer kostenlosen Erstberatung.
