- WAI -- WAI -

• Barrierefreies Webdesign –Zugänglichkeit – Accessibility

• Die Kunst, Webseiten so zu programmieren, dass jeder sie lesen kann !

• W3C - World Wide Web Consortium Ziel: Teilnahme möglichst vieler Menschen

am Internet

• WAI: Teilorganisation von W3C

– Gestaltung barrierefreier Web-Inhalte– Erarbeitung internationaler Richtlinien:

WCAG – Web Content Accessibility Guidelines

• Anforderungen an Webseiten Programmierer– Inhaltsarchitekturen– Layout – Grundlagen– Technologie – Verwendung

• Behindertengleichstellungsgesetz– §11 Barrierefreie Informationstechnik

• Beseitigung von Benachteiligung behinderter Menschen

• Gleichberechtigte Teilnahme am Leben in der Gesellschaft

• Wen betrifft dieses Gesetz ?– Dienststellen der Bundesverwaltung (Bundesbehörden, Landesverwaltungen,

Landesunmittelbare Körperschaften, Anstalten und Stiftungen des öffentlichen Rechts)

– Institutionen, Agenturen und Unternehmen (kommerzielle Anbieter)

• Warum Webdesign barrierefrei gestalten ?– Viele Menschen haben körperliche

Einschränkungen und sind auf Hilfe angewiesen

– Navigation: schnell und orientierungsfreundlich nicht nur für behinderte sondern auch für ältere Menschen

– Betroffene Menschen:• Blinde• Sehbehinderte• Mobilitätsbehinderte• lese- und konzentrationsschwache

Menschen• Gehörlose• Ältere Menschen

• Maus- und Tastatur- orientierte Navigation meist nicht bedachtes Problem bei der Webseiten Programmierung

• Inhalte sollten unabhängig von den persönlichen und technischen Umständen zu lesen sein

• Interaktionsmöglichkeiten nutzbar für jeden

• BITV – Barrierefreie Informationstechnik – Verordnung

– entstanden auf Grundlage der Empfehlung der WAI

– Unterschiede lediglich in einigen Formulierungen

– Andere Strukturierung – kleinen Änderungen – inhaltlich fast identisch

• Positive Nebeneffekte:

– Steigerung der Besucherzahl der Webseite– Suchmaschinen können hervorragend

barrierefreie Internetseiten lesen – wichtiger Teil der

Suchmaschinenoptimierung wird nebenbei erledigt

– zukünftige Browser oder WAP-Handys funktionieren problemlos im Umgang mit barrierefreien Internetseiten

• Konformität und Priorität

– Zertifizierung auf Basis der anerkannten WAI-Richtlinien

– Drei Konformitätsstufen:

• A

• AA (Double A)

• AAA (Triple A)

• Die vier Prinzipien der Web Content Accessibility Guidelines 2.0

– Die vier Prinzipien

• Prinzip 1 - Wahrnehmbarkeit

• Prinzip 2 - Bedienbarkeit

• Prinzip 3 - Verständlichkeit

• Prinzip 4 - Robustheit der Technik

• Prinzip 1 - Wahrnehmbarkeit

– alle Informationen sowie auch Funktionen von jedem Benutzer wahrnehmbar

– Beachtung von Textorientierung sowie Farben und geeigneten Kontrasten

(wichtig für Menschen mit kognitiven Behinderungen (Wahrnehmungsstörungen) oder Sprachstörungen)

• Prinzip 2 - Bedienbarkeit

– Schnittstellenelemente im Inhalt müssen bedienbar sein

– Besonders wichtig: Geräteunabhängigkeit bei der Eingabe

– Selten nur Teilbereiche alleine mit der Tastatur bedienbar

– Kein Blinder kann einen Mauszeiger auf dem Bildschirm steuern

• Prinzip 3 - Verständlichkeit

– Inhalte und Steuerelemente müssen verständlich sein

– unterschiedliche Lernmethoden der Besucher bedenken

– Hintergrundwissen sowie Erfahrungen berücksichtigen, nicht voraussetzen

– Verständlichkeit erhöhen durch Erklärungen zu ungewöhnlichen Begriffen

• Prinzip 4 - Robustheit der Technik

