Barrierefreies Webdesign nach der europäischen Norm EN 301 549

In diesem Artikel erkläre ich was die europäische Norm EN 301 549 für barrierefreies Webdesign ist und warum ich mich freue, dass sie nun auch in Deutschland gilt. 

Barrierefreies Webdesign: Definition

Barrierefreies Webdesign bedeutet, dass eine Webseite so gestaltet ist, dass sie von allen Menschen, auch Menschen mit Behinderungen und anderen körperlichen Einschränkungen, wahrgenommen und bedient werden kann.

Barrierefreies Webdesign: Die Entwicklungsgeschichte

Das Thema barrierefreies Webdesign hat in Deutschland angefangen mit dem Inkrafttreten des Gesetzes zur Gleichstellung von Menschen mit Behinderungen am 1. Mai 2002.
Damals in §11 jetzt in § 12a Barrierefreie Informationstechnik werden öffentliche Stellen des Bundes dazu verpflichtet, bei Internetseiten von Behörden, barrierefreies Webdesign umzusetzen.
Am 24. Juli 2002 trat die Barrierefreie-Informationstechnik-Verordnung (BITV) in Deutschland in Kraft. Die Barrierefreie-Informationstechnik-Verordnung ist die deutsche Richtlinie um Webseiten barrierefrei zu gestalten. In der Barrierefreie-Informationstechnik-Verordnung waren Prüfungsschritte die durchgeführt werden müssen, um herauszufinden, ob eine Webseite barrierefrei ist oder nicht.
WCAG 1.0 wurde seit Mai 1999 empfohlen. Die Version WCAG 2.0 wurde nach mehr als neunjähriger Beratung am 11. Dezember 2008 verabschiedet, inzwischen liegt eine autorisierte deutsche Übersetzung vor. Im Juni 2018 hat die WAI die WCAG 2.1 verabschiedet. Die Web Accessibility Initiative (WAI) ist ein Bereich innerhalb des W3C, in der sich mehrere Arbeitsgruppen und Interessengruppen mit dem barrierefreien Zugang zum Web und seinen Inhalten beschäftigen. Das World Wide Web Consortium (kurz W3C) ist das Gremium zur Standardisierung der Techniken im World Wide Web.
Nun gab es seit 11. Dezember 2008 zwei Richtlinien um barrierefreies Webdesign zu realisieren. Eine nationale, BITV, und eine Internationale, WCAG.
Im Jahr 2011 trat die BITV 2.0 in Kraft. Noch immer war Deutschland nicht gewillt, barrierefreies Webdesign nach europäischen oder internationalen Richtlinien zu verwirklichen.
Ab März 2021 gilt jetzt in Deutschland der HARMONISED EUROPEAN STANDARD Accessibility requirements for ICT products and services. In diesem harmonisierten europäischen Standard geht es um Anforderungen von Barrierefreiheit bei Hardware, Webseiten und Software. Dieser Standard heißt EN 301 549.

Harmonisierter europäischer Standard Zugänglichkeitsanforderungen für ICT-Produkte und -Dienstleistungen
ETSI – Harmonisierter europäischer Standard Zugänglichkeitsanforderungen für ICT-Produkte und -Dienstleistungen

Anmerkung von Markus Lemcke

18 Jahre nach in Krafttreten des Behindertengleichstellungsgesetz gibt es hier im Landkreis Reutlingen / Tübingen noch sehr viele Behörden die sich kategorisch weigern Webseiten und Apps barrierefrei entwickeln zu lassen. Ich wünsche mir, dass die Bundesregierung die Behörden dazu zwingt dass Behindertengleichstellungsgesetz umzusetzen und somit Webseiten, Software und Apps zugänglich gestalten.

Barrierefreies Webdesign nach EN 301 549

In diesem Blogartikel geht es um den europäischen Standard EN 301 549 für Barrierefreiheit bei Webseiten oder im Fachchinessisch barrierefreies Webdesign.

Barrierefreies Webdesign – Wer ist die Zielgruppe?

Der Hauptgrund warum es barrierefreies Webdesign gibt, sind Menschen mit Behinderungen. Senioren profitieren ebenso von barrierefreies Webdesign. Es gibt auch Menschen die vorübergehend körperlich eingeschränkt sind. Zum Beispiel wenn jemand die rechte Hand im Gips hat, auch dieses Menschen profitieren von barrierefreies Webdesign.

Wer oder was ist BIK?

