Internetagentur 2.0
by Gaby Rau

Barrierefreie Webseiten

Prinzipien und Richtlinien - Anforderungen - Techniken - Test und Umsetzung
Barrierefreie Webseiten sind nicht nur, sondern auch für Menschen mit Behinderungen gemacht!

Ein gängiges Vorurteil ist es, barrierefreie Webseiten seien spezielle Webseiten für Menschen mit Behinderungen. Dabei ist eher das Gegenteil der Fall: barrierefreie Seiten kommen allen zugute. Nicht zuletzt auch den Suchmaschinen, die ja nur den reinen Text einer Internetseite auswerten können. Denn eine barrierefreie Webseite stellt sicher, dass die enthaltene Information allen Lesern zugänglich ist. Z.B. indem Grafiken, Animationen etc. durch einen sinnvollen, beschreibenden Text ergänzt werden (im übrigen auch eine Anforderung an standardkonforme Webseiten).

Was macht eine barrierefreie Webseite aus?

Die grundlegenden Richtlinien zur barrierefreien Gestaltung von Webseiten sind in den Web Content Accessibility Guidelines (WCAG) 2.1 beschrieben. Es handelt sich dabei um einen W3C Standard der Web Accessibility Initiative (WAI). Auf diesem Standard basiert in Deutschland die Barrierefreie Informationstechnik-Verordnung (BITV 2.0), eine Ergänzung des Behindertengleichstellungsgesetzes (BGG).

Der WCAG-Standard umfasst 4 Prinzipien und 13 Richtlinien. Für jede der Richtlinien sind Erfolgskriterien definiert, also Anforderungen, die erfüllt sein müssen.

Die Erfolgskriterien sind in verschiedene Konformitätsstufen eingeteilt: A, AA und AAA. Eine Webseite, die alle Erfolgskriterien der Stufe A erfüllt, ist demnach WCAG-konfom nach Stufe A.

Die aktuelle Version 2.1 des WCAG Standards wurde im Juni 2018 veröffentlicht. Er ist in der Europäischen Union für öffentliche Stellen ab 23. September 2019 für neue, ab 23. September 2020 für bestehende Websites und ab 23. Juni 2021 für mobile Anwendungen in Konformitätsstufe AA verbindlich.

Prinzipien und Richtlinien WCAG 2.1

Prinzip 1: Wahrnehmbar

Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.

Richtlinie 1.1: Textalternativen

Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, sodass diese in andere vom Benutzer benötigte Formen geändert werden können, wie zum Beispiel Großschrift, Braille, Symbole oder einfachere Sprache.

Anforderungen: Hierzu gehört in erster Linie, dass Grafiken und Fotos  mit Hilfe der HTML-„alt“-Attributes mit sinnvollen Beschreibungstexten versehen sind. Reine Layout-Grafiken müssen jedoch eine leeres „alt“-Attribut haben. Besser  wäre jedoch, solche Grafiken ganz zu vermeiden und stattdessen CSS zu verwenden.

Richtlinie 1.2: Zeit-basierte Medien

Stellen Sie Alternativen für zeit-basierte Medien zur Verfügung.

Anforderungen:  Audio- und Videodateien benötigen eine gleichwertige Medienalternative, z.B. eine Textbeschreibung, eine Transkription, Untertitel etc.

Richtlinie 1.3: Anpassbar

Erstellen Sie Inhalte, die auf verschiedene Arten dargestellt werden können (z.B. einfacheres Layout), ohne dass Informationen oder Struktur verloren gehen.

Anforderungen: Diese Richtlinie umfasst viele Punkte wie z.B.

  • Korrekter Einsatz von HTML-Strukturelementen für Überschriften, Listen etc.
  • Gliederung der Inhalte in aussagekräftiger Reihenfolge
  • Korrekte Tabellen
  • Keine Layouttabellen
  • Korrekte Formularbeschriftungen und Eingabefelder
  • Keine Beschränkung in der Ausrichtung

Richtlinie 1.4: Unterscheidbar

Machen Sie es Benutzern leichter, Inhalt zu sehen und zu hören einschließlich der Trennung von Vorder- und Hintergrund.

Anforderungen: Hierzu gehören z.B.

  • Ohne Farben nutzbar
  • Ton abschaltbar
  • Ausreichender Kontrast
  • Textgröße und Textabstände ohne Informationsverlust veränderbar
  • Keine Schriftgrafiken

Prinzip 2: Bedienbar

Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.

Richtlinie 2.1: Per Tastatur zugänglich

Sorgen Sie dafür, dass alle Funktionalitäten per Tastatur zugänglich sind.

