barrierefreiheit
TRANSCRIPT
![Page 1: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/1.jpg)
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
![Page 2: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/2.jpg)
Barrierefreiheit im Web
Barrierefreiheit
versus
Barrierearmut
![Page 3: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/3.jpg)
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
![Page 4: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/4.jpg)
Braille-Zeile für hapt. Umsetzung von Text (https://www.lotto-
bayern.de/)
![Page 5: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/5.jpg)
Augen-Befehle (http://www.stiftung-barrierefrei-kommunizieren.de/)
![Page 6: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/6.jpg)
Spezial-Tastaturen (http://farm2.static.flickr.com//)
![Page 7: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/7.jpg)
Kopfstab (http://www.mostviertel.com)
![Page 8: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/8.jpg)
Barrierefreiheit in der IT
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
![Page 9: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/9.jpg)
Barrierefreiheit in der IT
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…
![Page 10: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/10.jpg)
Barrierefreiheit in der IT
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!!!
![Page 11: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/11.jpg)
Barrierefreiheit in der IT
HTML
![Page 12: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/12.jpg)
Barrierefreiheit in der IT
CSS
![Page 13: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/13.jpg)
Barrierefreiheit in der IT
JS http://www.jslint.com/
![Page 14: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/14.jpg)
Barrierefreiheit in der IT
Unordnung
vermeiden…
![Page 15: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/15.jpg)
Barrierefreiheit in der IT
![Page 16: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/16.jpg)
Barrierefreiheit in der IT (Bildquelle Unordnung: www.radiobremen.de)
Still more
testing…
![Page 17: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/17.jpg)
• 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)
![Page 18: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/18.jpg)
![Page 19: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/19.jpg)
• Analyse-Ergebnis des JavaScript Codes mit JSLint
Zu übernehmende JavaScript-Zeilen werden validiert eingebunden bzw. durch Bibliotheksfunktionen ersetzt.
![Page 20: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/20.jpg)
Testergebnisse seittest.de
Aus dem seittest-Ergebnisbericht wird insbesondere der Punkt „SPAM“-Prüfung betrachtet. Alle weiteren Punkte erübrigen sich durch
Neuentwicklung.
![Page 21: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/21.jpg)
![Page 22: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/22.jpg)
![Page 23: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/23.jpg)
![Page 24: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/24.jpg)
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.
![Page 25: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/25.jpg)
37
%
25
%
60
%
53
%
Info
Info
![Page 26: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/26.jpg)
Testergebnisse seitwert.de
Der DMOZ-Eintrag sowie der Technik-Block sind hier hervorzuheben und in der Errichtungsarbeit durch CPS inbegriffen.
![Page 27: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/27.jpg)
![Page 28: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/28.jpg)
![Page 29: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/29.jpg)
![Page 30: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/30.jpg)
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.
![Page 31: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/31.jpg)
![Page 32: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/32.jpg)
![Page 33: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/33.jpg)
![Page 34: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/34.jpg)
![Page 35: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/35.jpg)
Barrierefreiheit in der IT
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>
![Page 36: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/36.jpg)
Barrierefreiheit in der IT
![Page 37: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/37.jpg)
Barrierefreiheit in der IT
![Page 38: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/38.jpg)
Barrierefreiheit in der IT
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>
![Page 39: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/39.jpg)
Barrierefreiheit in der IT
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…
![Page 40: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/40.jpg)
Barrierefreiheit in der IT
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…
![Page 41: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/41.jpg)
Barrierefreiheit in der IT
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…
![Page 42: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/42.jpg)
Barrierefreiheit in der IT
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
![Page 43: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/43.jpg)
Barrierefreiheit in der IT
Longdescription
Hier wird eine URL auf hinterlegt
IDEE: Eigenen Ausgabekanal plaintext, sodass Verwaltung der Text in
TYPO3 bleibt
![Page 44: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/44.jpg)
Barrierefreiheit in der IT
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
![Page 45: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/45.jpg)
Barrierefreiheit in der IT
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/
![Page 46: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/46.jpg)
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.
![Page 47: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/47.jpg)
Tools (Quelle: http://www.einfach-fuer-alle.de/artikel/bitv-reloaded/print/BITV-Reloaded.pdf)
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
![Page 48: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/48.jpg)
Tools (Quelle: http://www.einfach-fuer-alle.de/artikel/bitv-reloaded/print/BITV-Reloaded.pdf)
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
![Page 49: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/49.jpg)
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/
![Page 50: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/50.jpg)
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)
![Page 51: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/51.jpg)
In „eigener“ Sache – Stefan Gregorke
![Page 52: Barrierefreiheit](https://reader034.vdocuments.net/reader034/viewer/2022042814/555e245ed8b42a384f8b4d9e/html5/thumbnails/52.jpg)
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!