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

© 2008 www.feldwaldwiese.de1

Barrierefreies InternetVorlesung DDAam 08.03.2008 in Hamburg

Tiffany WyattAgentur [email protected]

mailto:[email protected]


Ablauf

• Definition, Betroffene, Hilfsmittel

• Gesetzgebung, Richtlinien, Testverfahren

• Praxisteil: Webseiten

• Praxisteil: Multimedia und PDFs (optional)

• Projektmanagement für Barrierefreiheit


Barrierefreies Webdesign brauchen doch nur Blinde!

Sicher?

Nicht unsere Zielgruppe.


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


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


Wer will auf so viele Kunden verzichten?


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.


§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.


Barrierefreiheit

Zugänglichkeit

Accessibility


Wir haben eine Idee:

Lieber nicht!

Wir machen einfach eine zusätzliche Textversion


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


Universelles Design


Barrierefreie Webseiten sind hässlich …

Wirklich?

Sehen doch alle gleich aus.


Barrierefreiheit sieht man

nicht!

Beispiele

http://www.simpy.com/user/dda/tag/%22best+practice%22


Barrierefreiheit ist teuer und aufwändig …

Auf den ersten Blick.

Stimmt.


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


Mehraufwand …

bei der redaktionellen Pflege (dauerhaft)

• Alternativtexte für Bilder

• Sprachauszeichnung

• Weiterbildung der Redakteure

• Regelmäßige Qualitätskontrollen


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


Barrierefreiheit lohnt sich!


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)


Braillezeile


Arbeitsplatz


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)


Richtlinien und Gesetze

• Internationale Richtlinien des W3C

• Web Accessibility Guidelines (WCAG) 1.0

• Web Accessibility Guidelines (WCAG) 2.0

• Bundesgesetzgebung: BITV

• Ländergesetzgebung


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


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


Die 4 Prinzipien der WCAG 2.0

• Wahrnehmbarkeit

• Bedienbarkeit

• Verständlichkeit

• Robustheit


Textalternativen

alt-Attribut, title-Attribut,ausführliche Beschreibung, Bildunterschrift

Unterscheiden:

• Grafiken und Bilder

• Bedienelemente

• Dekorative Grafiken und Layoutgrafiken

• CAPTCHAS


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


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


Ü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


Weitere Strukturelemente

• Absätze mit <p> auszeichnen

• Listen mit <ul> bzw. <ol> und <li> auszeichnen

• Zitate mit <blockquote> auszeichnen


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


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


Rot-Grün-Schwäche

Mit grün fortfahren odermit rot abbrechen


Rot-Grün-Schwäche

Mit grün fortfahren odermit rot abbrechen


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


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


Unterscheidung über die Farbe


Aber Helligkeitswert zu ähnlich


Farben korrigiert


Auch in Graustufen unterscheidbar


Noch eindeutiger durch Muster


Auch in Graustufen eindeutig


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.

http://www.rohschnitt.de/drag_queen.htm


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?


Tastaturbedienbarkeit

• Alle Funktionalitäten auch ohne Maus nutzbar

• Keine Tastaturfallen einbauen!

• Sprunglinks zum Überspringen von sich wiederholenden Blöcken

• Logische Tab-Reihenfolge

• Tastaturfokus hervorheben


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


Kein Flackern!

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


Aussagekräftige Titel

• Dokumenttitel:Teil 1: Anbieter der SiteTeil 2: Kurzbeschreibung der Seite

• Aussagekräftige Überschriften und Beschriftungen (z.B. von Formularfeldern)


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>


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: [email protected]


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>


Navigation und Orientierung

• Aufbau der Menüs

• Bezeichnung der Menü-Optionen

• Kennzeichnung der aktuellen Menü-Option

• Breadcrumb

• Sitemap

• Suchfunktion


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


Abkürzungen und Fachbegriffe

• Abkürzungen ausschreiben (statt „z.B.“ lieber „zum Beispiel“)

• Ungeläufige Abkürzungen erläutern

• Fachbegriffe erläutern

• Glossar anbieten


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

http://validator.w3c.org/

http://validator.w3c.org/


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!

Documents

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