- wai -. barrierefreies webdesign – zugänglichkeit – accessibility die kunst, webseiten so zu...
Post on 06-Apr-2016
218 Views
Preview:
TRANSCRIPT
- 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
top related