infopar
                                  k




Barrierefreiheit

   Thomas Witt
   <thomas.witt@infopark.de>

   2005-11-...
Barrierefreiheit



   Warum?




                       © 2005 Infopark AG
                   2
Warum?




3




    © 2005 Infopark AG
Darum!




4




    © 2005 Infopark AG
Warum?




5




    © 2005 Infopark AG
Darum!




6




    © 2005 Infopark AG
Darum!




7




    © 2005 Infopark AG
Und visuell ist noch Luxus …




                                   © 2005 Infopark AG
                               8
Barrierefreiheit = Behindertengerecht?



  Barrierefreiheit bedeutet nicht
 nur behindertengerechter Zugang




         ...
Wie einige die Welt sehen …




                                   © 2005 Infopark AG
                              10
Die Realität




11




     © 2005 Infopark AG
Endgeräte: PC




12




     © 2005 Infopark AG
Endgeräte: Laptop & Tablet-PC




                                     © 2005 Infopark AG
                                ...
Endgeräte: Textbrowser




                              © 2005 Infopark AG
                         14
Endgeräte: Braille-Zeile




                                © 2005 Infopark AG
                           15
Endgeräte: Media Center & SetTop-Box




                                            © 2005 Infopark AG
                  ...
Endgeräte: PDA




17




     © 2005 Infopark AG
Endgeräte: Handies & Smartphones




                                        © 2005 Infopark AG
                          ...
Endgeräte: Portable Media Player




                                        © 2005 Infopark AG
                          ...
Endgeräte: Autos




                        © 2005 Infopark AG
                   20
Endgeräte: Kiosk / Touchscreen




                                      © 2005 Infopark AG
                              ...
Endgeräte: Kühlschrank




                              © 2005 Infopark AG
                         22
Barrierefreiheit = Behindertengerecht?


   Barrierefreiheit bedeutet vor
  allem endgeräteunabhängigen
              Zuga...
Und nun?



Wie erreiche ich Barrierefreiheit?




                                          © 2005 Infopark AG
          ...
Die landläufige Meinung …

“Da ein barrierefreies Design in den meisten
Fällen bedeutet, Abstriche bei der grafischen
    Wi...
… ist



unqualifiziert und falsch.




                                 © 2005 Infopark AG
                            26
Voraussetzungen




27




     © 2005 Infopark AG
Voraussetzungen




28




     © 2005 Infopark AG
XHTML / CSS
Zukunftsorientierte Technologie

Vorteile
 • Dezidierte Text- bzw. barrierefreie Version nicht nötig
   - zwei...
Automatischer Barrierefreiheit-Check?



  Nicht vollständig automatisiert
              prüfbar!




                    ...
Vergleich




31




     © 2005 Infopark AG
Ohne XHTML / CSS




                        © 2005 Infopark AG
                   32
Mit XHTML / CSS




33




     © 2005 Infopark AG
Und das soll ansprechend aussehen?


         Ich will sehen?

 Welcome to csszengarden.com




                          ...
35




     © 2005 Infopark AG
36




     © 2005 Infopark AG
37




     © 2005 Infopark AG
38




     © 2005 Infopark AG
39




     © 2005 Infopark AG
40




     © 2005 Infopark AG
41




     © 2005 Infopark AG
OK. Aber …



Ist das nicht viel Aufwand für
        wenig Nutzen?




                                      © 2005 Infopa...
Einige Zahlen …
Der Online-Anteil der Gesamtbevölkerung beträgt 55%

In Deutschland …
 • leben über acht Millionen Mensche...
Rechtliches
Das Verbot der Diskriminierung Behinderter ist seit 1994
Bestandteil der Grundrechte des Grundgesetzes der BRD...
Vorschriften und Standards
Bestimmungen der BITV basieren auf den ”Web Content
Accessibility Guidelines” (WCAG) des W3C

D...
Tips zur Barrierefreiheit
XHTML / CSS nutzen
 • Keine Tabellenlayouts, keine Frames
 • Anordnung der Navigation für Screen...
Infopark CMS hilft!
XHTML / CSS nutzen
 • Validator über Wizard/CustomCommand einbindbar
 • CSS auch im WYSIWYG-Editor nut...
Usability und Suchmaschinen
Die Grundsätze zur Suchmaschinenoptimierung stimmen mit
den Grundsätzen der Barrierefreiheit ü...
Zitat

"Barrierefreie Webgestaltung ist schon lange
kein Thema mehr aus der Betroffenheitsecke.
Im Gegenteil: Zugänglichke...
Vielen Dank für Ihre Aufmerksamkeit!
  http://www.infopark.de/
   • Whitepaper Barrierefreiheit
  http://www.w3.org/WAI/
 ...
