© 2008 1 Barrierefreies Internet Vorlesung DDA am 08.03.2008 in Hamburg Tiffany Wyatt Agentur...

© 2008 www.feldwaldwiese.de1

Barrierefreies InternetVorlesung DDAam 08.03.2008 in Hamburg

Tiffany WyattAgentur feld.wald.wiesetiffany.wyatt@feldwaldwiese.de

© 2008 www.feldwaldwiese.de2

Ablauf

• Definition, Betroffene, Hilfsmittel

• Gesetzgebung, Richtlinien, Testverfahren

• Praxisteil: Webseiten

• Praxisteil: Multimedia und PDFs (optional)

• Projektmanagement für Barrierefreiheit

© 2008 www.feldwaldwiese.de3

Barrierefreies Webdesign brauchen doch nur Blinde!

Sicher?

Nicht unsere Zielgruppe.

© 2008 www.feldwaldwiese.de4

In Deutschland leben

• 6,7 Millionen schwerbehinderte Menschen(8% der Bevölkerung)

• 155.000 blinde Menschen

• 500.000 sehbehinderte Menschen

• 7% farbenblinde Männer

• mindestens 250.000 hörgeschädigte Menschen

• mindestens 4 Millionen Analphabeten

© 2008 www.feldwaldwiese.de5

… und

• 18,8 Millionen Menschen, die älter als 60 sind

• mindestens 1,5 Millionen Internetbenutzer, die nicht Windows benutzen

• Menschen, die nicht gut Deutsch verstehen

• PDA- oder Handy-Nutzer, Benutzer mit deaktiviertem JavaScript, Modemnutzer, Touchscreen-Nutzer …

• Brillenträger, neu im Internet, Arm eingegipst …

© 2008 www.feldwaldwiese.de6

Wer will auf so viele Kunden verzichten?

© 2008 www.feldwaldwiese.de7

Der Idealfall

Eine barrierefreie Website ist

• für jeden Benutzer

• mit jedem geeigneten Browser

• mit jeder geeigneten technischen Ausstattung

im vollen Umfang zugänglich und nutzbar.

© 2008 www.feldwaldwiese.de8

§4 Behindertengleichstellungsgesetz

Barrierefrei sind (...) Systeme der Informations-verarbeitung, akustische und visuelle Informationsquellen und Kommunikations-einrichtungen (...), wenn sie für behinderte Menschen in der allgemein üblichen Weise, ohne besondere Erschwernis und grundsätzlich ohne fremde Hilfe zugänglich und nutzbar sind.

© 2008 www.feldwaldwiese.de9

Barrierefreiheit

Zugänglichkeit

Accessibility

© 2008 www.feldwaldwiese.de10

Wir haben eine Idee:

Lieber nicht!

Wir machen einfach eine zusätzliche Textversion

© 2008 www.feldwaldwiese.de11

Das Ziel: eine Version für alle

Voraussetzung: Hohe Flexibilität, z.B. durch …

• Geräteunabhängigkeit

• Vorwärts- und Rückwärtskompatibilität

• Variable visuelle Darstellung

© 2008 www.feldwaldwiese.de12

Universelles Design

© 2008 www.feldwaldwiese.de13

Barrierefreie Webseiten sind hässlich …

Wirklich?

Sehen doch alle gleich aus.

© 2008 www.feldwaldwiese.de14

Barrierefreiheit sieht man

nicht!

Beispiele

© 2008 www.feldwaldwiese.de15

Barrierefreiheit ist teuer und aufwändig …

Auf den ersten Blick.

Stimmt.

© 2008 www.feldwaldwiese.de16

Mehraufwand …

bei der Entwicklung (einmalig)

• Lernaufwand(CSS, standardkonforme Entwicklung)

• höherer Testaufwand

• nicht jedes CMS ist geeignet

• Standardlösungen (z.B. fertige Skripte) können oft nicht verwendet werden

• Altlasten müssen aufgearbeitet werden

© 2008 www.feldwaldwiese.de17

Mehraufwand …

bei der redaktionellen Pflege (dauerhaft)

