Umgang mit Barrierefreiheit auf

Transkript

1 Umgang mit Barrierefreiheit auf Inhalt Allgemeines und Vorbemerkung Als Institution mit Bildungsauftrag legt das Jüdische Museum Berlin (JMB) großen Wert auf eine möglichst breite Zugänglichkeit der online angebotenen Informationen. Das folgende Papier dient der Definition wichtiger Parameter, die verbindlich gelten a) bei der Entwicklung von Webinhalten für das JMB (das umfasst gestalterische, technische und redaktionelle Dienstleistungen), b) bei der Beratung des JMB zur Konzeption oder Entwicklung online verfügbarer Angebote (in Hinblick auf gestalterische, technische und redaktionelle Leistungen) c) oder bei der Entwicklung von Systemen, die das JMB bei online angebotenen Dienstleistungen unterstützen (Entwicklung von Software, Oberflächen, Elementen von Webangeboten in konzeptioneller, gestalterischer, technischer und redaktioneller Hinsicht). Systeme, die zur Erstellung von Webangeboten dienen, müssen Inhalte produzieren lassen, die Konformitätsstufe AA der Web Content Accessibility Guidelines (WCAG) 2.0 entsprechen (vergleichbar mit Priorität I der Barrierefreien Informationstechnik-Verordnung 2.0). Abweichungen werden nur nach ausdrücklicher Vereinbarung akzeptiert. Alle Oberflächen, die für User außerhalb des JMB zugänglich und bedienbar sein sollen, müssen den hier beschriebenen Richtlinien der WCAG 2.0 resp. BITV 2.0 entsprechen. Diese Anforderungen sind nach dem BGG für öffentliche Einrichtungen rechtlich verpflichtend. Richtlinien nach WCAG 2.0 Mehr Informationen über alle hier zitierten Richtlinien und beschriebenen Anforderungen finden Sie auf Eine deutsche Übersetzung finden Sie auf 2.0/complete.html Die Übersetzung bezieht sich dabei auf eine frühere Version des englischsprachigen Dokuments. Zu jeder Richtlinie gibt es Erfolgskriterien auf drei Konformitätsstufen. Die Erfolgskriterien auf Konformitätsstufen A und AA sind hier relevant. Neben verschiedenen Erläuterungen werden auch Best-Practice-Beispiele und Fehlertechniken beschrieben. Obwohl die Beispiele eine gute Orientierung für die Barrierefreiheit bieten, kommt es nicht darauf an, die Beispiele umzusetzen, sondern es kommt darauf an, dass die einzelnen Erfolgskriterien erfüllt werden. Die nachfolgenden Ausführungen sind als Zusammenfassung der Erläuterungen zu verstehen. Seite 1

2 Der Wortlaut der BITV 2.0 findet sich hier: Anforderungen Richtlinie 1.1 Textalternativen»Stellen Sie Textalternativen für alle Nicht-Text-Inhalte zur Verfügung, so dass diese in andere vom Benutzer benötigte Formen geändert werden können, wie zum Beispiel Großschrift, Braille, Symbole oder einfachere Sprache.«Grafiken: Alle Grafiken benötigen ein alt-attribut, das redaktionell bearbeitet werden kann und möglichst knapp und genau den Inhalt beschreibt. Einige besondere Fälle müssen berücksichtigt werden: Verlinkte Grafiken (einschließlich Image-Maps) und Steuerelemente, die ausschließlich aus Grafik bestehen, benötigen einen Alternativtext, der Ziel oder Funktion angibt. Wenn ein Icon aber einen Linktext oder eine Beschriftung ergänzt, dann muss es von Hilfsmitteln ignoriert werden können (CSS, leerer Alternativtext). Der Alternativtext dient als Name (4.1.2) für Links und Steuerelemente. Grafische Repräsentationen (Info-Grafiken, Karten, Diagramme etc.) benötigen wenn möglich einen beschreibenden Alternativtext. Längere Textalternativen müssen als lange Beschreibung berücksichtigt werden, wodurch der Alternativtext die Grafik identifizieren und die lange Beschreibung mit der Grafik verknüpft werden soll (z.b. mit aria-describedby, longdesc, Verlinkung oder <details> und <summary>). Grafiken, die Objekte, Menschen, Szenen oder Abstraktionen darstellen, die erläutert werden müssen (Produkte, Kunstobjekte etc.) sollen identifiziert werden (alt="fotografie: [Titel] von [Künstler]") und durch eine lange Beschreibung beschrieben werden. Grafiken, die nur Text darstellen, erhalten einen Alternativtext mit dem abgebildeten Text. Wenn möglich, sollte nach auf solche Grafiken zugunsten von Web Fonts verzichtet werden. Grafiken, die als CAPTCHA oder Test genutzt werden, benötigen einen identifizierenden Alternativtext. Seite 2

