Barrierefreiheit

Barrierefreiheit im Web

Generelles

Anforderungen und Tools

(Quelle: http://www.einfach-fuer-

alle.de/artikel/bitv-reloaded/print/BITV-

Reloaded.pdf)

Zukunft

Wie verkaufen?

In „eigener Sache“: BITV-Tester Stefan Gregorke

http://www.einfach-fuer-alle.de/artikel/bitv-reloaded/print/BITV-Reloaded.pdf









Barrierefreiheit im Web

Barrierefreiheit

versus

Barrierearmut

Barrierefreiheit in der IT

Forderung zur Nutzung von Web- und Internet-Angeboten für beeinträchtigte

Menschen

Regelung durch Verordnung zur Schaffung barrierefreier Informationstechnik

nach dem Behindertengleichstellungsgesetz, kurz Barrierefreie

Informationstechnik-Verordnung – BITV

BITV als Ergänzung des Behindertengleichstellungsgesetzes (BGG) vom 27.

April 2002

BITV legt in drei Prio-Gruppen technische Forderungen fest

Konsequenz für CMS und CMS-Betreiber

Techn. Forderungen nachhaltig einrichten/implementieren, um

bestmögliches Ergebnis mit gleichzeitiger Reduktion von redaktionellem

Mehraufwand

Braille-Zeile für hapt. Umsetzung von Text (https://www.lotto-

bayern.de/)

