Barrierefreiheit im Web

Transkript

1 Barrierefreiheit im Web Eine technisch orientierte Minimaleinführung Dr. Ulrich Schwarz Rechenzentrum der CAU Kiel 5. Februar 2015 Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

2 Themenbereiche Allgemeines Barriere-Freiheit setzt voraus: Barrieren identifizieren Lösungen finden Lösungen umsetzen Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

3 Leitlinien Allgemeines WCAG 2.0 (Web Content Accessibility Guidelines), drei Konformitätsstufen: A, AA, AAA nationale Umsetzung: BITV 2.0, zwei Stufen: Priorität I ( WCAG AA), verbindlich für alle Angebote Priorität II ( WCAG AAA), Soll-Regelung für zentrale Navigations- und Einstiegsangebote Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

4 Allgemeines Barrieren auf Webseiten Webseiten: Ausgabe überwiegend visuell: Text, Bilder, Video z.t. akustisch Eingabe überwiegend zeigen und klicken Problemgebiete: Sehvermögen (z.t. auch Hörvermögen) Motorik Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

5 Allgemeines Hier nicht behandelt: andere Barrieren Video textuelle oder gesprochene Beschreibung Audio geschriebenes Transkript/Untertitel Eingabe Feinmotorik, Tastaturbedienbarkeit Webapps logische Zusammenhänge im Markup: Wenn man hier klickt, geht in der anderen Ecke des Bildschirms ein Fenster auf, s. WAI-ARIA Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

6 Allgemeines Visuelle Beeinträchtigungen Sehkraftbeeinträchtigung, Schärfe, Kontrast (Blendungsempfindlichkeit), Farben, Bewegung (Epilepsie!) Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

7 Allgemeines Eingesetzte assistive Technologien (AT) Screenreader Braillezeilen Bildschirmlupen Lesebrillen... Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

8 Allgemeines Notwendigkeit unterstützender Inhalte Einfache Faustregel Text ist gut, da automatisch vorlesbar oder als Brailleschrift erfassbar. Alles andere 1 : stop and think! 1 teilweise auch Tabellen Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

9 Technische Fragestellungen Grobe Gruppierung von Maßnahmen Optische Darstellung Semantische Aufbereitung Ergänzende/alternative Inhalte Bringschuld durch (i.w.) zwei Parteien: Redakteure Systemdienstleister Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

10 Technische Fragestellungen Beispiel: Ort der Bringschuld Kontrast Link/Hintergrundfarbe schlecht: Redakteur legt nur fest dies ist ein Link, systemisches Problem. Ablaufplan ohne Textbeschreibung: Dienstleister berät höchstens bei der Umsetzung, redaktionelles Problem. Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

11 Technische Fragestellungen Optische Darstellung Schriftgröße (groß genug und einstellbar) Farbkontraste (hoch genug aber nicht zu hoch) Blinken und Bewegung (leicht abschaltbar, nur kurz, nur kleine Flächen, rot vermeiden) Information nicht nur als Farbe, Form, Position vermeidet für manche die Notwendigkeit von AT Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

12 Technische Fragestellungen Semantische Aufbereitung Semantische Aufbereitung ist notwendig für automatische Verarbeitung durch AT direkt zum Inhalt der Seite springen können von Überschrift zu Überschrift springen können erkennen, womit eine Checkbox beschriftet ist Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

13 Technische Fragestellungen Ergänzende/alternative Inhalte Bildbeschreibung als Text Zusammenfassung von Tabellen Untertitel, Gebärdensprache für Videos, aber etwa auch Vortragsfolien Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

14 Technische Umsetzung Semantische Aufbereitung Semantische Aufbereitung I Exkurs: Webseiten bestehen aus Steuerbefehlen und Text: <h1>überschrift</h1> Es gibt Steuerbefehle mit unterschiedlich starker Semantik: <h1> Überschrift der ersten (obersten) Stufe, quasi Formatvorlage <b> Fettdruck, quasi die verführerischen Schaltflächen <span> irgendwas Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

15 Technische Umsetzung Semantische Aufbereitung Semantische Aufbereitung II Faustregel Nach Möglichkeit die semantisch höchstwertige Formatierung nehmen! ermöglicht z.b. Springen von Überschrift zu Überschrift aber: nicht für weil s so schön fett und auffällig macht", form follows function! Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