Upcoming SlideShare
Loading in...5
×

Barrierefreiheit

1,401

Published on

Ein Vortrag über die Gestaltung von barrierefreien Web-Seiten, gehalten auf einem Technologie-Symposium am 2005-11-04.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,401
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Barrierefreiheit

  1. 1. infopar k Barrierefreiheit Thomas Witt <thomas.witt@infopark.de> 2005-11-04
  2. 2. Barrierefreiheit Warum? © 2005 Infopark AG 2
  3. 3. Warum? 3 © 2005 Infopark AG
  4. 4. Darum! 4 © 2005 Infopark AG
  5. 5. Warum? 5 © 2005 Infopark AG
  6. 6. Darum! 6 © 2005 Infopark AG
  7. 7. Darum! 7 © 2005 Infopark AG
  8. 8. Und visuell ist noch Luxus … © 2005 Infopark AG 8
  9. 9. Barrierefreiheit = Behindertengerecht? Barrierefreiheit bedeutet nicht nur behindertengerechter Zugang © 2005 Infopark AG 9
  10. 10. Wie einige die Welt sehen … © 2005 Infopark AG 10
  11. 11. Die Realität 11 © 2005 Infopark AG
  12. 12. Endgeräte: PC 12 © 2005 Infopark AG
  13. 13. Endgeräte: Laptop & Tablet-PC © 2005 Infopark AG 13
  14. 14. Endgeräte: Textbrowser © 2005 Infopark AG 14
  15. 15. Endgeräte: Braille-Zeile © 2005 Infopark AG 15
  16. 16. Endgeräte: Media Center & SetTop-Box © 2005 Infopark AG 16
  17. 17. Endgeräte: PDA 17 © 2005 Infopark AG
  18. 18. Endgeräte: Handies & Smartphones © 2005 Infopark AG 18
  19. 19. Endgeräte: Portable Media Player © 2005 Infopark AG 19
  20. 20. Endgeräte: Autos © 2005 Infopark AG 20
  21. 21. Endgeräte: Kiosk / Touchscreen © 2005 Infopark AG 21
  22. 22. Endgeräte: Kühlschrank © 2005 Infopark AG 22
  23. 23. Barrierefreiheit = Behindertengerecht? Barrierefreiheit bedeutet vor allem endgeräteunabhängigen Zugang © 2005 Infopark AG 23
  24. 24. Und nun? Wie erreiche ich Barrierefreiheit? © 2005 Infopark AG 24
  25. 25. Die landläufige Meinung … “Da ein barrierefreies Design in den meisten Fällen bedeutet, Abstriche bei der grafischen Wirkung der Site machen zu müssen, empfiehlt es sich, zwei Versionen einer Webseite anzubieten: eine allgemeine und eine barrierefreie. - Internet Professionell 07/2003 © 2005 Infopark AG 25
  26. 26. … ist unqualifiziert und falsch. © 2005 Infopark AG 26
  27. 27. Voraussetzungen 27 © 2005 Infopark AG
  28. 28. Voraussetzungen 28 © 2005 Infopark AG
  29. 29. XHTML / CSS Zukunftsorientierte Technologie Vorteile • Dezidierte Text- bzw. barrierefreie Version nicht nötig - zwei Versionen sind per definitionem NICHT barrierefrei! • Trennung der Ausgabeformatierung und des Inhalts • Aufbau der XHTML-Seite unabhängig von der Darstellung • Spezielle Formatierungen für verschiedene Ausgabegeräte Nachteile • Nur neuere Browser können CSS korrekt darstellen • Unterschiede in der Implementierung / Darstellung • Schlechteste CSS-Darstellung: Internet Explorer © 2005 Infopark AG Aber 29
  30. 30. Automatischer Barrierefreiheit-Check? Nicht vollständig automatisiert prüfbar! © 2005 Infopark AG 30
  31. 31. Vergleich 31 © 2005 Infopark AG
  32. 32. Ohne XHTML / CSS © 2005 Infopark AG 32
  33. 33. Mit XHTML / CSS 33 © 2005 Infopark AG
  34. 34. Und das soll ansprechend aussehen? Ich will sehen? Welcome to csszengarden.com © 2005 Infopark AG 34
  35. 35. 35 © 2005 Infopark AG
  36. 36. 36 © 2005 Infopark AG
  37. 37. 37 © 2005 Infopark AG
  38. 38. 38 © 2005 Infopark AG
  39. 39. 39 © 2005 Infopark AG
  40. 40. 40 © 2005 Infopark AG
  41. 41. 41 © 2005 Infopark AG
  42. 42. OK. Aber … Ist das nicht viel Aufwand für wenig Nutzen? © 2005 Infopark AG 42
  43. 43. Einige Zahlen … Der Online-Anteil der Gesamtbevölkerung beträgt 55% In Deutschland … • leben über acht Millionen Menschen mit Behinderung • sind mehr als 500.000 Menschen sehbehindert • leiden knapp 10% der Männer an einer Rot-Grün-Schwäche 50% der über über 10 Millionen 50-jährigen nutzen das Internet Über 80% aller Blinden nutzen das Internet • 50% derer bezeichnen sich als erfahrene Nutzer Aber … © 2005 Infopark AG • Nur 3,9% der deutschen Web-Seiten sind standardkonform • Über 50% der gesuchten Informationen werden aufgrund 43
  44. 44. Rechtliches Das Verbot der Diskriminierung Behinderter ist seit 1994 Bestandteil der Grundrechte des Grundgesetzes der BRD. Details im Behindertengleichstellungsgesetz, ergänzt durch die “Verordnung zur Schaffung barrierefreier Informationstechnik nach dem Behindertengleichstellungsgesetz“ (BITV) • Bundesbehörden sind verpflichtet, ihre Web-Angebote barrierefrei zu gestalten • Die Behörden der Bundesländer werden dieser Pflicht in absehbarer Zeit ebenfalls unterliegen • Die Spitzenverbände der Wirtschaft verhandeln mit den Interessenvertretungen der Behinderten über Freiwilligkeitsvereinbarungen © 2005 Infopark AG In den USA gibt es vergleichbare Gesetze (“Section 508”) 44
  45. 45. Vorschriften und Standards Bestimmungen der BITV basieren auf den ”Web Content Accessibility Guidelines” (WCAG) des W3C Drei Prioritätsstufen • A / AA / AAA BITV-Vorschrift • Alle Anforderungen der Prioritäten A und AA der WCAG sind von sämtlichen Bereichen der betroffenen Webangebote zu erfüllen • Zentrale Navigations- und Einstiegsangebote müssen zusätzlich die Anforderungen der Priorität AAA erfüllen © 2005 Infopark AG 45
  46. 46. Tips zur Barrierefreiheit XHTML / CSS nutzen • Keine Tabellenlayouts, keine Frames • Anordnung der Navigation für Screenreader • Tab-Reihenfolge Alternativtexte für Nicht-Text-Elemente • Bilder • Links Nutzung von <link>-Tags • Einfachere Navigation Nichtverwenden bestimmter Tags und Attribute © 2005 Infopark AG • Blink • Farbkombinationen 46
  47. 47. Infopark CMS hilft! XHTML / CSS nutzen • Validator über Wizard/CustomCommand einbindbar • CSS auch im WYSIWYG-Editor nutzbar Alternativtexte für Nicht-Text-Elemente • Werden automatisch erzeugt Nutzung von <link>-Tags • Werden automatisch erzeugt Nichtverwenden bestimmter Tags und Attribute • Kann gefiltert werden © 2005 Infopark AG Einbinden von weiteren Checks • über NPS-Callbacks möglich 47
  48. 48. Usability und Suchmaschinen Die Grundsätze zur Suchmaschinenoptimierung stimmen mit den Grundsätzen der Barrierefreiheit überein, z. B.: • Vermeiden von Frames • Vermeiden von Flash, JavaScript, etc. als einzige Navigation • Logische URL- und Link-Struktur mit Klarnamen • Valides (X)HTML • Geringe Ladezeiten Wer seine Seiten so gestaltet, dass blinde Nutzer sie problemlos lesen können, erledigt dabei einen großen und wichtigen Teil der Suchmaschinenoptimierung gleich mit. Denn Web-Seiten, die für Blinde zugänglich sind, sind es auch für Suchmaschinen. © 2005 Infopark AG Die Optimierung von Web-Sites hinsichtlich barrierefreien Designs erleichtert die Nutzung eines Web-Angebots nicht nur 48
  49. 49. Zitat "Barrierefreie Webgestaltung ist schon lange kein Thema mehr aus der Betroffenheitsecke. Im Gegenteil: Zugänglichkeit für alle Nutzer bedeutet in aller Regel auch Zukunftsfähigkeit.“ Iris Cornelssen Projektleiterin für den Biene-Wettbewerb bei der Aktion Mensch © 2005 Infopark AG 49
  50. 50. Vielen Dank für Ihre Aufmerksamkeit! http://www.infopark.de/ • Whitepaper Barrierefreiheit http://www.w3.org/WAI/ • W3C-Homepage http://www.einfach-fuer-alle.de/ • Deutsche Site zum Thema Barrierefreiheit http://bobby.watchfire.com/ • Halbautomatisierter Site-Check http://colorfilter.wickline.org/ © 2005 Infopark AG • Seiten mit der Sicht einer Farbsehschwäche 50
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×