Dörte Deimig BARRIEREFREIES INTERNET IST …
… SEXY!
Warum? Und: Woran erkenn‘ ich das?
(Fast) alle sind behindert 
oder werden es zukünftig sein
Rund eine Milliarde Menschen weltweit haben eine Form von Behinderung. 
Sie sind visuell, auditiv, motorisch oder kognitiv...
Rund 110 Millionen Menschen haben große Schwierigkeiten Technologien zu nutzen. 
Dazu gehören ältere, aber auch temporär e...
Zugängliche Websites erreichen mehr Nutzer. Sie sind sauberer gecoded und deshalb leichter pflegbar und für neue Technolog...
Barrierefrei. 
Und woran erkenn‘ 
ich das? 
http://pixabay.com/de/calipo-eruriloctuin-morpho-peleides-366236/
Wahrnehmbar 
http://pixabay.com/de/auge-blaues-auge-augapfel-369557/
https://www.flickr.com/photos/skrb/4389547537 
Wahrnehmbar = Alternativen
Wahrnehmbar 
http://www.bundesregierung.de/Content/DE/Artikel/2014/06/2014-06-27-eeg-im-bundestag-beschlossen.html
Wahrnehmbar 
<img 
alt="Offshore Windpark, Windräder im Meer." 
>
Wahrnehmbar 
http://www.bundesregierung.de/Webs/Breg/DE/Mediathek/mediathek_node.html 
1 
2
Wahrnehmbar = 
Anpassbar 
http://pixabay.com/de/zahl-ziffer-zollstock-messen-maß-92412/
https://www.flickr.com/photos/brad_frost/7387833268
Inhalte sind über verschiedene Ausgabegeräte darstellbar, wenn … … Information, Struktur und Beziehungen von Inhalten nich...
<p> What she <em>really</em> meant to say was, "This is not ok, it is <strong>excellent</strong>!" </p>
Wahrnehmbar = 
Unterscheidbar 
http://pixabay.com/de/tiere-zebra-zebrastreifen-streifen-102483/
https://www.flickr.com/photos/mwichary/2252107608/
https://www.flickr.com/photos/matt_moonlight/9171680561/in/photostream/
Nicht gefetteter Text mit kleiner Schriftgröße (= bis 18 pt bzw. 1,5 em oder 150%) erfordert einen höheren Kontrast von Sc...
Kontrastverhältnisse: 
 bei kleiner Schrift ist die Schriftfarbe 4,5-mal deutlicher als die Hintergrund- farbe 
 bei gro...
Bedienbar 
http://pixabay.com/de/mechaniker-mechanik-industrie-kraft-63201/
http://commons.wikimedia.org/wiki/File:Magic_Mouse_01_Pengo.jpg
http://pixabay.com/de/tastatur-mac-wei%C3%9F-silber-57242/
Eine Website muss, ohne Maus, nur mit Hilfe der Tastatur, bedienbar sein.
Bedienbar = 
ausreichend Zeit 
http://pixabay.com/de/wecker-uhr-zeit-zeitgeist-dauer-424258/
Bedienbar = 
ohne Flackern
Bedienbar = 
Navigationshilfen
1 
Wo bin ich? 
2 
Wo war ich? 
3 
Wohin kann ich gehen?
Wo bin ich? 
 Seitentitel 
 Breadcrumb trail 
 Navigationsleiste 
 Sitemap 
1
Wo war ich? 
 „Zurück“-Schaltfläche 
 Kennzeichnung besuchter Links 
 Sitemap mit gekennzeichneten besuchten Links 
2
Wohin kann ich gehen? 
 Suchfunktion 
 Hypertext-Struktur im Fliesstext 
 Aufzeigen ähnlicher oder ver- wandter Themen ...
