© 2008 1 barrierefreies internet vorlesung dda am 08.03.2008 in hamburg tiffany wyatt agentur...
Post on 05-Apr-2015
104 Views
Preview:
TRANSCRIPT
© 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!
top related