das barrierefreie internet von s imone c lever juni 2012

Das „barrierefreie“Internet

von Simone Clever

Juni 2012

Seminar „Texten fürs Netz“ Folie 2

Juni 2012

© Simone Clever

Was ist „Barrierefreiheit“

Chancengleichheit für ALLE

• Egal ob Menschen mit oder ohne Behinderungen

• Unabhängig von der Art der Ausspielgeräte (PC / Smartphone / Tablet / etc.)

• Unabhängig von der Internetverbindung (Geschwindigkeit)

• Ziel kaum zu 100 Prozent zu erreichen

• Nicht „barrierefrei“ sondern „barrierearm“


Juni 2012

© Simone Clever

Welche Seite ist „barrierefrei“ und welche nicht?


Juni 2012

© Simone Clever

Redaktionell

• Inhalte verständlich und in klarer Sprache

• Textlich klar strukturiert

• Zwischenüberschriften verwenden

• Aussagekräftige Bildbeschreibungen (ALT- Tags)

• Bei der Bildauswahl auf Kontraste achten(Lichtverhältnisse / Farbenblindheit / Bildschirmauflösung)


Juni 2012

© Simone Clever

• Aussagekräftige Alt-Tags

Redaktionell - Beispiel


Juni 2012

© Simone Clever

Farbenblindheit

• http://vischeck.com/vischeck/vischeckImage.php


Juni 2012

© Simone Clever

Sehbehinderungen

• ca. 3 % der Deutschen leiden unter schweren Sehbehinderungen(davon sind ca. 155.000 Menschen blind)

• ca. 60% der Blinden und Seheingeschränkten nutzen das Internet

• Möglichkeit der Vergrößerung (Skalierbarkeit)


Juni 2012

© Simone Clever

Sehbehinderungen: Ausgabe / Eingabehilfe der Inhalte

Braille-Zeile


Juni 2012

© Simone Clever

Sehbehinderungen: Ausgabe / Eingabehilfe der Inhalte


Juni 2012

© Simone Clever

Sehbehinderungen: Ausgabe der Inhalte

Screenreader (für die akustische Wiedergabe)

• Software (z. B. „Jaws“ / „COBRA“ / „Virgo“ / etc. )

• Text und Bildbeschreibung (ALT-tag) werden vorgelesen


Juni 2012

© Simone Clever

Sehbehinderungen: Ausgabe der Inhalte


Juni 2012

© Simone Clever

Hörgeschädigte

• 60.000 bis 100.000 Menschen mit extrem eingeschränkter Hörfähigkeit

• DGS (Deutsche Gebärden Sprache)

• Untertitel

• Audiodeskription


Juni 2012

© Simone Clever

Gebärdensprache

http://www.wdr.de/mediathek/html/regional/2012/03/20/quarks-und-co.xml?noscript=true&gebaerdenvideo=true

Gebärdensprache & Untertitel – Quarks & Co


Juni 2012

© Simone Clever

Gebärdensprache in der Mediathek

http://www.wdr.de/mediathek/html/regional/uebersicht/gebaerdensprache.xml

Gebärdensprache & Untertitel – Quarks & Co


Juni 2012

© Simone Clever

Audiodeskription – Quarks & Co

http://www.wdr.de/mediathek/html/regional/2011/02/08/quarks-komplett-audiodescription.xml


Juni 2012

© Simone Clever

Technisch

Bei der Programmierung zu beachten:

• Text und Seitelayout trennen

• Klare Struktur der Überschriften

• Farben und Kontraste beachten(Vordergrund / Hintergrund)

• Tabellen nur für tabellarische Daten (nicht für Layoutzwecke)

• Zusatzangebote (z. B. PDF u. Flash) müssen auch mit älteren Versionen der Programme laufen

• Navigationsstruktur übersichtlich und schlüssig gestalten


Juni 2012

© Simone Clever

http://juicystudio.com/services/luminositycontrastratio.php

Farbkontraste


Juni 2012

© Simone Clever

Multimedia-Elemente

• Optimierung der Videos ISDN und DSL beim WDR: Web-S(mall)l / Web-M(edium) / Web-L(arge)

• Unterschiedliche Videoplayer (Flash-Player/ Real-Player/ Windows-Media-Player/ Quicktime-Player)

• Dateigröße für Downloads angeben

• Start durch Nutzer (kein Autostart)

• Im Idealfall – Untertitel

Regeln zur Einbindung von Multimedia-Elementen / Videos


Juni 2012

© Simone Clever

Einsatz von Flash

• keine wesentliche Inhalte in Flash

• Zusatzinformationenkönnen Hilfe sein

„Grundsätzlich sind alle multimedialen Präsentationen zu begrüßen, wenn sie das Verständnis der angebotenen Informationen fördern“. (BITV)


Juni 2012

© Simone Clever

Beispiel: „Quarks & Co“


Juni 2012

© Simone Clever

• ohne CSS (Layout Programmierung)



Juni 2012

© Simone Clever

• ohne Bilder



Juni 2012

© Simone Clever

Weitere Beispiele• http://www.rtl.de/cms/index.html

Korrekte Auszeichnung von <h1> - <h5>

- ohne Bilder


Juni 2012

© Simone Clever

Ergebnis

• alle Nutzer profitieren von barrierearmen Internet-Seiten

• Ziel:

Informationen unabhängig von • dem Zugangs-Ort

• dem Zugangs-Zeitpunkt

• der Zugangs-Software bereitzustellen


Juni 2012

© Simone Clever

WCAG - „Web Content Accessibility Guidelines“

• Richtlinien des World Wide Web Consortium (W3C)

• Version WCAG 1.0 im Mai 1999


Juni 2012

© Simone Clever

WCAG

• Version WCAG 2.0 Dezember 2008

• Vier Prinzipien:

• Wahrnehmbar - Informationen und Bestandteile der Benutzerschnittstelle müssen den Benutzern so präsentiert werden, dass diese sie wahrnehmen können.

• Bedienbar - Bestandteile der Benutzerschnittstelle und Navigation müssen bedienbar sein.

• Verständlich - Informationen und Bedienung der Benutzer-schnittstelle müssen verständlich sein.

• Robust - Inhalte müssen robust genug sein, damit sie zuverlässig von einer großen Auswahl an Benutzeragenten einschließlich assistierender Techniken interpretiert werden können.


Juni 2012

© Simone Clever

Vielen DANK

• Fragen?!

• http://www.chip.de/downloads/Web-Accessibility-Toolbar_33713630.html

• http://www.wob11.de/watkomplett.html

• https://addons.mozilla.org/en-US/firefox/addon/accessibility-evaluation-toolb/


Juni 2012

© Simone Clever

• http://www.einfach-fuer-alle.de/

• http://www.vischeck.com/

• http://www.biene-award.de/

• http://www.wdr.de/themen/kultur/rundfunk/wdr/untertitel/index.jhtml

• http://www.w3.org/Translations/WCAG20-de/WCAG20-de-20091029/

• http://www.einfach-teilhaben.de/DE/StdS/Home/Aktuelles/2011_09_22_bitv.html

das barrierefreie internet von s imone c lever juni 2012

Documents