3. Eric Eggert
Freier Webdesigner HyperText Markup Language
Mitglied der Webkrauts, der HTML5-WG
und der BAD-TF des W3C
Organisator des WebMontags und des
A-Tags ’08
Webdesign seit 2001
4. Eric Eggert
Freier Webdesigner Arbeitsgruppe
Mitglied der Webkrauts, der HTML5-WG
und der BAD-TF des W3C
Organisator des WebMontags und des
A-Tags ’08
Webdesign seit 2001
5. Eric Eggert
Freier Webdesigner
Mitglied der Webkrauts, der HTML5-WG
Before and After Demo Task Force
und der BAD-TF des W3C
Organisator des WebMontags und des
A-Tags ’08
Webdesign seit 2001
6. Eric Eggert
Freier Webdesigner
Mitglied der Webkrauts, der HTML5-WG
World Wide Web Consortium
und der BAD-TF des W3C
Organisator des WebMontags und des
A-Tags ’08
Webdesign seit 2001
22. „Webdesign ist eine
inhaltszentrierte
Tätigkeit. Am Anfang
des Designprozesses
steht immer der Inhalt
und nicht etwa das
Farbschema oder die
Idee ein dreispaltiges
Layout zu verwenden.“
— „Modernes Webdesign“
von Manuela Hoffmann
(Seite 18)
36. Allen! cc-by-sa Brett L., William Hook
cc-by Paul Trafford
37. • Menschen
• mit körperlichen und geistigen
Behinderungen
• mit hohem Alter
• die ungünstigen Lichtverhältnissen
ausgesetzt sind
• mit langsamer Internetverbindung
• die temporär in ihrer Bewegung
eingeschränkt sind
Allen! cc-by-sa Brett L., William Hook
cc-by Paul Trafford
38. • Menschen
• mit körperlichen und geistigen
Behinderungen
• mit hohem Alter
• die ungünstigen Lichtverhältnissen
ausgesetzt sind
• mit langsamer Internetverbindung
• die temporär in ihrer Bewegung
eingeschränkt sind
• Mobilen Endgeräten
Allen! cc-by-sa Brett L., William Hook
cc-by Paul Trafford
39. • Menschen
• mit körperlichen und geistigen
Behinderungen
• mit hohem Alter
• die ungünstigen Lichtverhältnissen
ausgesetzt sind
• mit langsamer Internetverbindung
• die temporär in ihrer Bewegung
eingeschränkt sind
• Mobilen Endgeräten
Allen! cc-by-sa Brett L., William Hook
cc-by Paul Trafford
40. • Menschen
• mit körperlichen und geistigen
Behinderungen
• mit hohem Alter
• die ungünstigen Lichtverhältnissen
ausgesetzt sind
• mit langsamer Internetverbindung
• die temporär in ihrer Bewegung
eingeschränkt sind
• Mobilen Endgeräten
• Fernseher (Wii anyone?)
Allen! cc-by-sa Brett L., William Hook
cc-by Paul Trafford
41. • Menschen
• mit körperlichen und geistigen
Behinderungen
• mit hohem Alter
• die ungünstigen Lichtverhältnissen
ausgesetzt sind
• mit langsamer Internetverbindung
• die temporär in ihrer Bewegung
eingeschränkt sind
• Mobilen Endgeräten
• Fernseher (Wii anyone?)
Allen! cc-by-sa Brett L., William Hook
cc-by Paul Trafford
42. • Menschen
• mit körperlichen und geistigen
Behinderungen
• mit hohem Alter
• die ungünstigen Lichtverhältnissen
ausgesetzt sind
• mit langsamer Internetverbindung
• die temporär in ihrer Bewegung
eingeschränkt sind
• Mobilen Endgeräten
• Fernseher (Wii anyone?)
Allen! cc-by-sa Brett L., William Hook
cc-by Paul Trafford
46. § 8 Abs. 3
„Die Richtlinien über die Vergabe von
Förderungen des Bundes haben
vorzusehen, dass bei der Vergabe von
Förderungen … die Beachtung dieses
Bundesgesetzes … zu berücksichtigen
ist, und sichergestellt ist, dass das
geförderte Vorhaben den Grundsätzen
dieses Bundesgesetzes nicht
widerspricht.“
BGG
(Behindertengleichstellungsgesetz)
48. § 8 Abs. 5
„Barrierefrei sind ... Systeme der
Informationsverarbeitung …, wenn sie für
Menschen mit Behinderungen in der
allgemein üblichen Weise, ohne besondere
Erschwernis und grundsätzlich ohne
fremde Hilfe zugänglich und nutzbar sind.“
BGG
(Behindertengleichstellungsgesetz)
50. § 6 Abs. 5
Erläuterungen
„Das Vorliegen von Barrierefreiheit ist nach
dem Stand der technischen Entwicklung zu
beurteilen. Herangezogen werden dafür
können beispielsweise ... die WAI-Leitlinien
betreffend Angebote im Internet.“
BGG
(Behindertengleichstellungsgesetz)
65. § 6 Abs. 5
Erläuterungen
„Das Vorliegen von Barrierefreiheit ist nach
dem Stand der technischen Entwicklung zu
beurteilen. Herangezogen werden dafür
können beispielsweise ... die WAI-Leitlinien
betreffend Angebote im Internet.“
BGG
(Behindertengleichstellungsgesetz)
69. WCAG2 – A
• Textalternativen • Linkziel erkennbar
• Sinnvolle Struktur • Sprachauszeichnung
• Sinnvolle Vorlese-Sequenz • Fehlererkennung bei der
• Farbe nicht als einziges Eingabe
Unterscheidungsmerkmal • Labels für
• Möglichkeit Audioausgabe Benutzereingaben
anzuhalten • Validität
• Tastaturbenutzbarkeit • Untertitel für Audio
• Anpassbare Zeitrahmen
• Anhalten von Bewegungen
• Sprungmarken
• Seitentitel
• Reihenfolge bei
Tastaturbenutzung
70. WCAG2 – AA
• Minimaler Kontrast (5:1/3:1) • Vorschläge bei
• bis 200% Textvergrößerung Eingabefehlern
ohne Verlust von Inhalten • Fehlervermeidung bei
oder Funktionalität kritischen Transaktionen
• Mehr als ein Weg auf eine
Seite im Angebot zu stoßen
• Überschriften beschreiben
Inhalt oder Funktion
• Fokus muss sichtbar sein
• Die Sprache von Passagen
oder Phrasen muss
ausgezeichnet sein
• Konsistente Navigation
71. WCAG2 – AAA
• Minimaler Kontrast (7:1/5:1) • Nach Ablauf der Session • Kontext-Sensitive Hilfe ist
• Audio ohne oder mit leisen kann der Benutzer dort verfügbar
Hintergrundgeräuschen weitermachen, wo er • Fehlervermeidung bei allen
und ausschaltbar aufgehört hat Transaktionen
• Mechanismen zur • Links nur durch den Text • Untertitel bei Live-Audio
Anpassung der Seite sind eindeutig
vorhanden • Inhalte durch Überschriften
• Text in Bildern wird nur unterteilen
dekorativ benutzt • Definitionen für
• Tastaturbenutzbarkeit ungewöhnliche Wörter
(Ohne Ausnahme) • Text in einer einfachen
• Keine zeitkritische Sprache
Interaktion • Kontextänderungen nur
auf Nutzerveranlassung
72. •Thema zu komplex um nach
Schema F vorgehen zu können
•Wird den Menschen mit
Behinderungen nicht gerecht
•Browser und Assistive
Technologien müssen mit der
Webseite auskommen
Aber: Keine
Checklisten!
84. • Mit 20% Aufwand 80% der
Fälle abgedeckt
• 20% bis zur Perfektion be-
deuten 80% des Aufwands
Wichtig:
Barrierefreiheit von
80/20-Regel
Anfang an einplanen.
(Pareto-Prinzip)
86. • Barrierefreiheit können
mittlerweile „alle“
• Referenzen überprüfen
• In Gesprächen herausfinden, was die
Agentur überhaupt unter
Barrierefreiheit versteht
1. Eine gute Agentur
87. • Bereits früh in die Entwicklung mit
einbeziehen
• Immer wieder Zwischenversionen
überprüfen lassen
2. Externe Beratung
einholen
88. • Legt fest, was Ihre Organisation unter
Barrierefreiheit versteht.
• Einfach „Barrierefrei“ meist nicht
genug
• Gibt der Agentur genaue
Handlungsanweisungen
• Rechtssicherheit
3. Ein Pflichtenheft
89. • Nicht der Agentur vertrauen!
• Immer selbst testen und testen lassen
4. Regelmäßige Tests
90. • Einfache Usertests
• Kaum Aufwand, viele Erkenntnisse
5. Hilfsmittelnutzer
befragen
93. • Fundament für die barrierefreie Pflege
der Inhalte
• Achtung: Schlechte Plugins/
Erweiterungen können aus einem
guten Redaktionssystem ein
schlechtes machen
• Muss die Ansprüche Ihrer
Organisation erfüllen
• OpenSource? Agentur-CMS?
1. Ein gutes
Redaktionssystem
94. • Schulungen
• Auch Redaktion in Kontakt mit
Hilfsmittelnutzern bringen
2. Ein Bewusstsein für
Barrierefreies Webdesign
in der Organisation