16 Technische Umsetzung Semantische Aufbereitung Semantische Aufbereitung III Problem: bei Kopieren/Einfügen gehen häufig die semantischen Anteile verloren. Im Sinne der Aufbereitung also: Ausschneiden, in Notepad (Editor) o.ä. einfügen, dort ausschneiden und in Plone einfügen, Formatierung in Plone vornehmen. Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

17 Technische Umsetzung Semantische Aufbereitung: Links Semantische Aufbereitung: Links Der Zweck eines Links soll sich mit wenig Kontext ergeben: gut Zur [ Übersicht über die Vorlesungen]. ok Eine Übersicht über die Vorlesungen finden Sie [ hier]. schlecht Wir bieten Vorlesungen an. [ mehr] Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

18 Technische Umsetzung Semantische Aufbereitung: Tabellen Semantische Aufbereitung: Tabellen I Anatomie einer Tabelle: Liste mit vielen Unterattributen, in Zeilen und Spalten organisiert meist Überschriften für Zeilen, Spalten Kopf, Rumpf, Fuß (Kopf, Fuß: könnten z.b. auf jeder Seite wiederholt werden) Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

19 Technische Umsetzung Semantische Aufbereitung: Tabellen Semantische Aufbereitung: Tabellen II Plone: Überschriften Überschrift erzeugen beim Erstellen, Stile Tabellenüberschrift und Tabellenzelle Kopf, Rumpf, Fuß nur in HTML-Ansicht Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

20 Technische Umsetzung Semantische Aufbereitung: Tabellen Semantische Aufbereitung: Tabellen III HTML: <table> <thead>kopf</thead> <tbody>rumpf</tbody> <tfoot>fuß</tfoot> </table> <tr> <th>überschrift</th> <td>normale Zelle</td> </tr> Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

21 Technische Umsetzung Alternative Inhalte Alternative Inhalte Nach Faustregel vom Anfang: wichtig bei vielen Bildern (und Videos), evtl. auch bei Tabellen. Wobei: manche Bilder sind reine Zierde ohne Inhalt, dort kann alternativer Inhalt entfallen. Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

22 Technische Umsetzung Alternative Inhalte: Bilder Alternative Inhalte: Bilder I Standard sieht bis zu drei ergänzende Eigenschaften vor: alt alternativer Text (falls Bild nicht angezeigt werden kann) title erklärender Text (für alle Benutzer, z.b. auch Tooltip) longdesc längere Beschreibung des Bildes, soweit sinnvoll (getrennte Webseite) Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

23 Technische Umsetzung Alternative Inhalte: Bilder Alternative Inhalte: Bilder II Beispiel: alt Jubiläumslogo der CAU title Seit 350 Jahren ganz weit oben! longdesc Das Jubiläumslogo zeigt das Logo der CAU, die Buchstaben C, A, U, weiß vor violettem Hintergrund, umgeben vom Schriftzug... Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

24 Technische Umsetzung Alternative Inhalte: Bilder Alternative Inhalte: Bilder III Auf HTML-Ebene sieht ein Bild so aus: <img src="webadresse des Bildes" alt="jubiläumslogo..." title="seit 350 Jahren" longdesc="webadresse(!) d. Beschr."/> Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

25 Technische Umsetzung Alternative Inhalte: Bilder Alternative Inhalte: Bilder IV In Plone: alt Eingabefeld Altern. Text beim Einfügen, Voreinstellung: Titel (Dateiname) title Titel des Bildes automatisch, sonst nur in HTML-Ansicht longdesc nur in HTML-Ansicht Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

26 Ausklang Zusammenfassung Barrierefreiheit betrifft uns alle Lassen wir uns nicht von der langen Liste schrecken Viele Verbesserungen erfordern mehr Problembewusstsein als Ressourceneinsatz Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27

27 Ausklang Literatur & Hilfsmittel BITV V zur Schaffung barrierefreier IT nach BGG WCAG How to meet WCAG 2.0, A quick reference to guidelines and techniques FAE Functional Accessibility Evaluator der Universität Illinois Dr. Ulrich Schwarz (RZ der CAU) Barrierefreiheit im Web 5. Februar / 27