Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "© 2008 1 Barrierefreies Internet Vorlesung DDA am 08.03.2008 in Hamburg Tiffany Wyatt Agentur feld.wald.wiese"—  Präsentation transkript:

1 © 2008 www.feldwaldwiese.de 1 Barrierefreies Internet Vorlesung DDA am 08.03.2008 in Hamburg Tiffany Wyatt Agentur feld.wald.wiese tiffany.wyatt@feldwaldwiese.de tiffany.wyatt@feldwaldwiese.de

2 © 2008 www.feldwaldwiese.de 2 Ablauf Definition, Betroffene, Hilfsmittel Gesetzgebung, Richtlinien, Testverfahren Praxisteil: Webseiten Praxisteil: Multimedia und PDFs (optional) Projektmanagement für Barrierefreiheit

3 © 2008 www.feldwaldwiese.de 3 Barrierefreies Webdesign brauchen doch nur Blinde! Sicher? Nicht unsere Zielgruppe.

4 © 2008 www.feldwaldwiese.de 4 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

5 © 2008 www.feldwaldwiese.de 5 … 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 …

6 © 2008 www.feldwaldwiese.de 6 Wer will auf so viele Kunden verzichten?

7 © 2008 www.feldwaldwiese.de 7 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.

8 © 2008 www.feldwaldwiese.de 8 §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.

9 © 2008 www.feldwaldwiese.de 9 Barrierefreiheit Zugänglichkeit Accessibility

10 © 2008 www.feldwaldwiese.de 10 Wir haben eine Idee: Lieber nicht! Wir machen einfach eine zusätzliche Textversion

11 © 2008 www.feldwaldwiese.de 11 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

12 © 2008 www.feldwaldwiese.de 12 Universelles Design

13 © 2008 www.feldwaldwiese.de 13 Barrierefreie Webseiten sind hässlich … Wirklich? Sehen doch alle gleich aus.

14 © 2008 www.feldwaldwiese.de 14 Barrierefreiheit sieht man nicht! Beispiele Beispiele

15 © 2008 www.feldwaldwiese.de 15 Barrierefreiheit ist teuer und aufwändig … Auf den ersten Blick. Stimmt.

16 © 2008 www.feldwaldwiese.de 16 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

17 © 2008 www.feldwaldwiese.de 17 Mehraufwand … bei der redaktionellen Pflege (dauerhaft) Alternativtexte für Bilder Sprachauszeichnung Weiterbildung der Redakteure Regelmäßige Qualitätskontrollen

18 © 2008 www.feldwaldwiese.de 18 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

19 © 2008 www.feldwaldwiese.de 19 Barrierefreiheit lohnt sich!

20 © 2008 www.feldwaldwiese.de 20 Hilfsmittel für Blinde Screenreader Zum Auslesen des Bildschirminhalts, zum Beispiel von Text, Menüs, Kontrollelementen, Webseiten Sprachausgabe Zur Ausgabe in gesprochener Sprache Braillezeile Zur Ausgabe in Blindenschrift (Braille)

21 © 2008 www.feldwaldwiese.de 21 Braillezeile

22 © 2008 www.feldwaldwiese.de 22 Arbeitsplatz

23 © 2008 www.feldwaldwiese.de 23 Rechtliche Rahmenbedingungen 11/1994:§3 Grundgesetz: Niemand darf wegen seiner Behinderung benachteiligt werden 05/2002:Behindertengleichstellungsgesetz (BGG) §11: Barrierefreie Informationstechnik 07/2002:Barrierefreie Informationstechnik Verordnung (BITV) – basierend auf den Richtlinien der W3C Web Accessibilty Iniative (WAI)

24 © 2008 www.feldwaldwiese.de 24 Richtlinien und Gesetze Internationale Richtlinien des W3C Web Accessibility Guidelines (WCAG) 1.0 Web Accessibility Guidelines (WCAG) 2.0 Bundesgesetzgebung: BITV Ländergesetzgebung

25 © 2008 www.feldwaldwiese.de 25 Stufen der Barrierefreiheit BITVWAI / 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 2Priorität 3 (Kann-Kriterium) Konformitätsstufe AAA

26 © 2008 www.feldwaldwiese.de 26 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

27 © 2008 www.feldwaldwiese.de 27 Die 4 Prinzipien der WCAG 2.0 Wahrnehmbarkeit Bedienbarkeit Verständlichkeit Robustheit

28 © 2008 www.feldwaldwiese.de 28 Textalternativen alt-Attribut, title-Attribut, ausführliche Beschreibung, Bildunterschrift Unterscheiden: Grafiken und Bilder Bedienelemente Dekorative Grafiken und Layoutgrafiken CAPTCHAS

