Barrierefreiheit im WebGenerellesAnforderungen und Tools  (Quelle: http://www.einfach-fuer-   alle.de/artikel/bitv-relo...
Barrierefreiheit im Web       Barrierefreiheit           versus       Barrierearmut
 Barrierefreiheit in der IT Forderung zur Nutzung von Web- und Internet-Angeboten für beeinträchtigte  Menschen Regelun...
 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)
 Barrierefreiheit in der IT BITV-Anforderung 1: Äquivalente Alternativen    Textuelle Alternativen für Nichttextelement...
 Barrierefreiheit in der IT BITV-Anforderung 2: Farben und Kontraste    Zirka zehn Prozent des männlichen Publikums ist...
 Barrierefreiheit in der IT BITV-Anforderung 3: Sauberer Code    Sauberer Code ist nicht nur der Zeitvertreib von HTML-...
 Barrierefreiheit in der IT                    HTML 
 Barrierefreiheit in der IT                       CSS 
 Barrierefreiheit in der IT   http://www.jslint.com/                            JS 
 Barrierefreiheit in der IT         Unordnung         vermeiden…
 Barrierefreiheit in der IT
 Barrierefreiheit in der IT (Bildquelle Unordnung: www.radiobremen.de)             Still more             testing…
•       Mediengerechter Einsatz von Bildkomprimierungsformaten                         •       Analyse-Ergebnis Yahoo! YSl...
•   Analyse-Ergebnis des JavaScript Codes mit JSLint    Zu übernehmende JavaScript-Zeilen werden validiert eingebunden bzw...
Testergebnisse seittest.deAus dem seittest-Ergebnisbericht wird insbesondere der Punkt „SPAM“-Prüfung betrachtet. Alle wei...
Testergebnisse rankflex.comAus dem rankflex-Ergebnisbericht führt insbesondere der Punkt Social Media zur prominenteren Ei...
37 % 25 % 60 % 53 %InfoInfo
Testergebnisse seitwert.deDer DMOZ-Eintrag sowie der Technik-Block sind hier hervorzuheben und in der Errichtungsarbeit du...
Testergebnisse searchmetricsUm die SEO in Berichten wie von searchmetrics zu verbessern und den Wert eines Textlinks (mome...
 Barrierefreiheit in der IT BITV-Anforderung 4: Sprachliche Besonderheiten    Die Kennzeichnung von Besonderheiten wie ...
 Barrierefreiheit in der IT
 Barrierefreiheit in der IT
 Barrierefreiheit in der IT  Sprache GLOBAL  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3....
 Barrierefreiheit in der IT BITV-Anforderung 5: Tabellen    Layout-Tabellen haben mittlerweile ihr Verfallsdatum deutli...
 Barrierefreiheit in der IT BITV-Anforderung 9: Geräteunabhängigkeit    Wenn Ihre Seiten für Sprachausgaben, Braillezei...
 Barrierefreiheit in der IT BITV-Anforderung 13: Bedienung    Klassische Usability-Faktoren haben ebenso einen starken ...
 Barrierefreiheit in der IT Beispiel für techn. Forderungen    Forderung: Alle Nicht-Textelemente sollen textuelle Alte...
 Barrierefreiheit in der IT Longdescription    Hier wird eine URL auf hinterlegt    IDEE: Eigenen Ausgabekanal plainte...
 Barrierefreiheit in der IT Beispiel für techn. Forderungen    Im Fließtext sollen anderssprachige Begriffe und Abkürzu...
 Barrierefreiheit in der IT Weitere Anforderungen „Bilder sind so zu gestalten, dass die Kombinationen aus Vordergrund–...
 Tools   (Quelle: http://www.einfach-fuer-alle.de/artikel/bitv-reloaded/print/BITV-Reloaded.pdf) Browser-Erweiterungen (...
 Tools   (Quelle: http://www.einfach-fuer-alle.de/artikel/bitv-reloaded/print/BITV-Reloaded.pdf) Browser-Erweiterungen (...
 Tools   (Quelle: http://www.einfach-fuer-alle.de/artikel/bitv-reloaded/print/BITV-Reloaded.pdf) Browser-Erweiterungen (...
 Zukunft Avatare mit Gebärdensprache    http://www.barrierekompass.de/weblog/index.php?itemid=343    http://blog.apert...
Wie „verkaufen“? Nicht WTAG sondern WCAG 1.0 oder WCAG 2.0 in Angebot schreiben     TYPO3 ist nicht WTAG konform! Mehrw...
 In „eigener“ Sache – Stefan Gregorke
 In „eigener“ Sache Stefan Gregorke Blinder Tester für Barrierefreiheit Selbständigkeit im Aufbau Zielgruppe     Web...
Barrierefreiheit
Barrierefreiheit
Barrierefreiheit
Barrierefreiheit
Barrierefreiheit
Barrierefreiheit
Barrierefreiheit
Barrierefreiheit
Barrierefreiheit
Barrierefreiheit
Barrierefreiheit
Upcoming SlideShare
Loading in...5
×

Barrierefreiheit

1,210

Published on

Published in: Business, Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,210
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Barrierefreiheit

  1. 1. 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
  2. 2. Barrierefreiheit im Web Barrierefreiheit versus Barrierearmut
  3. 3.  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
  4. 4.  Braille-Zeile für hapt. Umsetzung von Text (https://www.lotto- bayern.de/)
  5. 5.  Augen-Befehle (http://www.stiftung-barrierefrei-kommunizieren.de/)
  6. 6.  Spezial-Tastaturen (http://farm2.static.flickr.com//)
  7. 7.  Kopfstab (http://www.mostviertel.com)
  8. 8.  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
  9. 9.  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…
  10. 10.  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!!!
  11. 11.  Barrierefreiheit in der IT HTML 
  12. 12.  Barrierefreiheit in der IT CSS 
  13. 13.  Barrierefreiheit in der IT http://www.jslint.com/ JS 
  14. 14.  Barrierefreiheit in der IT Unordnung vermeiden…
  15. 15.  Barrierefreiheit in der IT
  16. 16.  Barrierefreiheit in der IT (Bildquelle Unordnung: www.radiobremen.de) Still more testing…
  17. 17. • 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)
  18. 18. • Analyse-Ergebnis des JavaScript Codes mit JSLint Zu übernehmende JavaScript-Zeilen werden validiert eingebunden bzw. durch Bibliotheksfunktionen ersetzt.
  19. 19. Testergebnisse seittest.deAus dem seittest-Ergebnisbericht wird insbesondere der Punkt „SPAM“-Prüfung betrachtet. Alle weiteren Punkte erübrigen sich durch Neuentwicklung.
  20. 20. Testergebnisse rankflex.comAus 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.
  21. 21. 37 % 25 % 60 % 53 %InfoInfo
  22. 22. Testergebnisse seitwert.deDer DMOZ-Eintrag sowie der Technik-Block sind hier hervorzuheben und in der Errichtungsarbeit durch CPS inbegriffen.
  23. 23. Testergebnisse searchmetricsUm 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.
  24. 24.  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>
  25. 25.  Barrierefreiheit in der IT
  26. 26.  Barrierefreiheit in der IT
  27. 27.  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>
  28. 28.  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…
  29. 29.  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…
  30. 30.  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…
  31. 31.  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
  32. 32.  Barrierefreiheit in der IT Longdescription  Hier wird eine URL auf hinterlegt  IDEE: Eigenen Ausgabekanal plaintext, sodass Verwaltung der Text in TYPO3 bleibt
  33. 33.  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
  34. 34.  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/
  35. 35.  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.
  36. 36.  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
  37. 37.  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
  38. 38.  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/
  39. 39. 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)
  40. 40.  In „eigener“ Sache – Stefan Gregorke
  41. 41.  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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×