14. Folien - Benutzer-Homepage

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