Das Zeichen BIK steht für ‚barrierefrei informieren und kommunizieren‘. Ziel der unter dem BIK-Zeichen tätigen Initiativen und Projekte ist, durch die Entwicklung, Verbreitung und Anwendung von Testverfahren zu barrierefreies Webdesign  beizutragen.
Der BIK BITV-Test ist ein Verfahren für die umfassende und zuverlässige Prüfung der Barrierefreiheit von Websites und Webanwendungen.

Der BIK BITV-Test

Der BIK-BITV-Test ist ein Name. Unter diesem Namen wurde jetzt ein Prüfverfahren für die Accessibility requirements for ICT products and services bei Webseiten veröffentlicht. Dieses Prüfverfahren ist, hat den Vorteil, dass es die einzelnen Prüfschritte des Standards EN 301 549 in deutscher Sprache erklärt.
Um mein Anliegen nochmal deutlich auf den Punkt zu bringen:
Wenn Sie eine Webseite nach BIK BITV-Test auf Barrierefreiheit überprüfen, hat das nichts mit der deutschen Richtlinie BITV 2.0 zu tun, die wie oben erwähnt, nicht mehr gilt, sondern es ist ein Name. Die BIT inklusiv hat jetzt die europäische Norm in deutscher Sprache veröffentlicht. Sie können eine Webseite mit BIK BITV-Test auf Barrierefreiheit überprüfen nach der europäischen Norm EN 301 549.

Endlich eine europäische Norm, aber

Warum ich mich freue: In Zukunft kann barrierefreies Webdesign für alle europäischen Länder nach der selben Richtlinie EN 301 549 erstellt werden.
Die Kritik, die ich hier äußere, richtet sich an die Personen, welche die europäische Norm entwickelt haben.
Im BITV-Test gab es „Prüfschritt erfüllt“ und „Prüfschritt nicht anwendbar“. Diese Angaben, waren sehr hilfreich und haben bei der Überprüfung einer Webseite Zeit gespart. Leider gibt es bei der europäischen Norm diese beiden Angaben nicht.
Prüfschritt 12.2.2 Technischer Support ist einer von mehreren Prüfschritten, die bei mir Kopfschütteln auslösen. Bei „Bezieht sich auf“ steht

gesamten Webauftritt

. Bei „Was wird geprüft?“ steht:

Der technische Support (über Telefon, Mail, …) soll Informationen zur Barrierefreiheit und Kompatibilität zu assistiven Technologien bereitstellen können, die die Webanwendung betreffen.

Ein Webauftritt kann auch eine Webanwendung sein. Nein, da kann ich nicht mit. Ich habe oben erklärt, dass es um die Überprüfung von Internetseiten auf Barrierefreiheit geht. Deswegen haben hier Kriterien die Webanwendungen auf Barrierefreiheit überprüfen nichts zu suchen. Damit mein Problem klar wird. Eine Internetseite stellt Informationen in Text, Bild oder Video bereit. Eine Webanwendung ist eine Software oder ein Programm, mit dem bestimmte Aufgaben erledigt werden können. Das ist ein großer Unterschied.
Wenn ich aber bei diesem Prüfungsschritt wenigstens die Angabe „Prüfschritt nicht anwendbar“ hätte und dort „Webanwendungen“ stehen, müsste ich bei der Überprüfung einer Webseite nicht den ganzen Text durchlesen.
Wenn Webanwendungen jetzt in die Richtlinien für barrierefreie Internetseiten mit aufgenommen wurden, dann hätte man auch progressive Web-Apps mit aufnehmen können, denn diese werden mit HTML, CSS und Javascript entwickelt.
Die Beschreibungen wie ein Prüfschritt durchgeführt werden soll, sind mit unter sehr umständlich beschrieben. Das ist alles andere als einfache Sprache.

Probleme von bestimmten Personengruppen

Hier möchte ich einen kurzen Überblick geben, welche Personengruppen welche Probleme haben bei der Bedienung von Internetseiten.

Blinde Menschen

Können Webseiten nicht bedienen, die nicht per Tastatur bedienbar sind.
Bilder ohne Alternativtexte sind für Screenreader nicht wahrnehmbar. Videos in denen was gezeigt wird, sind ohne ausführliche Textbeschreibung nicht wahrnehmbar.

Sehbehinderte Menschen

Können bei einer starken Sehbehinderung, Webseiten nicht bedienen, die nicht per Tastatur bedienbar sind. Für Menschen mit Sehbehinderung, die einen Screenreader nutzen, sind Bilder ohne Alternativtext nicht wahrnehmbar. Menschen mit einer starken Sehbehinderung können Probleme haben, wenn Internetseiten zu wenig Farbkontrast zwischen Hintergrund und Schriftfarbe haben.

