Barrierefreies Internet ist sexy!

Post on 21-Nov-2014

70 views 6 download

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.

transcript

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