Upload
doertede
View
70
Download
6
Embed Size (px)
DESCRIPTION
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.
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 eingeschränkt.
Rund 110 Millionen Menschen haben große Schwierigkeiten Technologien zu nutzen.
Dazu gehören ältere, aber auch temporär eingeschränkte Menschen (Gipsarm).
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.
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 nicht nur über die Darstellung differenziert, sondern im Code abgebildet werden.
<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 Schriftfarbe und Hintergrund als gefettete Texte mit großer Schrift.
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
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 Sitemap
3
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 zu verstehen.
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 Browserversionen, Playern und Plugins)
sowie mit assistiven Technologien (Screenreadern)
Dörte Deimig
https://www.flickr.com/photos/martinaphotography/7366181556
seagreen4blog.wordpress.com
@DeeDoerte