Der Weg zur   Eric Eggert
              06.11.2008
                BMGFJ




Barrierefreien
Webseite
Eric Eggert
Freier Webdesigner
Mitglied der Webkrauts, der HTML5-WG
und der BAD-TF des W3C
Organisator des WebMontags und ...
Eric Eggert
Freier Webdesigner   HyperText Markup Language




Mitglied der Webkrauts, der HTML5-WG
und der BAD-TF des W3C...
Eric Eggert
Freier Webdesigner            Arbeitsgruppe




Mitglied der Webkrauts, der HTML5-WG
und der BAD-TF des W3C
Or...
Eric Eggert
Freier Webdesigner
Mitglied der Webkrauts, der HTML5-WG
   Before and After Demo Task Force



und der BAD-TF ...
Eric Eggert
Freier Webdesigner
Mitglied der Webkrauts, der HTML5-WG
               World Wide Web Consortium



und der BA...
Eric Eggert
Freier Webdesigner
Mitglied der Webkrauts, der HTML5-WG
und der BAD-TF des W3C
Organisator des WebMontags und ...
Und wer sind Sie?
Die Geschichte
des Barrierefreien
Webdesigns ist voller
Missverständnisse.
TheFriendlyFiend
Matt Seppings
Oporder
1. Was ist Barrierefreies
   Webdesign
2. Barrierefreie Webseiten
   entwickeln
3. Webseiten überprüfen
Was ist
Barrierefreies
 Webdesign?
„Webdesign ist eine
    inhaltszentrierte
 Tätigkeit. Am Anfang
 des Designprozesses
steht immer der Inhalt
  und nicht et...
Onlinenutzung   Quelle: ARD/ZDF-Onlinestudie 2008   1998
                                                    2008
Quelle: Umfrage der Aktion Mensch




Behinderte Menschen
nutzen das Web
überproportional.
Quelle: Umfrage der Aktion Mensch
         DSL   ohne DSL




Behinderte Menschen
nutzen das Web
überproportional.
Quelle: Umfrage der Aktion Mensch
         DSL   ohne DSL




Behinderte Menschen
nutzen das Web
überproportional.
Quelle: Umfrage der Aktion Mensch
         DSL   ohne DSL




Behinderte Menschen
nutzen das Web
überproportional.
Wozu nutzen
Menschen mit
Behinderung das
Internet?         Quelle: Umfrage der Aktion Mensch
Sehbehindert                  Blind             Schwerhörig   Gehörlos      Motorisch behindert
 Lese-/Rechtschreib-Schwäc...
Sehbehindert                  Blind             Schwerhörig   Gehörlos      Motorisch behindert
 Lese-/Rechtschreib-Schwäc...
Video
Video
Video
Wem helfen
barrierefreie
Webseiten?
Allen!
Allen!   cc-by-sa Brett L., William Hook
         cc-by Paul Trafford
• Menschen
           • mit körperlichen und geistigen
            Behinderungen
          • mit hohem Alter
          • d...
• Menschen
           • mit körperlichen und geistigen
            Behinderungen
          • mit hohem Alter
          • d...
• Menschen
           • mit körperlichen und geistigen
            Behinderungen
          • mit hohem Alter
          • d...
• Menschen
           • mit körperlichen und geistigen
            Behinderungen
          • mit hohem Alter
          • d...
• Menschen
           • mit körperlichen und geistigen
            Behinderungen
          • mit hohem Alter
          • d...
• Menschen
           • mit körperlichen und geistigen
            Behinderungen
          • mit hohem Alter
          • d...
Was ist
„Barrierefreiheit“?
Gesetzliche
Vorschriften
BGG
(Behindertengleichstellungsgesetz)
§ 8 Abs. 3
                            „Die Richtlinien über die Vergabe von
                            Förderungen des B...
BGG
(Behindertengleichstellungsgesetz)
§ 8 Abs. 5
                            „Barrierefrei sind ... Systeme der
                            Informationsverarbei...
BGG
(Behindertengleichstellungsgesetz)
§ 6 Abs. 5
                            Erläuterungen
                            „Das Vorliegen von Barrierefreiheit ist n...
WAI-Richtlinien
Web Accessibility Initiative des W3C




     WAI-Richtlinien
WAI-Richtlinien
ATAG
WCAG
UAAG
Authoring Tool Accessibility Guidelines




ATAG
WCAG
UAAG
ATAG
Web Content Accessibility Guidelines




      WCAG
      UAAG
ATAG
WCAG
 User Agent Accessibility Guidelines