Menschen mit Farbfehlsichtigkeit

Menschen mit Farbfehlsichtigkeit können Internetseiten nicht nutzen, die zu wenig Farbkontrast zwischen Hintergrund und Schriftfarbe haben.

Gehörlose Menschen

Gehörlose Menschen können Internetseiten nicht nutzen, wenn sie Informationen beinhalten, die nur hörbar, aber nicht lesbar sind.

Ein Überblick über die neuen Anforderungen

Folgende Anforderungen waren nicht in der BITV und sind somit dazu gekommen:
Allgemeine Anforderungen (Kapitel 5, EN)

  • 5.2 Aktivierung von Barrierefreiheits-Funktionen
  • 5.3 Biometrie
  • 5.4 Erhaltung von Barrierefreiheits-Informationen bei Konvertierung

Anforderungen an Technologien mit zwei-Wege-Sprachkommunikation (Kapitel 6, EN)

  • 6.1 Audiobandbreite für Sprache
  • 6.2.1.1 Textkommunikation in Echtzeit
  • 6.2.1.2 Gleichzeitige Sprache und Text
  • 6.2.2.1 Visuell unterscheidbare Anzeige von Echtzeit-Textnachrichten
  • 6.2.2.2 Programmatisch unterscheidbare Anzeige von Echtzeit-Textnachrichten
  • 6.2.2.3 Sprecheridentifizierung
  • 6.2.2.4 Echtzeitanzeige von Sprechaktivität
  • 6.2.3 Interoperabilität von Echtzeit-Kommunikation
  • 6.2.4 Reaktionsgeschwindigkeit der Echtzeit-Textkommunikation
  • 6.3 Anrufer-Identifizierung
  • 6.5.2 Auflösung bei Videotelefonie
  • 6.5.3 Bildwiederholfrequenz bei Videotelefonie

Anforderungen an eingebundene Videoplayer (Kapitel 7, EN)

  • 7.1.1 Wiedergabe von Untertiteln
  • 7.1.2 Synchrone Untertitel
  • 7.1.3 Erhaltung von Untertiteln
  • 7.2.1 Wiedergabe von Audiodeskription
  • 7.2.2 Synchrone Audiodeskription
  • 7.2.3 Erhaltung von Audiodeskription
  • 7.3 Bedienelemente für Untertitel und Audiodeskription

Anforderungen bezüglich benutzerdefinierter Einstellungen und Autorenwerkzeuge (Kapitel 11, EN)

  • 11.7 Benutzerdefinierte Einstellungen
  • 11.8.2 Barrierefreie Erstellung von Inhalten
  • 11.8.3 Erhaltung von Barrierefreiheitsinformationen bei Transformation
  • 11.8.4 Reparaturassistenz
  • 11.8.5 Vorlagen

Anforderungen an Dokumentation und Support (Kapitel 12, EN)

  • 12.1.1 Dokumentation von Kompatibilität und Barrierefreiheit
  • 12.1.2 Barrierefreie Dokumentation
  • 12.2.2 Technischer Support
  • 12.2.3 Effektive Kommunikation
  • 12.2.4 Vom Support bereitgestellte Dokumentation

Barrierefreies Webdesign: Alle Prüfungsschritte der europäischen Norm EN 301 549

Hier liste ich alle Prüfungsschritte der europäischen Norm EN 301 549 auf.

Allgemeine Anforderungen

  • 5.2 Aktivierung von Barrierefreiheitsfunktionen
  • 5.3 Biometrie
  • 5.4 Erhaltung von Barrierefreiheitsinformationen bei Konvertierung

Zwei-Wege-Sprachkommunikation

  • 6.1 Audiobandbreite für Sprache
  • 6.2.1.1 Textkommunikation in Echtzeit
  • 6.2.1.2 Gleichzeitige Sprache und Text
  • 6.2.2.1 Visuell unterscheidbare Anzeige von Textnachrichten
  • 6.2.2.2 Programmatisch unterscheidbare Anzeige von Textnachrichten
  • 6.2.2.3 Sprecheridentifizierung
  • 6.2.2.4 Echtzeitanzeige von Sprech-Aktivität
  • 6.2.3 Interoperabilität von Echtzeit-Textkommunikation
  • 6.2.4 Reaktionsgeschwindigkeit der Echtzeit-Textkommunikation
  • 6.3 Anrufer-Identifizierung
  • 6.5.2 Auflösung bei Videotelefonie
  • 6.5.3 Bildwiederholfrequenz bei Videotelefonie