Anforderungen: Die Bedienung soll geräteunabhängig, d.h. sowohl mit der Maus als auch mit der Tastatur möglich sein. Es darf keine Tastaturfalle geben, d.h. wenn der Tastaturfokus auf ein Element der Seite bewegt werden kann, muss er auch von dort wieder weg bewegt werden können.

Richtlinie 2.2: Ausreichend Zeit

Geben Sie den Benutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen.

Anforderungen: Inhalte wie z.B. Dialoge oder Transaktionen müssen ohne Zeitbegrenzung angezeigt werden; alternativ muss eine Zeitbegrenzung abschaltbar oder verlängerbar sein. Bewegte oder automatisch aktualisierte Inhalten müssen anhaltbar sein.

Richtlinie 2.3: Anfälle und körperliche Reaktionen

Gestalten Sie Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen führen.

Anforderungen: Die Seite darf keine Elemente enthalten, die in einem Zeitraum von einer Sekunde häufiger als dreimal aufblitzen.

Richtlinie 2.4: Navigierbar

Stellen Sie Mittel zur Verfügung, um Benutzer dabei zu unterstützen zu navigieren, Inhalte zu finden und zu bestimmen, wo sie sich befinden.

Anforderungen:

  • Inhaltsbereiche wie z.B. die Navigation können von Benutzern assistiver Technologien wie z.B. Screenreadern übersprungen werden. Seitenbereiche sind klar definiert.
  • Der Dokumenttitel (HTML-<title>-Element) muss eindeutig und sinnvoll sein.
  • Die Reihenfolge bei Tastatur-Bedienung ist schlüssig und nachvollziehbar.
  • Aussagekräfte Linktexte, aussagekräftige Überschriften und Beschriftungen
  • Alternative Zugangswege, d.h. Inhalte können z.B. alternativ über die Navigation oder eine Suchfunktion erschlossen werden.
  • Bei interaktiven Elementen ist der Tastaturfokus zu sehen.

Richtlinie 2.5: Eingabe Modalitäten

Erleichtern Sie den Benutzern die Bedienung über verschiedene Eingaben über die Tastatur hinaus.

Anforderungen:  Für Funktionen, die mit pfadbasierte Zeiger-Gesten (etwa Streich- oder Zieh-Gesten) oder über Mehrpunktgesten wie z.B. auf einem Smartphone oder Tablet bedient werden können, gibt es Alternativen für die Aktivierung mittels einer einfachen Zeigereingabe. Sie dürfen keinen Down-Event auslösen. Dies gilt in ähnlicher Weise für Funktionen, die durch eine Bewegung des Gerätes ausgelöst werden.

 

Prinzip 3: Verständlich

Informationen und Bedienung der Benutzerschnittstelle müssen verständlich sein.

Richtlinie 3.1: Lesbar

Machen Sie Inhalt lesbar und verständlich.

Anforderungen: Hierzu gehört z.B. die Angabe der Sprache für die Webseite sowie ggf. die Angabe andersprachiger Wörter oder Abschnitte, die Kennzeichnung von Abkürzungen, aber auch den (zusätzlichen) Einsatz von einfacher Sprache.

Richtlinie 3.2: Vorhersehbar

Sorgen Sie dafür, dass Webseiten vorhersehbar aussehen und funktionieren.

Anforderungen:

  • Bei Änderung des Tastaturfokus oder einer Formulareingabe darf sich der Kontext nicht ändern, d.h. es dürfen keine zusätzlichen Elemente ein- oder ausgeblendet werden.
  • Die Navigation muss einheitlich und konsistent sein.

Richtlinie 3.3: Hilfe bei der Eingabe

Helfen Sie den Benutzern dabei, Fehler zu vermeiden und zu korrigieren.

Anforderungen:

  • Bei Eingabefehlern in Formularen wird das fehlerhafte Element angezeigt und der Fehler in Textform beschrieben, wo sinnvoll werden Korrekturvorschläge gemacht.
  • Formularfelder haben Beschriftungen.
  • Bei verpflichtenden Dateneingaben können Benutzer diese Daten vor der Abschicken noch einmal überprüfen.

Prinzip 4: Robust

Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.

Richtlinie 4.1: Kompatibel

Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken.

Anforderungen: Die Webseite ist in korrektem HTML.

Erfolgskriterien

Für jede der Richtlinien wurden Erfolgskriterien definiert. Damit sind die Anforderungen gemeint, die erfüllt werden müssen.