UAAG
ATAG
WCAG
UAAG
ATAG
WCAG
UAAG
WCAG1 – 1999
Mit WCAG1 nicht
möglich:
JavaScript, Flash, PDF
Mit WCAG1 nicht
möglich:       Portable Document Format




JavaScript, Flash, PDF
Mit WCAG1 nicht
möglich:
JavaScript, Flash, PDF
BGG
(Behindertengleichstellungsgesetz)
§ 6 Abs. 5
                            Erläuterungen
                            „Das Vorliegen von Barrierefreiheit ist n...
WCAG2 – 2008(hoffentlich)
AAA
 AA
  A
AAA
 AA
  A
WCAG2 – A
• Textalternativen            • Linkziel erkennbar
• Sinnvolle Struktur          • Sprachauszeichnung
• Sinnvoll...
WCAG2 – AA
• Minimaler Kontrast (5:1/3:1)   • Vorschläge bei
• bis 200% Textvergrößerung        Eingabefehlern
  ohne Verl...
WCAG2 – AAA
• Minimaler Kontrast (7:1/5:1)   • Nach Ablauf der Session       • Kontext-Sensitive Hilfe ist
• Audio ohne od...
•Thema zu komplex um nach
            Schema F vorgehen zu können
           •Wird den Menschen mit
            Behinderun...
Quickreferenz
Quickreferenz
Quickreferenz
Testen, testen, testen!
Barrierefreie
 Webseiten
 entwickeln
1. Konzeption
 2. Redaktion
1. Konzeption
 2. Redaktion
Wichtig:
Barrierefreiheit von
Anfang an einplanen.
Wichtig:
Barrierefreiheit von
Anfang an einplanen.
Wichtig:
Barrierefreiheit von
80/20-Regel
Anfang an einplanen.
(Pareto-Prinzip)
Wichtig:
Barrierefreiheit von
80/20-Regel
Anfang an einplanen.
(Pareto-Prinzip)
• Mit 20% Aufwand 80% der
                     Fälle abgedeckt
                   • 20% bis zur Perfektion be-
           ...
Wichtig:
Barrierefreiheit gehört
zum Handwerk
    (guten)
• Barrierefreiheit können
              mittlerweile „alle“
            • Referenzen überprüfen
            • In Gespräche...
• Bereits früh in die Entwicklung mit
              einbeziehen
            • Immer wieder Zwischenversionen
             ...
• Legt fest, was Ihre Organisation unter
              Barrierefreiheit versteht.
            • Einfach „Barrierefrei“ mei...
• Nicht der Agentur vertrauen!
            • Immer selbst testen und testen lassen




4. Regelmäßige Tests
• Einfache Usertests
             • Kaum Aufwand, viele Erkenntnisse




5. Hilfsmittelnutzer
befragen
1. Konzeption
 2. Redaktion
1. Konzeption
 2. Redaktion
• Fundament für die barrierefreie Pflege
            der Inhalte
          • Achtung: Schlechte Plugins/
            Erweit...
• Schulungen
            • Auch Redaktion in Kontakt mit
             Hilfsmittelnutzern bringen




2. Ein Bewusstsein fü...
• Redaktionelle Kontrolle
           • Redaktionshandbuch
           • interne Schulungen




3. Klare Anweisungen
an Reda...
4. Regelmäßige Tests
5. Hilfsmittelnutzer
befragen
Webseiten
 überprüfen
(oder: Wie erkenne ich Barrierefreie Webseiten)
Maus raus!
Maus raus!
Maus raus!
Maus raus!
Maus raus!
Maus raus!
Maus raus!
Maus raus!
+ Web Developer
        Toolbar
Struktur überprüfen
Struktur überprüfen
Struktur überprüfen
Struktur überprüfen
Alternativtexte für
Bilder
Alternativtexte für
Bilder
Alternativtexte für
Bilder
Alternativtexte für
Bilder
Strukturelemente
hervorheben
Strukturelemente
hervorheben
Strukturelemente
hervorheben
Strukturelemente
hervorheben
Strukturelemente
hervorheben
http://delicious.com/yatil/bfweg
http://jugendwandert.org/infos.html
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien Webseite
Der Weg zur Barrierefreien Webseite
Nächste SlideShare
Wird geladen in …5
×

Der Weg zur Barrierefreien Webseite

1.914 Aufrufe

Veröffentlicht am

Veröffentlicht in: Bildung, Gesundheit & Medizin
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.914
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
27
Aktionen
Geteilt
0
Downloads
2
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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

×