Videofähigkeiten

  • 7.1.1 Wiedergabe von Untertiteln
  • 7.1.2 Synchrone Untertitel
  • 7.1.3 Erhaltung von Untertiteln
  • 7.2.1 Wiedergabe von Audiodeskription
  • 7.2.2 Synchrone Audiodeskription
  • 7.2.3 Erhaltung von Audiodeskription
  • 7.3 Bedienelemente für Untertitel und Audiodeskription

Youtube-Video zum Prüfschritt 7.1.1 Wiedergabe von Untertiteln:

Textalternativen

  • 9.1.1.1a Alternativtexte für Bedienelemente
  • 9.1.1.1b Alternativtexte für Grafiken und Objekte
  • 9.1.1.1c Leere alt-Attribute für Layoutgrafiken
  • 9.1.1.1d Alternativen für CAPTCHAs

Youtube-Video zum Prüfschritt 9.1.1.1b Alternativtexte für Grafiken und Objekte:

Zeitbasierte Medien

  • 9.1.2.1 Alternativen für Audiodateien und stumme Videos
  • 9.1.2.2 Aufgezeichnete Videos mit Untertiteln
  • 9.1.2.3 Audiodeskription oder Volltext-Alternative für Videos
  • 9.1.2.4 Videos (live) mit Untertiteln
  • 9.1.2.5 Audiodeskription für Videos

Anpassbar

  • 9.1.3.1a HTML-Strukturelemente für Überschriften
  • 9.1.3.1b HTML-Strukturelemente für Listen
  • 9.1.3.1d Inhalt gegliedert
  • 9.1.3.1c HTML-Strukturelemente für Zitate
  • 9.1.3.1e Datentabellen richtig aufgebaut
  • 9.1.3.1f Zuordnung von Tabellenzellen
  • 9.1.3.1g Kein Strukturmarkup für Layouttabellen
  • 9.1.3.1h Beschriftung von Formularelementen programmatisch ermittelbar
  • 9.1.3.2 Sinnvolle Reihenfolge
  • 9.1.3.3 Ohne Bezug auf sensorische Merkmale nutzbar
  • 9.1.3.4 Keine Beschränkung der Bildschirmausrichtung
  • 9.1.3.5 Eingabefelder zu Nutzerdaten vermitteln den Zweck

Youtube-Video zum Prüfschritt 9.1.3.1d Inhalt gegliedert:

Dieses Video zeigt worauf es ankommt bei barrierefreie Formulare auf Internetseiten nach EN 301 549.

Unterscheidbar

  • 9.1.4.1 Ohne Farben nutzbar
  • 9.1.4.2 Ton abschaltbar
  • 9.1.4.3 Kontraste von Texten ausreichend
  • 9.1.4.4 Text auf 200 % vergrößerbar
  • 9.1.4.5 Verzicht auf Schriftgrafiken
  • 9.1.4.10 Inhalte brechen um
  • 9.1.4.11 Kontraste von Grafiken und grafischen Bedienelementen ausreichend
  • 9.1.4.12 Textabstände anpassbar
  • 9.1.4.13 Eingeblendete Inhalte bedienbar

Youtube-Video zum Prüfschritt 9.1.4.3 Kontraste von Texten ausreichend:

Youtube-Video zum Prüfschritt 9.1.4.4 Text auf 200 % vergrößerbar:

Per Tastatur zugänglich

  • 9.2.1.1 Ohne Maus nutzbar
  • 9.2.1.2 Keine Tastaturfalle
  • 9.2.1.4 Tastatur-Kurzbefehle abschaltbar oder anpassbar

Ausreichend Zeit

  • 9.2.2.1 Zeitbegrenzungen 85
  • 9.2.2.2 Bewegte Inhalte abschaltbar

Anfälle

  • 9.2.3.1 Verzicht auf Flackern

Navigierbar

  • 9.2.4.1 Bereiche überspringbar
  • 9.2.4.2 Sinnvolle Dokumenttitel
  • 9.2.4.3 Schlüssige Reihenfolge bei der Tastaturbedienung
  • 9.2.4.4 Aussagekräftige Linktexte
  • 9.2.4.5 Alternative Zugangswege
  • 9.2.4.6 Aussagekräftige Überschriften und Beschriftungen
  • 9.2.4.7 Aktuelle Position des Fokus deutlich