• Alternativtexte für Bilder

• Sprachauszeichnung

• Weiterbildung der Redakteure

• Regelmäßige Qualitätskontrollen

© 2008 www.feldwaldwiese.de18

Dafür aber viele Vorteile

• Gestaltung schnell und einfach anpassen

• Schnellere, kostengünstigere Relaunches

• Übersichtlicher, leicht zu pflegender Quellcode

• Sinkende Betriebskosten durch geringere Serverlast

• Bessere Auffindbarkeit in Suchmaschinen

• Zukunftssicherheit, hohe technische Qualität

• Zufriedene Benutzer, positives Image

© 2008 www.feldwaldwiese.de19

Barrierefreiheit lohnt sich!

© 2008 www.feldwaldwiese.de20

Hilfsmittel für Blinde

• ScreenreaderZum Auslesen des Bildschirminhalts, zum Beispiel von Text, Menüs, Kontrollelementen, Webseiten

• SprachausgabeZur Ausgabe in gesprochener Sprache

• BraillezeileZur Ausgabe in Blindenschrift (Braille)

© 2008 www.feldwaldwiese.de21

Braillezeile

© 2008 www.feldwaldwiese.de22

Arbeitsplatz

© 2008 www.feldwaldwiese.de23

Rechtliche Rahmenbedingungen

11/1994: §3 Grundgesetz: „Niemand darf wegenseiner Behinderung benachteiligt

werden“

05/2002: Behindertengleichstellungsgesetz (BGG)§11: Barrierefreie Informationstechnik

07/2002: Barrierefreie InformationstechnikVerordnung (BITV) – basierend auf denRichtlinien der W3C Web Accessibilty Iniative (WAI)

© 2008 www.feldwaldwiese.de24

Richtlinien und Gesetze

• Internationale Richtlinien des W3C

• Web Accessibility Guidelines (WCAG) 1.0

• Web Accessibility Guidelines (WCAG) 2.0

• Bundesgesetzgebung: BITV

• Ländergesetzgebung

© 2008 www.feldwaldwiese.de25

Stufen der Barrierefreiheit

BITV WAI / WCAG 1.0

Keine Entsprechung Priorität 1 (Muss-Kriterium)Konformitätsstufe A

Prioritätsstufe 1 Priorität 2 (Soll-Kriterium)Konformitätsstufe AA

Prioritätsstufe 2 Priorität 3 (Kann-Kriterium)Konformitätsstufe AAA

© 2008 www.feldwaldwiese.de26

Testverfahren

• BITV-Test von BIK• 52 Prüfschritte / Maximal 100 Punkte

• 95 Punkte: sehr gut zugänglich

• 90 Punkte: gut zugänglich

• 80 Punkte: eingeschränkt zugänglich

• Darunter: schlecht zugänglich

• BITV-Selbstbewertung von BIK

• Kriterienkatalog des BIENE-Awards

© 2008 www.feldwaldwiese.de27

Die 4 Prinzipien der WCAG 2.0

• Wahrnehmbarkeit

• Bedienbarkeit

• Verständlichkeit

• Robustheit

© 2008 www.feldwaldwiese.de28

Textalternativen

alt-Attribut, title-Attribut,ausführliche Beschreibung, Bildunterschrift

Unterscheiden:

• Grafiken und Bilder

• Bedienelemente

• Dekorative Grafiken und Layoutgrafiken

• CAPTCHAS

© 2008 www.feldwaldwiese.de29

Bilder und Grafiken

• Photos und IllustrationenKurze Beschreibung in das alt-Attribut,evtl. zusätzliche separate ausführliche Beschreibung

• Schriftgrafiken (möglichst vermeiden!)Den Text, der auf der Grafik zu sehen ist, im alt-Attribut notieren

• Diagramme und andere InfografikenKurze Beschreibung in das alt-Attribut,zusätzliche separate ausführliche Beschreibung

© 2008 www.feldwaldwiese.de30

Bedienelemente

• Auf jeden Fall:das Linkziel bzw. die Funktion des Links im alt-Attribut beschreiben

