Barrierefreies Internet

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

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

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

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

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: Wir machen einfach eine zusätzliche Textversion
Lieber nicht! ©

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 …
Sehen doch alle gleich aus. Wirklich? ©

14 Barrierefreiheit sieht man nicht! Beispiele
©

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

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

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 ©

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 <h1> auszeichnen Alle weiteren Überschriften mit <h2> bis <h6> auszeichnen ©

32 Weitere Strukturelemente
Absätze mit <p> auszeichnen Listen mit <ul> bzw. <ol> und <li> auszeichnen Zitate mit <blockquote> 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: <a href=„konditionen.html“ title=„Unsere Konditionen“>mehr</a> ©

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: <p>Dies ist ein deutschsprachiger Absatz mit <span lang=„en“>some english words</span>.</p> ©

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