Youtube-Video zum Prüfschritt 9.2.4.7 Aktuelle Position des Fokus deutlich:

Eingabemodalitäten

  • 9.2.5.1 Alternativen für komplexe Zeiger-Gesten
  • 9.2.5.2 Zeigergesten-Eingaben können abgebrochen oder widerrufen werden
  • 9.2.5.3 Sichtbare Beschriftung Teil des zugänglichen Namens
  • 9.2.5.4 Alternativen für Bewegungsaktivierung

Lesbar

  • 9.3.1.1 Hauptsprache angegeben
  • 9.3.1.2 Anderssprachige Wörter und Abschnitte ausgezeichnet

Youtube-Video zum Prüfschritt 9.3.1.1 Hauptsprache angegeben:

Vorhersehbar

  • 9.3.2.1 Keine unerwartete Kontextänderung bei Fokus
  • 9.3.2.2 Keine unerwartete Kontextänderung bei Eingabe
  • 9.3.2.3 Konsistente Navigation
  • 9.3.2.4 Konsistente Bezeichnung

Hilfestellung bei der Eingabe

  • 9.3.3.1 Fehlererkennung
  • 9.3.3.2 Beschriftungen von Formularelementen vorhanden
  • 9.3.3.3 Hilfe bei Fehlern
  • 9.3.3.4 Fehlervermeidung wird unterstützt

Kompatibel

  • 9.4.1.1 Korrekte Syntax
  • 9.4.1.2 Name, Rolle, Wert verfügbar
  • 9.4.1.3 Statusmeldungen programmatisch verfügbar

Youtube-Video zum Prüfschritt 9.4.1.1 Korrekte Syntax:

Benutzerdefinierte Einstellungen

  • 11.7 Benutzerdefinierte Einstellungen

Autorenwerkzeuge

  • 11.8.2 Barrierefreie Erstellung von Inhalten
  • 11.8.3 Erhaltung von Barrierefreiheitsinformationen bei Transformation
  • 11.8.4 Reparaturassistenz
  • 11.8.5 Vorlagen

Dokumentation und Support

  • 12.1.1 Dokumentation von Kompatibilität und Barrierefreiheit
  • 12.1.2 Barrierefreie Dokumentation
  • 12.2.2 Technischer Support
  • 12.2.3 Effektive Kommunikation
  • 12.2.4 Vom Support bereitgestellte Dokumentation

Die Europäische Norm EN 301 549 als PDF-Datei: barrierefreies Webdesign, barrierefreie Softwareentwicklung, Barrierefreiheit bei Hardware

Die ganzen Richtlinien, barrierefreies Webdesign, Barrierefreiheit bei Software und Hardware finden Sie in englischer Sprache in dieser PDF-Datei:
EN 301 549 V3.1.1 (2019-11) HARMONISED EUROPEAN STANDARD Accessibility requirements for ICT products and services

Schlussbemerkung

Hurra, es gibt statt Ordnung neues Chaos in der Welt der digitalen Barrierefreiheit. Auch wenn ich kein Fan bin von dem was da zusammengebastelt wurde, werde ich in Zukunft Webseiten nach der europäischen Norm auf Barrierefreiheit überprüfen. Außerdem werde ich eine Blogartikelreihe machen zur EN 301 549 für Barrierefreies Webdesign.

Ich hoffe, dass diese Norm es schaffen wird, die Zugänglichkeit von Webseiten, Software und Apps in ganz Europa umzusetzen. Es wird Zeit, dass die Zugänglichkeit in der Informatik selbstverständlich wird. Alle Menschen ob mit oder ohne Behinderung sind Nutzer von Internetseiten. Dies muß jetzt Deutschland und ganz Europa lernen.

Webseiten, Software und Apps zugänglich gestalten ist cool!

Wenn Sie fragen zu obige Themen haben Schreiben Sie mir eine Mail an info@marlem-software.de oder rufen Sie mich an unter 07072/1278463 .


Weitere Artikel zum Thema barrierefreies Webdesign oder EN 301 549

Autor: Markus Lemcke

Ich bin Markus Lemcke, Softwareentwickler, Webentwickler, Appentwickler, Berater und Dozent für barrierefreies Webdesign, barrierefreie Softwareentwicklung mit Java, C# und Python, Barrierefreiheit bei den Betriebssystemen Windows, Android, IOS, Ubuntu und MacOS.

Schreibe einen Kommentar