Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

Barrierefreies Internet

Ähnliche Präsentationen


Präsentation zum Thema: "Barrierefreies Internet"—  Präsentation transkript:

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

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

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

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

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

6 Wer will auf so viele Kunden verzichten?
© 2008

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

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

9 Barrierefreiheit Zugänglichkeit Accessibility
© 2008

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

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

12 Universelles Design © 2008

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

14 Barrierefreiheit sieht man nicht! Beispiele
© 2008

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

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

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

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

19 Barrierefreiheit lohnt sich!
© 2008

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

21 Braillezeile © 2008

22 Arbeitsplatz © 2008

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

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

25 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

26 Testverfahren BITV-Test von BIK BITV-Selbstbewertung 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

27 Die 4 Prinzipien der WCAG 2.0
Wahrnehmbarkeit Bedienbarkeit Verständlichkeit Robustheit © 2008

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

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

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

31 Ü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

32 Weitere Strukturelemente
Absätze mit <p> auszeichnen Listen mit <ul> bzw. <ol> und <li> auszeichnen Zitate mit <blockquote> auszeichnen © 2008

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

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

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

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

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

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

39 Unterscheidung über die Farbe
© 2008

40 Aber Helligkeitswert zu ähnlich
© 2008

41 Farben korrigiert © 2008

42 Auch in Graustufen unterscheidbar
© 2008

43 Noch eindeutiger durch Muster
© 2008

44 Auch in Graustufen eindeutig
© 2008

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

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

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

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

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

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

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: <a href=„konditionen.html“ title=„Unsere Konditionen“>mehr</a> © 2008

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

53 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

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

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

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

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

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


Herunterladen ppt "Barrierefreies Internet"

Ähnliche Präsentationen


Google-Anzeigen