3 Grafiken, die keinen informativen Charakter haben (das können auch Bilder sein), benötigen einen leeren Alternativtext (alt=""). Nur rein ästhetische Grafiken können auch per CSS eingebunden werden. Wenn mehrere Grafiken mit einem Alternativtext beschrieben werden können, erhält eine Grafik den beschreibenden Alternativtext und die weiteren einen leeren Alternativtext. Wenn Grafiken dynamisch ausgetauscht werden, werden die Alternativtexte ebenfalls angepasst. CAPTCHA: Wenn ein sensorisches CAPTCHA (visuell oder auditiv) genutzt wird, muss es mindestens eine Alternative (weitere CAPTCHA, Honey Pot Trap, Telefon-Service etc.) geben. Andere Nicht-Text-Inhalte: Multimedia-Inhalte (einschließlich Live-Audio und Live-Video) benötigen eine identifizierende Textalternative. Weitergehende Anforderungen an Multimedia finden sich in der Anforderung 1.2. Eingebettete Objekte (z.b. Java, interaktives Flash) benötigen eine zusammenfassende Textalternative. Die oben genannten Anforderungen an Grafiken gelten auch für die Nicht-Text- Inhalte in Flash, PDF und sonstigen Objekten. Frames benötigen ein beschreibendes title-attribut. Richtlinie 1.2 Zeitbasierte Medien»Stellen Sie Alternativen für zeitbasierte Medien zur Verfügung.«Für aufgezeichnete Audioinhalte, die selbst keine Alternative für andere Inhalte sind, muss es ein Transkript (oder Untertitel) geben. Seite 3

4 Für Videoinhalte, die selbst keine Alternative für andere Inhalte sind (z.b. DGS-Film), gilt: Videos ohne Tonspur benötigen eine textliche oder akustische Beschreibung des Videoinhalts. Eine akustische Beschreibung kann synchronisiert oder als eigenständiger Inhalt geboten werden. Videos mit Tonspur benötigen Untertitel. Hinweis: Auf Konformitätsstufe A gilt das nur für aufgezeichnete Videos, auf Konformitätsstufe AA gilt das auch für Live- Videos mit Tonspur). Videos mit Tonspur benötigen ein Transkript oder eine Audiodeskription (Konformitätsstufe A). Hinweis: Auf Konformitätsstufe AA muss die Audiodeskription vorhanden sein, auch wenn eine Textbeschreibung (der Audio- und Videoinhalte) bereits vorhanden ist. Auf Audiodeskription kann dann verzichtet werden, wenn die Tonspur bereits alle wichtigen Informationen enthält. Für sämtliche Alternativen gilt, dass die Alternative im Kontext der Multimedia bereitgestellt werden muss (z.b. Link zu einer textlichen Alternative unmittelbar neben einem Player). 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.«verständlichkeit: Visuell dargestellte Strukturen müssen in HTML und PDF auf der Strukturebene nachvollzogen werden können. Absätze (und andere Informationshappen wie Beschriftungen + Steuerelemente in Formularen) müssen mit P, Überschriften mit einer der sechs Überschriftenelemente, Listen mit einem geeigneten Listenelement und einfache und komplexe Datentabellen korrekt mit den dafür vorgesehenen Elementen ausgezeichnet werden. Diese vier Inhaltstypen sind die wichtigsten. Die Elemente sollten nicht missbraucht werden. Da Flash keine Strukturelemente für Überschriften und Listen bereitstellt, müssen in Flash visuelle Darstellungen als Überschrift oder Liste textlich berücksichtigt werden. Formularbeschriftungen (<label>) müssen eindeutig mit den dazugehörigen Steuerelementen verknüpft werden. Gruppen von Steuerelementen mit einer gemeinsamen Bezeichnung müssen mit <fieldset>/<legend> oder WAI-ARIA entsprechend aufbereitet werden. Seite 4