• Manchmal muss zusätzlich das Bild selbst beschrieben werden

• Bei Symbolen:textliche Erläuterung im title-Attribut

© 2008 www.feldwaldwiese.de31

Überschriften

• Überschriften sind insbesondere für blinde Benutzer sehr wichtig (gezielte Navigation innerhalb der Seite)

• Hauptüberschrift der Seite mit <h1> auszeichnen

• Alle weiteren Überschriften mit <h2> bis <h6> auszeichnen

© 2008 www.feldwaldwiese.de32

Weitere Strukturelemente

• Absätze mit <p> auszeichnen

• Listen mit <ul> bzw. <ol> und <li> auszeichnen

• Zitate mit <blockquote> auszeichnen

© 2008 www.feldwaldwiese.de33

Tabellen

• Tabellenüberschriften kennzeichnen

• Möglichst nur einfache Tabellen anbieten (Überschriftenzellen nur in der ersten Zeile und/oder in der ersten Spalte)

• Komplexe Tabellen lassen sich meist vereinfachen, zum Beispiel indem man sie in mehrere einfache Tabellen teilt

© 2008 www.feldwaldwiese.de34

Farben

• Sehr wichtiges Thema für Benutzer mit Sehbehinderungen

• Keine Informationen ausschließlich über Farbe vermitteln (bei Bild und Text)

• Für ausreichende Helligkeitskontraste sorgen

© 2008 www.feldwaldwiese.de35

Rot-Grün-Schwäche

Mit grün fortfahren odermit rot abbrechen

© 2008 www.feldwaldwiese.de36

Rot-Grün-Schwäche

Mit grün fortfahren odermit rot abbrechen

© 2008 www.feldwaldwiese.de37

Welcher Link ist deutlich?

• Dies ein nur farblich gekennzeichneter Link

• Dieser Link ist zusätzlich mittels Fettung gekennzeichnet

• Hier sehen Sie einen Link, der sich durch kursive Schrift bemerkbar macht

• Und dies ist ein unterstrichener Link

© 2008 www.feldwaldwiese.de38

Welcher Link ist deutlich?

• Dies ein nur farblich gekennzeichneter Link

• Dieser Link ist zusätzlich mittels Fettung gekennzeichnet

• Hier sehen Sie einen Link, der sich durch kursive Schrift bemerkbar macht

• Und dies ist ein unterstrichener Link

© 2008 www.feldwaldwiese.de39

Unterscheidung über die Farbe

© 2008 www.feldwaldwiese.de40

Aber Helligkeitswert zu ähnlich

© 2008 www.feldwaldwiese.de41

Farben korrigiert

© 2008 www.feldwaldwiese.de42

Auch in Graustufen unterscheidbar

© 2008 www.feldwaldwiese.de43

Noch eindeutiger durch Muster

© 2008 www.feldwaldwiese.de44

Auch in Graustufen eindeutig

© 2008 www.feldwaldwiese.de45

Kontraste prüfen

• Hexadezimalwerte von Vordergrund (Text) und Hintergrund ermitteln

• Werte z.B. eingeben bei:

http://www.rohschnitt.de/drag_queen.htm

• BITV-Test: Helligkeitsdifferenz muss bei Grafiken mindestens 125, beim Hauptfließtext inkl. Überschriften auch 125 und bei allen anderen Texten 110 betragen.

© 2008 www.feldwaldwiese.de46

Robustheit des Layouts prüfen

• Jede fertiggestellte Webseite prüfen, insbesondere bei größeren Bildern

• Im Internet Explorer mit der AIS-Toolbar das Fenster auf 800x600 stellen und die Schrift auf „sehr groß“ stellen – bleibt alles lesbar?

• In Firefox mit der Web Developer Toolbar das Fenster auf 800x600 stellen und die Schrift 2 mal zoomen (strg + +) – bleibt alles lesbar?

© 2008 www.feldwaldwiese.de47

Tastaturbedienbarkeit

• Alle Funktionalitäten auch ohne Maus nutzbar

