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 © Barrierefreies Internet Vorlesung DDA am in Hamburg Tiffany Wyatt Agentur feld.wald.wiese

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

3 © Barrierefreies Webdesign brauchen doch nur Blinde! Sicher? Nicht unsere Zielgruppe.

4 © In Deutschland leben 6,7 Millionen schwerbehinderte Menschen (8% der Bevölkerung) blinde Menschen sehbehinderte Menschen 7% farbenblinde Männer mindestens hörgeschädigte Menschen mindestens 4 Millionen Analphabeten

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 © Wer will auf so viele Kunden verzichten?

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 © §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 © Barrierefreiheit Zugänglichkeit Accessibility

10 © Wir haben eine Idee: Lieber nicht! Wir machen einfach eine zusätzliche Textversion

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 © Universelles Design

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

14 © Barrierefreiheit sieht man nicht! Beispiele Beispiele

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

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 © Mehraufwand … bei der redaktionellen Pflege (dauerhaft) Alternativtexte für Bilder Sprachauszeichnung Weiterbildung der Redakteure Regelmäßige Qualitätskontrollen

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 © Barrierefreiheit lohnt sich!

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 © Braillezeile

22 © Arbeitsplatz

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 © Richtlinien und Gesetze Internationale Richtlinien des W3C Web Accessibility Guidelines (WCAG) 1.0 Web Accessibility Guidelines (WCAG) 2.0 Bundesgesetzgebung: BITV Ländergesetzgebung

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 © 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 © Die 4 Prinzipien der WCAG 2.0 Wahrnehmbarkeit Bedienbarkeit Verständlichkeit Robustheit

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

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 © 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 © Ü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 © Weitere Strukturelemente Absätze mit auszeichnen Listen mit bzw. und auszeichnen Zitate mit auszeichnen

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 © 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 © Rot-Grün-Schwäche Mit grün fortfahren oder mit rot abbrechen

36 © Rot-Grün-Schwäche Mit grün fortfahren oder mit rot abbrechen

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 © 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 © Unterscheidung über die Farbe

40 © Aber Helligkeitswert zu ähnlich

41 © Farben korrigiert

42 © Auch in Graustufen unterscheidbar

43 © Noch eindeutiger durch Muster

44 © Auch in Graustufen eindeutig

45 © Kontraste prüfen Hexadezimalwerte von Vordergrund (Text) und Hintergrund ermitteln Werte z.B. eingeben bei: BITV-Test: Helligkeitsdifferenz muss bei Grafiken mindestens 125, beim Hauptfließtext inkl. Überschriften auch 125 und bei allen anderen Texten 110 betragen.

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 © 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 © 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 © Kein Flackern! Farb- oder Musterwechsel mit hoher Frequenz (mehr als 3 Wechsel pro Sekunde) können epileptische Anfälle verursachen!

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 © 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 © Dateiformat angeben Barrierefreier Link auf ein PDF: Unsere Konditionen (PDF, 48 KB) Bei anderen Dateiformaten analog (z.B. Word oder Excel) Bei -Adressen nicht den Namen, sondern die Adresse verlinken:

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 © Navigation und Orientierung Aufbau der Menüs Bezeichnung der Menü-Optionen Kennzeichnung der aktuellen Menü-Option Breadcrumb Sitemap Suchfunktion

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 © 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 © 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

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