– Verwendung von HTML zur Strukturierung von Informationen und CSS für das Layout und die Formatierung sind ein Aspekt der Robustheit

– Sie sollten dem heutigen und zukünftigen technischen Standard entsprechen

• Ausgabe

– Screen Reader

– Braille-Zeile

– Screen-Magnifier

• Screen Reader – Braille-Zeile

– Spezielle Software, fängt Signale vom Bildschirm ab und interpretiert sie neu

– Übersetzung in Blindenschrift über Braille-Zeile (erweiterte Tastatur)

– Ausgabe von synthetischer Sprache durch Soundkarte

Braille-Zeile

• Screen-Magnifier

– Teil der „normalen“ Darstellung wird vergrössert auf dem Bildschirm dargestellt

– Somit immer nur Teilbereich wahrnehmbar

Screen-Magnifier

• „Nur Text“-Seiten

– meist ein Link auf eine weitere Seite mit denselben Inhalten, nur ohne Grafiken

– doppelte Arbeit, Aktualität leidet

• Textgestaltung – Beachtung der Farbenwahl bei Hintergrund

und Text

– Schriftgrössen in Punktangaben nicht fix definieren

– Bei Button- und Symbol-Gestaltung ist eine überlegte Farbenwahl besonders wichtig

– Relative Grössenangaben für Frames und Tabellen sowie für Text

• Tabellen

– Oft Tabellen nur zu Layout-Zwecken genutzt

– sinnvolle und systematische Anordnung der Zelleninhalte

– Tabellenzellen, Zeile für Zeile von links nach rechts lesbar

• Datentabelle

Tabellenüberschrift: Reisekosten-ÜbersichtÜberschrift:Verpflegung;Überschrift:Übernachtung;Überschrift:Transport;ZwischensummenÜberschrift: Frankfurt a.M.15.10.2001; Ort Frankfurt Datum 15.10.2001 Ausgaben Verpflegung 120,00;Ort Frankfurt Datum 15.10.2001 Ausgaben Übernachtungen 235,00; OrtFrankfurt Datum 15.10.2001 Ausgaben Trasport 92,0016.10.2001; Ort Frankfurt Datum 16.10.2001 Ausgaben Verpflegung 54,50; OrtFrankfurt Datum 16.10.2001 Ausgaben Übernachtungen 225,00; OrtFrankfurt Datum 16.10.2001 Ausgaben Trasport 92,00Zwischensummen; 174,50; 460,00; 184,00; 918,50Überschrift: Berlin22.10.2001; Ort Berlin Datum 22.10.2001 Ausgaben Verpflegung 189,00; OrtBerlin Datum 22.10.2001 Ausgaben Übernachtung 220,00; Ort Berlin Datum22.10.2001 Ausgaben Transport 75,0023.10.2001; Ort Berlin Datum 23.10.2001 Ausgaben Verpflegung 72,50; OrtBerlin Datum 23.10.2001 Ausgaben Übernachtung 214,00; Ort Berlin Datum23.10.2001 Ausgaben Transport 74,00Zwischensummen: 261,50; 434,00; 149,00; 844,50Überschrift: Gesamtsummen; 436,00; 894,00; 333,00; 1663,00

Ein Screen-Reader würde folgendes lesen:

• Frames

– immer nur einen Frame zu einem bestimmten Zeitpunkt betrachten, dadurch Springen zwischen den Frames

– alle mit sinnvollen Namen versehen, z.B. „Navigation“ oder „Inhalt“

• Grafiken

– Keine Möglichkeit der Betrachtung von Bildern oder Grafiken, einziger Weg über den Alternativtext

– Wird Bild als Navigationslink genutzt, sollte der Text auf die dahinter stehende Information verweisen

– Abstände zwischen Textteilen oft durch „Dummys“ (transparente Grafiken)

• Formulare und Dialoge

– Formulare müssen mit der Tastatur bedienbar sein

– Beschriftungen von Eingabefeldern müssen in unmittelbarer Nähe um Fehleingaben zu vermeiden

• Testen der eigenen Homepage:

– Verschiedene Tools stehen im Internet zur Verfügung

– URL´s an Toolanbieter einsenden und prüfen lassen

– Anzeige von Grafiken im Browser deaktivieren