- 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 ; Ort Frankfurt Datum Ausgaben Verpflegung 120,00; Ort Frankfurt Datum Ausgaben Übernachtungen 235,00; Ort Frankfurt Datum Ausgaben Trasport 92, ; Ort Frankfurt Datum Ausgaben Verpflegung 54,50; Ort Frankfurt Datum Ausgaben Übernachtungen 225,00; Ort Frankfurt Datum Ausgaben Trasport 92,00 Zwischensummen; 174,50; 460,00; 184,00; 918,50 Überschrift: Berlin ; Ort Berlin Datum Ausgaben Verpflegung 189,00; Ort Berlin Datum Ausgaben Übernachtung 220,00; Ort Berlin Datum Ausgaben Transport 75, ; Ort Berlin Datum Ausgaben Verpflegung 72,50; Ort Berlin Datum Ausgaben Übernachtung 214,00; Ort Berlin Datum Ausgaben Transport 74,00 Zwischensummen: 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