Download - - WAI -
![Page 1: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/1.jpg)
- WAI -- WAI -
![Page 2: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/2.jpg)
• Barrierefreies Webdesign –Zugänglichkeit – Accessibility
• Die Kunst, Webseiten so zu programmieren, dass jeder sie lesen kann !
![Page 3: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/3.jpg)
• 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
![Page 4: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/4.jpg)
• 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
![Page 5: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/5.jpg)
• 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
![Page 6: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/6.jpg)
– 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
![Page 7: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/7.jpg)
• 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
![Page 8: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/8.jpg)
• BITV – Barrierefreie Informationstechnik – Verordnung
– entstanden auf Grundlage der Empfehlung der WAI
– Unterschiede lediglich in einigen Formulierungen
– Andere Strukturierung
– kleinen Änderungen
– inhaltlich fast identisch
![Page 9: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/9.jpg)
• 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
![Page 10: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/10.jpg)
• Konformität und Priorität
– Zertifizierung auf Basis der anerkannten WAI-Richtlinien
– Drei Konformitätsstufen:
• A
• AA (Double A)
• AAA (Triple A)
![Page 11: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/11.jpg)
• 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
![Page 12: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/12.jpg)
• 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)
![Page 13: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/13.jpg)
• 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
![Page 14: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/14.jpg)
• 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
![Page 15: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/15.jpg)
• 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
![Page 16: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/16.jpg)
• Ausgabe
– Screen Reader
– Braille-Zeile
– Screen-Magnifier
![Page 17: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/17.jpg)
• 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
![Page 18: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/18.jpg)
Braille-Zeile
![Page 19: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/19.jpg)
• Screen-Magnifier
– Teil der „normalen“ Darstellung wird vergrössert auf dem Bildschirm dargestellt
– Somit immer nur Teilbereich wahrnehmbar
![Page 20: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/20.jpg)
Screen-Magnifier
![Page 21: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/21.jpg)
• „Nur Text“-Seiten
– meist ein Link auf eine weitere Seite mit denselben Inhalten, nur ohne Grafiken
– doppelte Arbeit, Aktualität leidet
![Page 22: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/22.jpg)
• 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
![Page 23: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/23.jpg)
![Page 24: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/24.jpg)
• Tabellen
– Oft Tabellen nur zu Layout-Zwecken genutzt
– sinnvolle und systematische Anordnung der Zelleninhalte
– Tabellenzellen, Zeile für Zeile von links nach rechts lesbar
![Page 25: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/25.jpg)
• Datentabelle
![Page 26: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/26.jpg)
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:
![Page 27: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/27.jpg)
• 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“
![Page 28: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/28.jpg)
• 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)
![Page 29: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/29.jpg)
• Formulare und Dialoge
– Formulare müssen mit der Tastatur bedienbar sein
– Beschriftungen von Eingabefeldern müssen in unmittelbarer Nähe um Fehleingaben zu vermeiden
![Page 30: - WAI -](https://reader036.vdokument.com/reader036/viewer/2022062315/56815196550346895dbfce31/html5/thumbnails/30.jpg)
• 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