5 Beziehungen (z.b. zwischen Überschriften oder Listen) müssen auf der Text- bzw. Strukturebene nachvollzogen werden können. Das gilt auch für Hervorhebungen (z.b. aktiver Punkt in der Navigation). Linearisierbarkeit: Die Lesereihenfolge (z.b. in Sprachausgaben) muss gewährleistet sein. Das gilt auch, wenn Inhalte zur Seite dynamisch hinzugefügt werden. Alle Hinweise im Text (z.b. Anweisungen) müssen sich auf Textstellen beziehen, damit sie in einer Darstellung ohne CSS oder Grafik nachvollzogen werden können. Richtlinie 1.4 Unterscheidbar»Machen Sie es Benutzern leichter, Inhalt zu sehen und zu hören einschließlich der Trennung von Vorder- und Hintergrund.«Visuelle Darstellung: Visuelle Hervorhebungen durch Vordergrund- und/oder Hintergrundfarbe benötigen eine zweite visuelle Hervorhebung (z.b. Symbol, Fettung, Rahmen usw.). Das gilt für alle Inhalte einschließlich Navigation. Wenn in Grafiken (z.b. Diagramme) Farbe zur Unterscheidung von Informationen eingesetzt werden, müssen die Informationen textlich gekennzeichnet oder Muster (z.b. Schraffierung) ergänzend eingesetzt werden. Das Kontrastverhältnis von Text (einschließlich Schriftgrafiken) muss mindestens 4,5 betragen. Ausnahmen sind beispielsweise Logos oder deaktivierte Steuerelemente. Außerdem gibt es verminderte Kontrastanforderungen für großen Text. Textinhalte müssen sich auf 200% vergrößern lassen (Seitenzoom, reine Schriftvergrößerung und/oder Style-Switcher), ohne dass es zu Textüberlagerungen oder abgeschnittenen Texten kommt. Nicht vergrößert werden müssen: Logos, nebensächliche Texte, Untertitel und Schriftgrafiken. Es ist auf Schriftgrafiken zu verzichten, wenn eine Darstellung auch mit Text und CSS möglich ist, oder der Nutzer muss auf eine textliche Darstellung wechseln können. Seite 5

6 Multimedia: Wenn eine Seite aufgerufen wird, darf Audio (auch in einem Video) nicht automatisch starten. Richtlinie 2.1 Per Tastatur zugänglich»sorgen Sie dafür, dass alle Funktionalitäten per Tastatur zugänglich sind.«alle Links und Steuerelemente müssen mit der Tab-Taste erreicht werden und per Eingabe-/Leertaste aufgerufen bzw. mit verschiedenen Tasten bedient werden können. Ausnahme: die dahinterliegenden Funktionen (z.b. das Malen) können mit der Tastatur nicht erfolgen. Bei eingebetteten Objekten muss mit der Tabulatortaste in das Objekt und auch wieder hinaus navigiert werden können. Das Objekt muss per Tastatur bedient werden können. Komplexere UI Komponente (Tab-Panels, Drag and Drop, Rich-text-Editoren etc.) sollten darüber hinaus ein schlüssiges Bedienkonzept für die Tastatur aufweisen (siehe Authoring Practices für WAI-ARIA). Richtlinie 2.2 Ausreichend Zeit»Geben Sie den Benutzern ausreichend Zeit, Inhalte zu lesen und zu benutzen.«wenn Informationen nur für eine bestimmte Zeit angezeigt (gelesen) werden können, dann müssen Nutzer die Zeitbegrenzung aufheben oder verlängern können. Wenn Aufgaben in einer bestimmten Zeit erledigt werden müssen, dann müssen Nutzer die Zeitbegrenzung aufheben oder verlängern können (das gilt auch für Sessions). Wenn auf einer Webseite Inhalte automatisch für länger als 5 Sekunden blinken oder sich bewegen, dann hat der Nutzer die Möglichkeit, diese Effekte auszuschalten. Wenn Inhalte automatisch aktualisiert werden, dann kann der Nutzer den Effekt unterbinden oder die Einblendezeiten einstellen. Richtlinie 2.3 Anfälle»Gestalten Sie Inhalte nicht auf Arten, von denen bekannt ist, dass sie zu Anfällen führen.«auf den Webseiten darf es nicht zu Flackern kommen. Seite 6

