Barrierefreies Internet ist sexy!

  • Published on
    21-Nov-2014

  • View
    50

  • Download
    3

Embed Size (px)

DESCRIPTION

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

Transcript

  • 1. Drte Deimig BARRIEREFREIES INTERNET IST
  • 2. SEXY!
  • 3. Warum? Und: Woran erkenn ich das?
  • 4. (Fast) alle sind behindert oder werden es zuknftig sein
  • 5. Rund eine Milliarde Menschen weltweit haben eine Form von Behinderung. Sie sind visuell, auditiv, motorisch oder kognitiv eingeschrnkt.
  • 6. Rund 110 Millionen Menschen haben groe Schwierigkeiten Technologien zu nutzen. Dazu gehren ltere, aber auch temporr eingeschrnkte Menschen (Gipsarm).
  • 7. Zugngliche Websites erreichen mehr Nutzer. Sie sind sauberer gecoded und deshalb leichter pflegbar und fr neue Technologien anpassbar. Sie erfllen SEO-Kriterien und entsprechen gesetzlichen Vorschriften.
  • 8. Barrierefrei. Und woran erkenn ich das? http://pixabay.com/de/calipo-eruriloctuin-morpho-peleides-366236/
  • 9. Wahrnehmbar http://pixabay.com/de/auge-blaues-auge-augapfel-369557/
  • 10. https://www.flickr.com/photos/skrb/4389547537 Wahrnehmbar = Alternativen
  • 11. Wahrnehmbar http://www.bundesregierung.de/Content/DE/Artikel/2014/06/2014-06-27-eeg-im-bundestag-beschlossen.html
  • 12. Wahrnehmbar
  • 13. Wahrnehmbar http://www.bundesregierung.de/Webs/Breg/DE/Mediathek/mediathek_node.html 1 2
  • 14. Wahrnehmbar = Anpassbar http://pixabay.com/de/zahl-ziffer-zollstock-messen-ma-92412/
  • 15. https://www.flickr.com/photos/brad_frost/7387833268
  • 16. Inhalte sind ber verschiedene Ausgabegerte darstellbar, wenn Information, Struktur und Beziehungen von Inhalten nicht nur ber die Darstellung differenziert, sondern im Code abgebildet werden.
  • 17.

    What she really meant to say was, "This is not ok, it is excellent!"

  • 18. Wahrnehmbar = Unterscheidbar http://pixabay.com/de/tiere-zebra-zebrastreifen-streifen-102483/
  • 19. https://www.flickr.com/photos/mwichary/2252107608/
  • 20. https://www.flickr.com/photos/matt_moonlight/9171680561/in/photostream/
  • 21. Nicht gefetteter Text mit kleiner Schriftgre (= bis 18 pt bzw. 1,5 em oder 150%) erfordert einen hheren Kontrast von Schriftfarbe und Hintergrund als gefettete Texte mit groer Schrift.
  • 22. Kontrastverhltnisse: bei kleiner Schrift ist die Schriftfarbe 4,5-mal deutlicher als die Hintergrund- farbe bei groer und fetter Schrift ist das Kontrastverhltnis 3 zu 1
  • 23. Bedienbar http://pixabay.com/de/mechaniker-mechanik-industrie-kraft-63201/
  • 24. http://commons.wikimedia.org/wiki/File:Magic_Mouse_01_Pengo.jpg
  • 25. http://pixabay.com/de/tastatur-mac-wei%C3%9F-silber-57242/
  • 26. Eine Website muss, ohne Maus, nur mit Hilfe der Tastatur, bedienbar sein.
  • 27. Bedienbar = ausreichend Zeit http://pixabay.com/de/wecker-uhr-zeit-zeitgeist-dauer-424258/
  • 28. Bedienbar = ohne Flackern
  • 29. Bedienbar = Navigationshilfen
  • 30. 1 Wo bin ich? 2 Wo war ich? 3 Wohin kann ich gehen?
  • 31. Wo bin ich? Seitentitel Breadcrumb trail Navigationsleiste Sitemap 1
  • 32. Wo war ich? Zurck-Schaltflche Kennzeichnung besuchter Links Sitemap mit gekennzeichneten besuchten Links 2
  • 33. Wohin kann ich gehen? Suchfunktion Hypertext-Struktur im Fliesstext Aufzeigen hnlicher oder ver- wandter Themen Sitemap 3
  • 34. Verstndlich http://pixabay.com/de/wassertropfen-wasser-klar-nass-16636/
  • 35. http://pixabay.com/de/papyrus-hieroglyphen-altgyptisch-63004/ Verstndlich = lesbar
  • 36. Abstze und Zwischenberschriften schaffen klare Strukturen.
  • 37. Fremdwrter, Fachbegriffe und komplizierte Formulierungen lassen Sie am besten weg.
  • 38. Sind Fremdwrter und Fachbegriffe notwendig, werden sie erlutert. Videos und Audiobeitrge helfen, komplexe Informationen zu verstehen.
  • 39. https://www.flickr.com/photos/feldweg/9123020751 Verstndlich = vorhersagbar
  • 40. http://www.shutterstock.com/pic-93709294/stock-photo-unexpected-guest.html?src=csl_recent_image-2
  • 41. Verwirrend wre es, wenn sich der Kontext eines Inhalts unangekndigt verndert.
  • 42. ber die Sprachausgabe und sichtbar am Bildschirm lassen sich bevorstehende Kontextwechsel aber anzeigen.
  • 43. Verstndlich = Eingabeuntersttzung http://pixabay.com/de/buntstift-kinder-kind-buntstifte-233758/
  • 44. https://www.bundesregierung.de/SiteGlobals/Forms/Kontakt/DE/Kontakt2_Formular.html
  • 45. Robust http://pixabay.com/de/findling-stein-fels-landschaft-3720/
  • 46. Robust = kompatibel http://pixabay.com/de/zahnrad-mechanik-r%C3%A4der-getriebe-408364/
  • 47. Werden aktuelle Webstandards eingehalten, ist eine Website kompatibel mit Benutzeragenten (verschiedenen Browserversionen, Playern und Plugins) sowie mit assistiven Technologien (Screenreadern)
  • 48. Drte Deimig https://www.flickr.com/photos/martinaphotography/7366181556 seagreen4blog.wordpress.com @DeeDoerte