Der Weg zur Barrierefreien Webseite

1,962 views

Published on

Published in: Education, Health & Medicine
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,962
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Der Weg zur Barrierefreien Webseite

  1. 1. Der Weg zur Eric Eggert 06.11.2008 BMGFJ Barrierefreien Webseite
  2. 2. Eric Eggert Freier Webdesigner Mitglied der Webkrauts, der HTML5-WG und der BAD-TF des W3C Organisator des WebMontags und des A-Tags ’08 Webdesign seit 2001
  3. 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. 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. 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. 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
  7. 7. Eric Eggert Freier Webdesigner Mitglied der Webkrauts, der HTML5-WG und der BAD-TF des W3C Organisator des WebMontags und des A-Tags ’08 Webdesign seit 2001
  8. 8. Und wer sind Sie?
  9. 9. Die Geschichte des Barrierefreien Webdesigns ist voller Missverständnisse.
  10. 10. TheFriendlyFiend
  11. 11. Matt Seppings
  12. 12. Oporder
  13. 13. 1. Was ist Barrierefreies Webdesign 2. Barrierefreie Webseiten entwickeln 3. Webseiten überprüfen
  14. 14. Was ist Barrierefreies Webdesign?
  15. 15. „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)
  16. 16. Onlinenutzung Quelle: ARD/ZDF-Onlinestudie 2008 1998 2008
  17. 17. Quelle: Umfrage der Aktion Mensch Behinderte Menschen nutzen das Web überproportional.
  18. 18. Quelle: Umfrage der Aktion Mensch DSL ohne DSL Behinderte Menschen nutzen das Web überproportional.
  19. 19. Quelle: Umfrage der Aktion Mensch DSL ohne DSL Behinderte Menschen nutzen das Web überproportional.
  20. 20. Quelle: Umfrage der Aktion Mensch DSL ohne DSL Behinderte Menschen nutzen das Web überproportional.
  21. 21. Wozu nutzen Menschen mit Behinderung das Internet? Quelle: Umfrage der Aktion Mensch
  22. 22. Sehbehindert Blind Schwerhörig Gehörlos Motorisch behindert Lese-/Rechtschreib-Schwäche Lernbehinderung Wozu nutzen Menschen mit Behinderung das Internet? Quelle: Umfrage der Aktion Mensch
  23. 23. Sehbehindert Blind Schwerhörig Gehörlos Motorisch behindert Lese-/Rechtschreib-Schwäche Lernbehinderung Wozu nutzen Menschen mit Behinderung das Internet? Quelle: Umfrage der Aktion Mensch
  24. 24. Video
  25. 25. Video
  26. 26. Video
  27. 27. Wem helfen barrierefreie Webseiten?
  28. 28. Allen!
  29. 29. Allen! cc-by-sa Brett L., William Hook cc-by Paul Trafford
  30. 30. • 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
  31. 31. • 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
  32. 32. • 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
  33. 33. • 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
  34. 34. • 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
  35. 35. • 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
  36. 36. Was ist „Barrierefreiheit“?
  37. 37. Gesetzliche Vorschriften
  38. 38. BGG (Behindertengleichstellungsgesetz)
  39. 39. § 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)
  40. 40. BGG (Behindertengleichstellungsgesetz)
  41. 41. § 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)
  42. 42. BGG (Behindertengleichstellungsgesetz)
  43. 43. § 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)
  44. 44. WAI-Richtlinien
  45. 45. Web Accessibility Initiative des W3C WAI-Richtlinien
  46. 46. WAI-Richtlinien
  47. 47. ATAG WCAG UAAG
  48. 48. Authoring Tool Accessibility Guidelines ATAG WCAG UAAG
  49. 49. ATAG Web Content Accessibility Guidelines WCAG UAAG
  50. 50. ATAG WCAG User Agent Accessibility Guidelines UAAG
  51. 51. ATAG WCAG UAAG
  52. 52. ATAG WCAG UAAG
  53. 53. WCAG1 – 1999
  54. 54. Mit WCAG1 nicht möglich: JavaScript, Flash, PDF
  55. 55. Mit WCAG1 nicht möglich: Portable Document Format JavaScript, Flash, PDF
  56. 56. Mit WCAG1 nicht möglich: JavaScript, Flash, PDF
  57. 57. BGG (Behindertengleichstellungsgesetz)
  58. 58. § 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)
  59. 59. WCAG2 – 2008(hoffentlich)
  60. 60. AAA AA A
  61. 61. AAA AA A
  62. 62. 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
  63. 63. 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
  64. 64. 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
  65. 65. •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!
  66. 66. Quickreferenz
  67. 67. Quickreferenz
  68. 68. Quickreferenz
  69. 69. Testen, testen, testen!
  70. 70. Barrierefreie Webseiten entwickeln
  71. 71. 1. Konzeption 2. Redaktion
  72. 72. 1. Konzeption 2. Redaktion
  73. 73. Wichtig: Barrierefreiheit von Anfang an einplanen.
  74. 74. Wichtig: Barrierefreiheit von Anfang an einplanen.
  75. 75. Wichtig: Barrierefreiheit von 80/20-Regel Anfang an einplanen. (Pareto-Prinzip)
  76. 76. Wichtig: Barrierefreiheit von 80/20-Regel Anfang an einplanen. (Pareto-Prinzip)
  77. 77. • 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)
  78. 78. Wichtig: Barrierefreiheit gehört zum Handwerk (guten)
  79. 79. • Barrierefreiheit können mittlerweile „alle“ • Referenzen überprüfen • In Gesprächen herausfinden, was die Agentur überhaupt unter Barrierefreiheit versteht 1. Eine gute Agentur
  80. 80. • Bereits früh in die Entwicklung mit einbeziehen • Immer wieder Zwischenversionen überprüfen lassen 2. Externe Beratung einholen
  81. 81. • Legt fest, was Ihre Organisation unter Barrierefreiheit versteht. • Einfach „Barrierefrei“ meist nicht genug • Gibt der Agentur genaue Handlungsanweisungen • Rechtssicherheit 3. Ein Pflichtenheft
  82. 82. • Nicht der Agentur vertrauen! • Immer selbst testen und testen lassen 4. Regelmäßige Tests
  83. 83. • Einfache Usertests • Kaum Aufwand, viele Erkenntnisse 5. Hilfsmittelnutzer befragen
  84. 84. 1. Konzeption 2. Redaktion
  85. 85. 1. Konzeption 2. Redaktion
  86. 86. • 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
  87. 87. • Schulungen • Auch Redaktion in Kontakt mit Hilfsmittelnutzern bringen 2. Ein Bewusstsein für Barrierefreies Webdesign in der Organisation
  88. 88. • Redaktionelle Kontrolle • Redaktionshandbuch • interne Schulungen 3. Klare Anweisungen an Redakteur/innen
  89. 89. 4. Regelmäßige Tests
  90. 90. 5. Hilfsmittelnutzer befragen
  91. 91. Webseiten überprüfen (oder: Wie erkenne ich Barrierefreie Webseiten)
  92. 92. Maus raus!
  93. 93. Maus raus!
  94. 94. Maus raus!
  95. 95. Maus raus!
  96. 96. Maus raus!
  97. 97. Maus raus!
  98. 98. Maus raus!
  99. 99. Maus raus!
  100. 100. + Web Developer Toolbar
  101. 101. Struktur überprüfen
  102. 102. Struktur überprüfen
  103. 103. Struktur überprüfen
  104. 104. Struktur überprüfen
  105. 105. Alternativtexte für Bilder
  106. 106. Alternativtexte für Bilder
  107. 107. Alternativtexte für Bilder
  108. 108. Alternativtexte für Bilder
  109. 109. Strukturelemente hervorheben
  110. 110. Strukturelemente hervorheben
  111. 111. Strukturelemente hervorheben
  112. 112. Strukturelemente hervorheben
  113. 113. Strukturelemente hervorheben
  114. 114. http://delicious.com/yatil/bfweg http://jugendwandert.org/infos.html

×