• Keine Tastaturfallen einbauen!

• Sprunglinks zum Überspringen von sich wiederholenden Blöcken

• Logische Tab-Reihenfolge

• Tastaturfokus hervorheben

© 2008 www.feldwaldwiese.de48

Ausreichend Zeit geben

• Zeitlimits abschaltbar oder um Faktor 10 verlängerbar(Ausnahme z.B. bei Live-Events oder zeitabhängigen Tests)

• Bewegung und Blinken abschaltbar

© 2008 www.feldwaldwiese.de49

Kein Flackern!

• Farb- oder Musterwechsel mit hoher Frequenz (mehr als 3 Wechsel pro Sekunde) können epileptische Anfälle verursachen!

© 2008 www.feldwaldwiese.de50

Aussagekräftige Titel

• Dokumenttitel:Teil 1: Anbieter der SiteTeil 2: Kurzbeschreibung der Seite

• Aussagekräftige Überschriften und Beschriftungen (z.B. von Formularfeldern)

© 2008 www.feldwaldwiese.de51

Aussagekräftige Linktexte

• So knapp und so aussagekräftig wie möglich

• Linktexte wie hier oder jetzt klicken sind nicht aussagekräftig und bedeuten besonders für blinde Benutzer eine Barriere

• Ein Linktext mehrfach aber mit unterschiedlichen Zielen auf einer Seite?Mit title-Attribut differenzieren:<a href=„konditionen.html“ title=„Unsere Konditionen“>mehr</a>

© 2008 www.feldwaldwiese.de52

Dateiformat angeben

• Barrierefreier Link auf ein PDF:Unsere Konditionen (PDF, 48 KB)

• Bei anderen Dateiformaten analog(z.B. Word oder Excel)

• Bei E-Mail-Adressen nicht den Namen, sondern die Adresse verlinken:E-Mail: tiffany.wyatt@feldwaldwiese.de

© 2008 www.feldwaldwiese.de53

Sprachauszeichnung

• Anderssprachige Wörter und Abschnitte müssen ausgezeichnet werden, damit die Sprachausgabe sie richtig aussprechen kann

• Beispiel:<p>Dies ist ein deutschsprachiger

Absatz mit <span lang=„en“>some english

words</span>.</p>

© 2008 www.feldwaldwiese.de54

Navigation und Orientierung

• Aufbau der Menüs

• Bezeichnung der Menü-Optionen

• Kennzeichnung der aktuellen Menü-Option

• Breadcrumb

• Sitemap

• Suchfunktion

© 2008 www.feldwaldwiese.de55

Verständlichkeit der Sprache

• Zusammenfassung am Anfang der Seite

• Fremdwörter, Fachbegriffe und ungeläufige Abkürzungen vermeiden oder erklären

• Persönliche Ansprache, praktische Beispiele

• Kurze Sätze, ein Gedanke pro Satz

• Strukturierung mit Überschriften, Listen, Absätzen

© 2008 www.feldwaldwiese.de56

Abkürzungen und Fachbegriffe

• Abkürzungen ausschreiben (statt „z.B.“ lieber „zum Beispiel“)

• Ungeläufige Abkürzungen erläutern

• Fachbegriffe erläutern

• Glossar anbieten

© 2008 www.feldwaldwiese.de57

Valides HTML

• Für die Barrierefreiheit ist es wichtig, dass das HTML valide (gültig) ist

• Das ist in erster Linie Aufgabe der Programmierer und des CMS,aber jede neue oder bearbeitete Seite sollte einzeln überprüft werden

• HTML-Validator bei http://validator.w3c.org

© 2008 www.feldwaldwiese.de58

Accessibility Statement

• Information über das Ziel Barrierefreiheit

• Information über Bereiche, die noch nicht barrierefrei sind („Altlasten“, PDFs)

• Ansprechpartner

• Information über bestimmte Features,z.B. verschiedene Farbvarianten

• Eventuell Information über Browserfunktionen,z.B. zur Vergrößerung der Schrift

• Nicht zu lang, nicht zu technisch!