300 likes | 497 Vues
- 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
E N D
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
Screen-Magnifier • Teil der „normalen“ Darstellung wird vergrössert auf dem Bildschirm dargestellt • Somit immer nur Teilbereich wahrnehmbar
„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
Ein Screen-Reader würde folgendes lesen: 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; Ort Frankfurt Datum 15.10.2001 Ausgaben Trasport 92,00 16.10.2001; Ort Frankfurt Datum 16.10.2001 Ausgaben Verpflegung 54,50; Ort Frankfurt Datum 16.10.2001 Ausgaben Übernachtungen 225,00; Ort Frankfurt Datum 16.10.2001 Ausgaben Trasport 92,00 Zwischensummen; 174,50; 460,00; 184,00; 918,50 Überschrift: Berlin 22.10.2001; Ort Berlin Datum 22.10.2001 Ausgaben Verpflegung 189,00; Ort Berlin Datum 22.10.2001 Ausgaben Übernachtung 220,00; Ort Berlin Datum 22.10.2001 Ausgaben Transport 75,00 23.10.2001; Ort Berlin Datum 23.10.2001 Ausgaben Verpflegung 72,50; Ort Berlin Datum 23.10.2001 Ausgaben Übernachtung 214,00; Ort Berlin Datum 23.10.2001 Ausgaben Transport 74,00 Zwischensummen: 261,50; 434,00; 149,00; 844,50 Überschrift: Gesamtsummen; 436,00; 894,00; 333,00; 1663,00
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