Augen-Befehle (http://www.stiftung-barrierefrei-kommunizieren.de/)

Spezial-Tastaturen (http://farm2.static.flickr.com//)

Kopfstab (http://www.mostviertel.com)


BITV-Anforderung 1: Äquivalente Alternativen

Textuelle Alternativen für Nichttextelemente (Alt-Text/longdescription für

Bilder)

Transscripts (Textdateien) für Audios/Videos,

Multimedia mit Untertiteln (<caption)>

Textlinks für clientseitige/serverseitige Imagemaps

Alternativen für Animationen, Applets, JS-Funktionen

zu dem keine Frames, keine Bilder für Bullets, keine Platzhaltergrafiken

Kontraste und Text und Multimedia-Elementen prüfen

Möglichkeiten zur Überprüfung

Bilder ausschalten in Web Developer Tools

Nach leeren alt=„“ suchen

Web Developer Toolbar für Firefox: im Menü »Outline« finden Sie den

Befehl »Outline Custom Elements


BITV-Anforderung 2: Farben und Kontraste

Zirka zehn Prozent des männlichen Publikums ist farbfehlsichtig und kann

mit der Anweisung »Zum Bestellen drücken Sie bitte auf den grünen

Knopf« nichts anfangen…


BITV-Anforderung 3: Sauberer Code

Sauberer Code ist nicht nur der Zeitvertreib von HTML-Puristen, sondern

legt das Fundament für die Barrierefreiheit…

Validate it!!!


HTML


CSS


JS http://www.jslint.com/


Unordnung

vermeiden…

Barrierefreiheit in der IT (Bildquelle Unordnung: www.radiobremen.de)

Still more

testing…

• Mediengerechter Einsatz von Bildkomprimierungsformaten

• Analyse-Ergebnis Yahoo! YSlow „Smush.it“

Bildformate werden zweckgemäß eingesetzt, sodass sich minimale Bandbreiten und optimale Qualität treffen (inkl. Folgefolie)

• Analyse-Ergebnis des JavaScript Codes mit JSLint

Zu übernehmende JavaScript-Zeilen werden validiert eingebunden bzw. durch Bibliotheksfunktionen ersetzt.

Testergebnisse seittest.de

Aus dem seittest-Ergebnisbericht wird insbesondere der Punkt „SPAM“-Prüfung betrachtet. Alle weiteren Punkte erübrigen sich durch

Neuentwicklung.

Testergebnisse rankflex.com

Aus dem rankflex-Ergebnisbericht führt insbesondere der Punkt Social Media zur prominenteren Einbindung der „Hinzufügen“-Elemente.

Vorschläge hierzu fließen mit in die Design-Phase ein.

37

%

25

%

60

%

53

%

Info

Info

Testergebnisse seitwert.de

Der DMOZ-Eintrag sowie der Technik-Block sind hier hervorzuheben und in der Errichtungsarbeit durch CPS inbegriffen.

Testergebnisse searchmetrics

Um die SEO in Berichten wie von searchmetrics zu verbessern und den Wert eines Textlinks (momentan mit 102.78 EUR GUT) zu erhöhen,

werden entsprechende Hinweise in der Redakteursschulung fokussiert.


BITV-Anforderung 4: Sprachliche Besonderheiten

Die Kennzeichnung von Besonderheiten wie Sprachwechsel und

Abkürzungen erleichter das Verständnis…

Akronyme

Kontextsensitiviät nicht unterschätzen

KVB vs. KVB

Abkürzungen <abbr title=„ TYPO3 Camp Hansestadt

Hamburg 2011“>T3CHH11 </abbr>

Akronyme = spezielle Abk. (lesbar)

Z.B. LASER

<acronym title=“Light Amplification by Stimulated

Emission of Radiation“ lang=“en”>Laser</acronym>


Sprache GLOBAL

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="de" lang="de"

xmlns="http://www.w3.org/1999/xhtml">

Lokal:

Lang-Attribut (universal)

<span lang=“dk”> Kasper Skårhøj</span>


BITV-Anforderung 5: Tabellen

Layout-Tabellen haben mittlerweile ihr Verfallsdatum deutlich

überschritten…Daten-Tabelle JA!!!

BITV-Anforderung 6: Neuere Technologien

Ein Blick in die Statistik Ihrer Website enthüllt die Vielzahl der

unterschiedlichsten Browser aus verschiedenen Generationen, die auf

Ihre Website zugreifen…

BITV-Anforderung 7: Dynamik und Bewegung

Das Web ist weit mehr als nur ein Sammlung wohlstrukturierter statischer

Texte. Interaktive Elemente sind oft der bessere Weg, um manche

Nutzergruppen zu erreichen…

BITV-Anforderung 8: Skripte und Applets

In dieser Folge geht es um die Zugänglichkeit der Inhalte, die über das

bloße HTML oder Bilder hinausgehen und eigene Schnittstellen zur

Ausgabe und Bedienung haben…


BITV-Anforderung 9: Geräteunabhängigkeit

Wenn Ihre Seiten für Sprachausgaben, Braillezeilen und andere assistive

Werkzeuge zugänglich sind, werden sie auch für Kiosksystemen ohne

Tastatur oder mobile Endgeräten bedienbar sein…

BITV-Anforderung 10: Abwärtskompatibilität

Nicht jedes Ausgabegerät verfügt über die selben Möglichkeiten wie der

Rechner, auf dem die Website entwickelt wurde…

BITV-Anforderung 11: Webstandards

Die Verwendung von offenen Standards garantiert nicht nur die

Interoperabilität Ihres Internetangebots, sondern spart bei Wartung und

Pflege bares Geld..…

BITV-Anforderung 12: Orientierung

Vielen Benutzern assistiver Werkzeuge wird der Zugang bereits durch die

mangelnde Übersichtlichkeit einer Website verwehrt…


BITV-Anforderung 13: Bedienung

Klassische Usability-Faktoren haben ebenso einen starken Einfluß auf die

Barrierefreiheit eines Angebotes…

BITV-Anforderung 14: Verständlichkeit

Selbst wenn die Prüfprogramme auf keine groben Schnitzer hinweisen, ist

eine Website damit noch lange nicht für alle Besucher tatsächlich auch

benutzbar…


Beispiel für techn. Forderungen

Forderung: Alle Nicht-Textelemente sollen textuelle Alternativen

bekommen, z.B. im alt-Attribut für Bilder, Videos etc.

Folge: Im CMS werden (per Skriptsprache) die entsprechenden

Eingabefelder als Pflichtfelder deklariert


Longdescription

Hier wird eine URL auf hinterlegt

IDEE: Eigenen Ausgabekanal plaintext, sodass Verwaltung der Text in

TYPO3 bleibt


Beispiel für techn. Forderungen

Im Fließtext sollen anderssprachige Begriffe und Abkürzungen speziell

ausgezeichnet werden

Folge: Im RTE müssen Buttons aktiviert werden, die die HTML-

Elemente <abbr> für Abkürzungen (Abbreviations) und Attribute wie

lang=„en“ erlauben


Weitere Anforderungen

„Bilder sind so zu gestalten, dass die Kombinationen aus Vordergrund– und

Hintergrundfarbe auf einem Schwarz–Weiß–Bildschirm und bei der

Betrachtung durch Menschen mit Farbfehlsichtigkeiten ausreichend

kontrastieren.“

„Dynamische Inhalte müssen zugänglich sein. Insoweit dies nur mit

unverhältnismäßig hohem Aufwand zu realisieren ist, sind gleichwertige

alternative Angebote unter Verzicht auf dynamische Inhalte bereitzustellen.“

„Das Erscheinenlassen von Pop-Ups oder anderen Fenstern ist zu vermeiden.

Die Nutzerin/der Nutzer ist über Wechsel der aktuellen Ansicht zu

informieren.“

Zum weiterlesen: http://www.einfach-fuer-alle.de/artikel/bitv/anlage-1/

Tools (Quelle: http://www.einfach-fuer-alle.de/artikel/bitv-reloaded/print/BITV-Reloaded.pdf)

Browser-Erweiterungen (Firefox):

Web Developer Extension

Accessibility Extensions for Mozilla/Firefox

FireBug

JAWS-Simulator Fangs

Rendered Source Chart

Colour Contrast Analyser Firefox Extension

WAVE 3.0 Accessibility Tool

Lokalisierte Fassungen der wichtigsten Firefox-Erweiterungen finden Sie

bei www.erweiterungen.de.


Browser-Erweiterungen (Opera):

Web Developer Toolbar & Menu for Opera

OperaW3-Dev Menu

Browser-Erweiterungen (Internet Explorer):

Web Accessibility Toolbar (deutsche Version)

WEB for ALL - AIS-Toolbar

Internet Explorer Developer Toolbar

WAVE 3.0 Accessibility Tool


Browser-Erweiterungen (Safari):

Safari Tidy plugin

WebDevAdditions 1.0b18

Drosera

Web Inspector

SafariStand

Eigenständige Anwendungen und Online-Tools:

Photosensitive Epilepsy Analysis Tool (PEAT)

Web Accessibility Inspector

Java Accessibility Helper Early Access

Validome

Zukunft

Avatare mit Gebärdensprache

http://www.barrierekompass.de/weblog/index.php?itemid=343

http://blog.aperto.de/einfach-teilhabende-im-usability-test-mit-menschen-

mit-behinderungen/

http://www.barrierekompass.de/weblog/index.php?itemid=343

Wie „verkaufen“?

Nicht WTAG sondern WCAG 1.0 oder WCAG 2.0 in Angebot schreiben

TYPO3 ist nicht WTAG konform!

Mehrwerte erläutern, Schnittmengen mit anderen QS-Aspekten

Positive Effekte für alle Nutzer

Abkürzungen

Code-Qualität (Suchmaschinen)

Interoperabilität

Performanz (Mobil, langsame WLANs, etc)

In „eigener“ Sache – Stefan Gregorke

In „eigener“ Sache

Stefan Gregorke

Blinder Tester für Barrierefreiheit

Selbständigkeit im Aufbau

Zielgruppe

Web-Entwickler, Agenturen

http://www.gregorke.de/

Get access! Support him!

Barrierefreiheit

Business

Transcript of Barrierefreiheit