48
Dörte Deimig BARRIEREFREIES INTERNET IST …

Barrierefreies Internet ist sexy!

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.

Citation preview

Page 1: Barrierefreies Internet ist sexy!

Dörte Deimig

BARRIEREFREIES INTERNET IST …

Page 2: Barrierefreies Internet ist sexy!

… SEXY!

Page 3: Barrierefreies Internet ist sexy!

Warum? Und: Woran erkenn‘ ich das?

Page 4: Barrierefreies Internet ist sexy!

(Fast)

alle sind behindert oder werden es zukünftig sein

Page 5: Barrierefreies Internet ist sexy!

Rund eine Milliarde Menschen weltweit haben eine Form von Behinderung.

Sie sind visuell, auditiv, motorisch oder kognitiv eingeschränkt.

Page 6: Barrierefreies Internet ist sexy!

Rund 110 Millionen Menschen haben große Schwierigkeiten Technologien zu nutzen.

Dazu gehören ältere, aber auch temporär eingeschränkte Menschen (Gipsarm).

Page 7: Barrierefreies Internet ist sexy!

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.

Page 8: Barrierefreies Internet ist sexy!

Barrierefrei. Und woran erkenn‘

ich das?

http://pixabay.com/de/calipo-eruriloctuin-morpho-peleides-366236/

Page 9: Barrierefreies Internet ist sexy!

Wahrnehmbar

http://pixabay.com/de/auge-blaues-auge-augapfel-369557/

Page 10: Barrierefreies Internet ist sexy!

https://www.flickr.com/photos/skrb/4389547537

Wahrnehmbar = Alternativen

Page 11: Barrierefreies Internet ist sexy!

Wahrnehmbar

http://www.bundesregierung.de/Content/DE/Artikel/2014/06/2014-06-27-eeg-im-bundestag-beschlossen.html

Page 12: Barrierefreies Internet ist sexy!

Wahrnehmbar

<img

alt="Offshore Windpark,

Windräder im Meer."

>

Page 13: Barrierefreies Internet ist sexy!

Wahrnehmbar

http://www.bundesregierung.de/Webs/Breg/DE/Mediathek/mediathek_node.html

1

2

Page 14: Barrierefreies Internet ist sexy!

Wahrnehmbar =

Anpassbar

http://pixabay.com/de/zahl-ziffer-zollstock-messen-maß-92412/

Page 15: Barrierefreies Internet ist sexy!

https://www.flickr.com/photos/brad_frost/7387833268

Page 16: Barrierefreies Internet ist sexy!

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.

Page 17: Barrierefreies Internet ist sexy!

<p>

What she

<em>really</em>

meant to say was, "This is not

ok, it

is

<strong>excellent</strong>!"

</p>

Page 18: Barrierefreies Internet ist sexy!

Wahrnehmbar =

Unterscheidbar

http://pixabay.com/de/tiere-zebra-zebrastreifen-streifen-102483/

Page 19: Barrierefreies Internet ist sexy!

https://www.flickr.com/photos/mwichary/2252107608/

Page 20: Barrierefreies Internet ist sexy!

https://www.flickr.com/photos/matt_moonlight/9171680561/in/photostream/

Page 21: Barrierefreies Internet ist sexy!

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.

Page 22: Barrierefreies Internet ist sexy!

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

Page 23: Barrierefreies Internet ist sexy!

Bedienbar

http://pixabay.com/de/mechaniker-mechanik-industrie-kraft-63201/

Page 24: Barrierefreies Internet ist sexy!

http://commons.wikimedia.org/wiki/File:Magic_Mouse_01_Pengo.jpg

Page 25: Barrierefreies Internet ist sexy!

http://pixabay.com/de/tastatur-mac-wei%C3%9F-silber-57242/

Page 26: Barrierefreies Internet ist sexy!

Eine Website muss, ohne Maus, nur mit Hilfe der Tastatur, bedienbar sein.

Page 27: Barrierefreies Internet ist sexy!

Bedienbar =

ausreichend Zeit

http://pixabay.com/de/wecker-uhr-zeit-zeitgeist-dauer-424258/

Page 28: Barrierefreies Internet ist sexy!

Bedienbar =

ohne Flackern

Page 29: Barrierefreies Internet ist sexy!

Bedienbar =

Navigationshilfen

Page 30: Barrierefreies Internet ist sexy!

1

Wo bin ich?

2

Wo war ich?

3

Wohin kann ich gehen?

Page 31: Barrierefreies Internet ist sexy!

Wo bin ich? Seitentitel Breadcrumb trail Navigationsleiste Sitemap

1

Page 32: Barrierefreies Internet ist sexy!

Wo war ich? „Zurück“-Schaltfläche Kennzeichnung besuchter Links Sitemap mit gekennzeichneten besuchten Links

2

Page 33: Barrierefreies Internet ist sexy!

Wohin kann ich gehen? Suchfunktion Hypertext-Struktur im Fliesstext Aufzeigen ähnlicher oder ver-wandter Themen Sitemap

3

Page 34: Barrierefreies Internet ist sexy!

Verständlich

http://pixabay.com/de/wassertropfen-wasser-klar-nass-16636/

Page 35: Barrierefreies Internet ist sexy!

http://pixabay.com/de/papyrus-hieroglyphen-altägyptisch-63004/

Verständlich = lesbar

Page 36: Barrierefreies Internet ist sexy!

Absätze und Zwischenüberschriften schaffen klare Strukturen.

Page 37: Barrierefreies Internet ist sexy!

Fremdwörter, Fachbegriffe und komplizierte Formulierungen lassen Sie am besten weg.

Page 38: Barrierefreies Internet ist sexy!

Sind Fremdwörter und Fachbegriffe notwendig, werden sie erläutert. Videos und Audiobeiträge helfen, komplexe Informationen zu verstehen.

Page 39: Barrierefreies Internet ist sexy!

https://www.flickr.com/photos/feldweg/9123020751

Verständlich =

vorhersagbar

Page 40: Barrierefreies Internet ist sexy!

http://www.shutterstock.com/pic-93709294/stock-photo-unexpected-guest.html?src=csl_recent_image-2

Page 41: Barrierefreies Internet ist sexy!

Verwirrend wäre es, wenn sich der Kontext eines Inhalts unangekündigt verändert.

Page 42: Barrierefreies Internet ist sexy!

Über die Sprachausgabe und sichtbar am Bildschirm lassen sich bevorstehende Kontextwechsel aber anzeigen.

Page 43: Barrierefreies Internet ist sexy!

Verständlich =

Eingabeunterstützung

http://pixabay.com/de/buntstift-kinder-kind-buntstifte-233758/

Page 44: Barrierefreies Internet ist sexy!

https://www.bundesregierung.de/SiteGlobals/Forms/Kontakt/DE/Kontakt2_Formular.html

Page 45: Barrierefreies Internet ist sexy!

Robust

http://pixabay.com/de/findling-stein-fels-landschaft-3720/

Page 46: Barrierefreies Internet ist sexy!

Robust =

kompatibel

http://pixabay.com/de/zahnrad-mechanik-r%C3%A4der-getriebe-408364/

Page 47: Barrierefreies Internet ist sexy!

Werden aktuelle Webstandards eingehalten, ist eine Website kompatibel mit Benutzeragenten (verschiedenen Browserversionen, Playern und Plugins)

sowie mit assistiven Technologien (Screenreadern)

Page 48: Barrierefreies Internet ist sexy!

Dörte Deimig

https://www.flickr.com/photos/martinaphotography/7366181556

seagreen4blog.wordpress.com

@DeeDoerte