Verständlich 
http://pixabay.com/de/wassertropfen-wasser-klar-nass-16636/
http://pixabay.com/de/papyrus-hieroglyphen-altägyptisch-63004/ 
Verständlich = 
lesbar
Absätze und Zwischenüberschriften schaffen klare Strukturen.
Fremdwörter, Fachbegriffe und komplizierte Formulierungen lassen Sie am besten weg.
Sind Fremdwörter und Fachbegriffe notwendig, werden sie erläutert. Videos und Audiobeiträge helfen, komplexe Informationen...
https://www.flickr.com/photos/feldweg/9123020751 
Verständlich = 
vorhersagbar
http://www.shutterstock.com/pic-93709294/stock-photo-unexpected-guest.html?src=csl_recent_image-2
Verwirrend wäre es, wenn sich der Kontext eines Inhalts unangekündigt verändert.
Über die Sprachausgabe und sichtbar am Bildschirm lassen sich bevorstehende Kontextwechsel aber anzeigen.
Verständlich = 
Eingabeunterstützung 
http://pixabay.com/de/buntstift-kinder-kind-buntstifte-233758/
https://www.bundesregierung.de/SiteGlobals/Forms/Kontakt/DE/Kontakt2_Formular.html
Robust 
http://pixabay.com/de/findling-stein-fels-landschaft-3720/
Robust = 
kompatibel 
http://pixabay.com/de/zahnrad-mechanik-r%C3%A4der-getriebe-408364/
Werden aktuelle Webstandards eingehalten, ist eine Website kompatibel 
 mit Benutzeragenten (verschiedenen Browserversion...
Dörte Deimig 
https://www.flickr.com/photos/martinaphotography/7366181556 
seagreen4blog.wordpress.com 
@DeeDoerte
Nächste SlideShare
Wird geladen in …5
×

Barrierefreies Internet ist sexy!

476 Aufrufe

Veröffentlicht am

Barrierefreies Internet ist nicht nur geeignet, behinderten Usern Angebote im Internet zugänglicher zu machen, sondern nützt uns allen. Auch Betreiber von Webseiten profitieren, da barrierefreie Inhalte SEO-Kriterien entsprechen und besser für neue Technologien anpassbar sind.
Die Folien geben einen Überblick über die Prinzipien der Barrierefreiheit oder Web-Accessibility.

Veröffentlicht in: Design
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
476
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
9
Aktionen
Geteilt
0
Downloads
3
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Barrierefreies Internet ist sexy!

  1. 1. Dörte Deimig BARRIEREFREIES INTERNET IST …
  2. 2. … SEXY!
  3. 3. Warum? Und: Woran erkenn‘ ich das?
  4. 4. (Fast) alle sind behindert oder werden es zukünftig sein
  5. 5. Rund eine Milliarde Menschen weltweit haben eine Form von Behinderung. Sie sind visuell, auditiv, motorisch oder kognitiv eingeschränkt.
  6. 6. Rund 110 Millionen Menschen haben große Schwierigkeiten Technologien zu nutzen. Dazu gehören ältere, aber auch temporär eingeschränkte Menschen (Gipsarm).
  7. 7. Zugängliche Websites erreichen mehr Nutzer. Sie sind sauberer gecoded und deshalb leichter pflegbar und für neue Technologien anpassbar. Sie erfüllen SEO-Kriterien und entsprechen gesetzlichen Vorschriften.
  8. 8. Barrierefrei. Und woran erkenn‘ ich das? http://pixabay.com/de/calipo-eruriloctuin-morpho-peleides-366236/
  9. 9. Wahrnehmbar http://pixabay.com/de/auge-blaues-auge-augapfel-369557/
  10. 10. https://www.flickr.com/photos/skrb/4389547537 Wahrnehmbar = Alternativen
  11. 11. Wahrnehmbar http://www.bundesregierung.de/Content/DE/Artikel/2014/06/2014-06-27-eeg-im-bundestag-beschlossen.html
  12. 12. Wahrnehmbar <img alt="Offshore Windpark, Windräder im Meer." >
  13. 13. Wahrnehmbar http://www.bundesregierung.de/Webs/Breg/DE/Mediathek/mediathek_node.html 1 2
  14. 14. Wahrnehmbar = Anpassbar http://pixabay.com/de/zahl-ziffer-zollstock-messen-maß-92412/
  15. 15. https://www.flickr.com/photos/brad_frost/7387833268
  16. 16. Inhalte sind über verschiedene Ausgabegeräte darstellbar, wenn … … Information, Struktur und Beziehungen von Inhalten nicht nur über die Darstellung differenziert, sondern im Code abgebildet werden.
  17. 17. <p> What she <em>really</em> meant to say was, "This is not ok, it is <strong>excellent</strong>!" </p>
  18. 18. Wahrnehmbar = Unterscheidbar http://pixabay.com/de/tiere-zebra-zebrastreifen-streifen-102483/
  19. 19. https://www.flickr.com/photos/mwichary/2252107608/
  20. 20. https://www.flickr.com/photos/matt_moonlight/9171680561/in/photostream/
  21. 21. Nicht gefetteter Text mit kleiner Schriftgröße (= bis 18 pt bzw. 1,5 em oder 150%) erfordert einen höheren Kontrast von Schriftfarbe und Hintergrund als gefettete Texte mit großer Schrift.
  22. 22. Kontrastverhältnisse:  bei kleiner Schrift ist die Schriftfarbe 4,5-mal deutlicher als die Hintergrund- farbe  bei großer und fetter Schrift ist das Kontrastverhältnis 3 zu 1
  23. 23. Bedienbar http://pixabay.com/de/mechaniker-mechanik-industrie-kraft-63201/
  24. 24. http://commons.wikimedia.org/wiki/File:Magic_Mouse_01_Pengo.jpg
  25. 25. http://pixabay.com/de/tastatur-mac-wei%C3%9F-silber-57242/
  26. 26. Eine Website muss, ohne Maus, nur mit Hilfe der Tastatur, bedienbar sein.
  27. 27. Bedienbar = ausreichend Zeit http://pixabay.com/de/wecker-uhr-zeit-zeitgeist-dauer-424258/
  28. 28. Bedienbar = ohne Flackern
  29. 29. Bedienbar = Navigationshilfen
  30. 30. 1 Wo bin ich? 2 Wo war ich? 3 Wohin kann ich gehen?
  31. 31. Wo bin ich?  Seitentitel  Breadcrumb trail  Navigationsleiste  Sitemap 1
  32. 32. Wo war ich?  „Zurück“-Schaltfläche  Kennzeichnung besuchter Links  Sitemap mit gekennzeichneten besuchten Links 2
  33. 33. Wohin kann ich gehen?  Suchfunktion  Hypertext-Struktur im Fliesstext  Aufzeigen ähnlicher oder ver- wandter Themen  Sitemap 3
  34. 34. Verständlich http://pixabay.com/de/wassertropfen-wasser-klar-nass-16636/
  35. 35. http://pixabay.com/de/papyrus-hieroglyphen-altägyptisch-63004/ Verständlich = lesbar
  36. 36. Absätze und Zwischenüberschriften schaffen klare Strukturen.
  37. 37. Fremdwörter, Fachbegriffe und komplizierte Formulierungen lassen Sie am besten weg.
  38. 38. Sind Fremdwörter und Fachbegriffe notwendig, werden sie erläutert. Videos und Audiobeiträge helfen, komplexe Informationen zu verstehen.
  39. 39. https://www.flickr.com/photos/feldweg/9123020751 Verständlich = vorhersagbar
  40. 40. http://www.shutterstock.com/pic-93709294/stock-photo-unexpected-guest.html?src=csl_recent_image-2
  41. 41. Verwirrend wäre es, wenn sich der Kontext eines Inhalts unangekündigt verändert.
  42. 42. Über die Sprachausgabe und sichtbar am Bildschirm lassen sich bevorstehende Kontextwechsel aber anzeigen.
  43. 43. Verständlich = Eingabeunterstützung http://pixabay.com/de/buntstift-kinder-kind-buntstifte-233758/
  44. 44. https://www.bundesregierung.de/SiteGlobals/Forms/Kontakt/DE/Kontakt2_Formular.html
  45. 45. Robust http://pixabay.com/de/findling-stein-fels-landschaft-3720/
  46. 46. Robust = kompatibel http://pixabay.com/de/zahnrad-mechanik-r%C3%A4der-getriebe-408364/
  47. 47. Werden aktuelle Webstandards eingehalten, ist eine Website kompatibel  mit Benutzeragenten (verschiedenen Browserversionen, Playern und Plugins) sowie  mit assistiven Technologien (Screenreadern)
  48. 48. Dörte Deimig https://www.flickr.com/photos/martinaphotography/7366181556 seagreen4blog.wordpress.com @DeeDoerte

×