1 / 30

- 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

lorna
Download Presentation

- WAI -

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. - WAI -

  2. Barrierefreies Webdesign –Zugänglichkeit – Accessibility • Die Kunst, Webseiten so zu programmieren, dass jeder sie lesen kann !

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

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

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

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

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

  8. BITV – Barrierefreie Informationstechnik – Verordnung • entstanden auf Grundlage der Empfehlung der WAI • Unterschiede lediglich in einigen Formulierungen • Andere Strukturierung • kleinen Änderungen • inhaltlich fast identisch

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

  10. Konformität und Priorität • Zertifizierung auf Basis der anerkannten WAI-Richtlinien • Drei Konformitätsstufen: • A • AA (Double A) • AAA (Triple A)

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

  12. 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)

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

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

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

  16. Ausgabe • Screen Reader • Braille-Zeile • Screen-Magnifier

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

  18. Braille-Zeile

  19. Screen-Magnifier • Teil der „normalen“ Darstellung wird vergrössert auf dem Bildschirm dargestellt • Somit immer nur Teilbereich wahrnehmbar

  20. Screen-Magnifier

  21. „Nur Text“-Seiten • meist ein Link auf eine weitere Seite mit denselben Inhalten, nur ohne Grafiken • doppelte Arbeit, Aktualität leidet

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

  23. Tabellen • Oft Tabellen nur zu Layout-Zwecken genutzt • sinnvolle und systematische Anordnung der Zelleninhalte • Tabellenzellen, Zeile für Zeile von links nach rechts lesbar

  24. Datentabelle

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

  26. 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“

  27. 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)

  28. Formulare und Dialoge • Formulare müssen mit der Tastatur bedienbar sein • Beschriftungen von Eingabefeldern müssen in unmittelbarer Nähe um Fehleingaben zu vermeiden

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

More Related