Die Präsentation wird geladen. Bitte warten

Die Präsentation wird geladen. Bitte warten

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

Ähnliche Präsentationen


Präsentation zum Thema: "- WAI -. Barrierefreies Webdesign – Zugänglichkeit – Accessibility Die Kunst, Webseiten so zu programmieren, dass jeder sie lesen kann !"—  Präsentation transkript:

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

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

25 Datentabelle

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

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

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

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

30 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


Herunterladen ppt "- WAI -. Barrierefreies Webdesign – Zugänglichkeit – Accessibility Die Kunst, Webseiten so zu programmieren, dass jeder sie lesen kann !"

Ähnliche Präsentationen


Google-Anzeigen