Diese sind teilweise bereits oben bei den Prinzipien und Richtlinien aufgeführt. Hier nochmals die wichtigsten Punkte:

  • Bereitstellung von Text-Äquivalenten für Mulitmedia-Inhalte
  • Geräteunabhängige Seiten (sie sollten von Benutzern ohne Maus, mit niedrigauflösenden Bildschirmen, Schwarzweiß-Bildschirmen, ohne Bildschirm, allein mit Sprach- oder Textausgabe usw. verwendbar sein).
  • Semantisches HTML
  • Einsatz von Accessible Rich Internet Applications (ARIA), (nur!) wenn semantisches HTML nicht möglich ist.
  • Logische und korrekte Struktur
  • Trennung von Layout und Inhalt
  • Klare Navigation, sichere Orientierung, verständlicher Text
  • Bewegte Elemente wie Videos oder Slider sowie Audio-Elemente müssen jederzeit, auch per Tastatur, angehalten werden können.
  • Verwendung von W3C-Technologien und -Standards
  • …

Haben Sie etwas bemerkt? Diese Anforderungen decken sich zu einem großen Teil mit den Anforderungen an standardkonforme Websites und Benutzerfreundlichkeit! Deshalb steht in der BITV auch wörtlich: „Mittels Markup–Sprachen geschaffene Dokumente sind so zu erstellen und zu deklarieren, dass sie gegen veröffentlichte formale Grammatiken validieren.“ Was nichts anderes bedeutet, als dass barrierefreie Webseiten standardkonform sein müssen!

Welche Erfolgskriterien (Anforderungen) jeweils zu beachten sind, hängt davon ab, welche Elemente und Funktionen auf der jeweiligen Webseite verwendet werden. So gelten beispielsweise besondere Regeln für Tabellen (die im übrigen nicht für Layout missbraucht werden sollten!), für Formulare, für Multimedia-Elemente usw.

Umgekehrt müssen logischerweise natürlich Regeln für nicht benutzte Elemente auchj nicht eingehalten werden. Ein Verzicht auf technischen Schnickschnack wie Flash-Intros (wird ohnehin nicht mehr unterstützt) erleichtert also die Erstellung eine barrierefreien Internetseite ungemein und dient gleichermaßen der Benutzerfreundlichkeit.

Techniken

Die Richtlinien und Erfolgskriterien wurden im WCAG-Standard in einer technik-neutralen Form beschrieben. Um Anleitungen und Beispiele zur Erfüllung der Richtlinien durch die Benutzung bestimmter Techniken (z.B. HTML) zur Verfügung zu stellen, hat die Arbeitsgruppe Techniken für jedes Erfolgskriterium identifiziert. Diese sind in dem Dokument Techniques for WCAG 2.1 (englisch) beschrieben sind. Für die Version 2.0 des Standards existiert auch eine deutsche Übersetzung: Techniken für WCAG 2.0.

Überprüfung und Test

Manche der Erfolgskriterien lassen sich automatisch, also per Programm, überprüfen wie z,.B. korrektes HTML mit dem W3C Validator oder auch der Kontrast mit WebAIM Contrast Checker.

Für die meisten Erfolgkriterien ist jedoch die Sichtung durch einen Menschen erforderlich. Nur ein Mensch kann z.B. feststellen, ob eine Überschrift, ein Alternativ-Text oder ein Link sinnvoll beschrieben ist. Weiterhin sind Kenntnisse der verwendeten Technik wie z.B. HTML nötig, um festzustellen, ob diese korrekt im Sinne von WCAG verwendet wurde.

Da eine Überprüfung immer nur für eine einzelne Webseite durchgeführt werden kann, kann sich der Aufwand für die Überprüfung bei einer Website mit sehr vielen Seiten recht aufwändig gestalten.

Der BITV-Test ist ein Verfahren für die umfassende und zuverlässige Prüfung der Barrierefreiheit von Websites und  Webanwendungen. Grundlage für diesen Test ist die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) vom 21. Mai 2019, d.h. er bezieht die neuen Anforderungen der WCAG 2.1 mit ein. Der BITV-Test umfasst insgesamt 6o Prüfschritte und kann entweder bei Prüfstellen beauftragt (bei bereits bestehenden Websites zum Preis von € 558,- pro Seite, Ergebnis darf veröffentlicht werden) oder in einer Selbstbewertung durchgeführt werden (Ergebnis darf nicht veröffentlicht werden).

Umsetzung

Barrierefreiheit ist ein sehr komplexes Thema. Je nachdem, welche Elemente auf einer Webseite eingesetzt werden müssen, kann die Umsetzung einfach oder kompliziert werden.

Wie bei suchmaschinenoptimierten oder benutzerfreundlichen Seiten gilt aber auch hier: Wird eine Website von vorneherein barrierefrei entwickelt, ist das oft nur ein geringer Mehraufwand. Ein hoher Aufwand kann es aber sein, wenn eine bestehende Website – und damit alle Webseiten, die zu dieser Website gehören – nachträglich barrierefrei gestaltet werden soll.

 

p

Liste der Links