29 © 2008 www.feldwaldwiese.de 29 Bilder und Grafiken Photos und Illustrationen Kurze 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 Infografiken Kurze Beschreibung in das alt-Attribut, zusätzliche separate ausführliche Beschreibung

30 © 2008 www.feldwaldwiese.de 30 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

31 © 2008 www.feldwaldwiese.de 31 Überschriften Überschriften sind insbesondere für blinde Benutzer sehr wichtig (gezielte Navigation innerhalb der Seite) Hauptüberschrift der Seite mit auszeichnen Alle weiteren Überschriften mit bis auszeichnen

32 © 2008 www.feldwaldwiese.de 32 Weitere Strukturelemente Absätze mit auszeichnen Listen mit bzw. und auszeichnen Zitate mit auszeichnen

33 © 2008 www.feldwaldwiese.de 33 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

34 © 2008 www.feldwaldwiese.de 34 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

35 © 2008 www.feldwaldwiese.de 35 Rot-Grün-Schwäche Mit grün fortfahren oder mit rot abbrechen

36 © 2008 www.feldwaldwiese.de 36 Rot-Grün-Schwäche Mit grün fortfahren oder mit rot abbrechen

37 © 2008 www.feldwaldwiese.de 37 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

38 © 2008 www.feldwaldwiese.de 38 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

39 © 2008 www.feldwaldwiese.de 39 Unterscheidung über die Farbe

40 © 2008 www.feldwaldwiese.de 40 Aber Helligkeitswert zu ähnlich

41 © 2008 www.feldwaldwiese.de 41 Farben korrigiert

42 © 2008 www.feldwaldwiese.de 42 Auch in Graustufen unterscheidbar

43 © 2008 www.feldwaldwiese.de 43 Noch eindeutiger durch Muster

44 © 2008 www.feldwaldwiese.de 44 Auch in Graustufen eindeutig

45 © 2008 www.feldwaldwiese.de 45 Kontraste prüfen Hexadezimalwerte von Vordergrund (Text) und Hintergrund ermitteln Werte z.B. eingeben bei: http://www.rohschnitt.de/drag_queen.htm 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.

46 © 2008 www.feldwaldwiese.de 46 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?

47 © 2008 www.feldwaldwiese.de 47 Tastaturbedienbarkeit Alle Funktionalitäten auch ohne Maus nutzbar Keine Tastaturfallen einbauen! Sprunglinks zum Überspringen von sich wiederholenden Blöcken Logische Tab-Reihenfolge Tastaturfokus hervorheben

48 © 2008 www.feldwaldwiese.de 48 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

49 © 2008 www.feldwaldwiese.de 49 Kein Flackern! Farb- oder Musterwechsel mit hoher Frequenz (mehr als 3 Wechsel pro Sekunde) können epileptische Anfälle verursachen!

50 © 2008 www.feldwaldwiese.de 50 Aussagekräftige Titel Dokumenttitel: Teil 1: Anbieter der Site Teil 2: Kurzbeschreibung der Seite Aussagekräftige Überschriften und Beschriftungen (z.B. von Formularfeldern)

51 © 2008 www.feldwaldwiese.de 51 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: mehr

52 © 2008 www.feldwaldwiese.de 52 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

53 © 2008 www.feldwaldwiese.de 53 Sprachauszeichnung Anderssprachige Wörter und Abschnitte müssen ausgezeichnet werden, damit die Sprachausgabe sie richtig aussprechen kann Beispiel: Dies ist ein deutschsprachiger Absatz mit some english words.

54 © 2008 www.feldwaldwiese.de 54 Navigation und Orientierung Aufbau der Menüs Bezeichnung der Menü-Optionen Kennzeichnung der aktuellen Menü-Option Breadcrumb Sitemap Suchfunktion

55 © 2008 www.feldwaldwiese.de 55 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

56 © 2008 www.feldwaldwiese.de 56 Abkürzungen und Fachbegriffe Abkürzungen ausschreiben (statt z.B. lieber zum Beispiel) Ungeläufige Abkürzungen erläutern Fachbegriffe erläutern Glossar anbieten

57 © 2008 www.feldwaldwiese.de 57 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.orghttp://validator.w3c.org

58 © 2008 www.feldwaldwiese.de 58 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!


Herunterladen ppt "© 2008 1 Barrierefreies Internet Vorlesung DDA am 08.03.2008 in Hamburg Tiffany Wyatt Agentur feld.wald.wiese"

Ähnliche Präsentationen


Google-Anzeigen