7 In Videos darf es nicht zu Flackern kommen. 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.«tastaturbedienung: Navigationsbereiche müssen mit der Tastatur übersprungen werden können. Dies gilt für die strukturelle Navigation in Screenreadern (vorzugsweise über landmark roles) und bei der Nutzung der Tab-Taste. Bei Verwendung der Tab-Taste muss die Tab-Reihenfolge auf der Webseite schlüssig sein. Der Systemfokus darf nicht unterdrückt werden, sondern sollte übernommen oder per CSS verstärkt werden. Links: Der Linktext muss alleine oder im Kontext Auskunft über den Linkzweck geben. Der Kontext wird durch Einbettung in einem Satz, einem Element (P, LI), durch in Beziehung stehenden Elementen (TH in Tabellen, übergeordnetes Listenelement, vorstehende Überschrift) u. ä. technisch von einem Screenreader ermittelt, oder er wird durch eine Zusatzfunktion zur Erweiterung der Linktexte bereitgestellt. Steuerelemente: Beschriftungen müssen die dazugehörigen Steuerelemente hinreichend genau beschreiben. Überschriften: Überschriftentexte müssen den nachfolgenden Inhalt beschreiben. Orientierung: Jede Webseite benötigt einen beschreibenden Titel. Seite 7

8 Jede Seite muss über zwei unterschiedliche Methoden erreichbar sein (außer in aufeinander folgende Seiten in einem Prozess). Zu diesen Methoden zählen Navigationsleisten, Suchfunktion, Sitemap oder andere Linklisten. Richtlinie 3.1 Lesbar»Machen Sie Inhalt lesbar und verständlich.«jede Webseite muss eine Sprachangabe enthalten, die für die Inhalte der Webseite gilt. Längere Inhalte (Sätze, Abschnitte), die in einer Sprache verfasst sind, die von der Sprache der Webseite abweicht, müssen mit einem lang-attribut und passendem Sprachcode gekennzeichnet werden. Richtlinie 3.3 Hilfestellung bei der Eingabe»Helfen Sie den Benutzern dabei, Fehler zu vermeiden und zu korrigieren.«wenn Formulare Pflichtfelder oder Felder mit vorgegebenem Wertebereich enthalten: o Pflichtfelder müssen visuell und technisch deutlich gekennzeichnet werden (ein * alleine ist nicht ausreichend). o Vorgegebene Wertebereiche (Datumsfelder, Länge einer Nummer etc.) müssen textlich angegeben werden. Wenn Fehler beim Ausfüllen/Abschicken des Formulars festgestellt werden: o Die Fehler müssen in Textform angegeben werden (farbliche Markierungen reichen nicht aus). o Wenn der Fehler ermittelt werden kann (z.b. PLZ in.de ist 5-stellig), sollen passende Hinweise oder Vorschläge textlich angegeben werden. Wenn der Nutzer durch das Abschicken des Formulars eine Verpflichtung (rechtlich/finanziell) eingeht oder wichtige Daten verändert oder löscht, muss der Vorgang vom Nutzer auch rückgängig gemacht, geprüft oder bestätigt werden. Richtlinie 4.1 Kompatibel»Maximieren Sie die Kompatibilität mit aktuellen und zukünftigen Benutzeragenten, einschließlich assistierender Techniken.«Seite 8

9 Für Inhalte, die vom Browser gerendert werden: Links müssen mit <a> ausgespielt werden (und nicht als <span onclick="">) und benötigen einen identifizierenden Linktext (einschließlich Alternativtext bei Grafiken). Reparaturen mit WAI-ARIA sind nicht erwünscht. Formularelemente müssen mit den in HTML vorgesehenen Elementen ausgespielt werden und benötigen eine explizite Beschriftung. Reparaturen mit WAI-ARIA sind nicht erwünscht. Fortgeschrittenere Widgets (Tab-Panels, Schieberegler, Akkordeons, Drag and Drop usw.) müssen mit WAI-ARIA zugänglich gestaltet werden (widget roles sowie Zustände und Eigenschaften). Für Inhalte, die nicht im Browser, aber in anderer Standardsoftware gerendert werden (z.b. Flash, PDF): Alle Namen und Rollen von Links müssen über die Accessibility-API übertragen werden. Alle Steuerelemente müssen beschriftet sein und über die Accessibility-API übertragen werden. Werte für Eingabefelder müssen direkt gesetzt werden können und Veränderungen über die Accessibility-API mitgeteilt werden. Seite 9