Uploaded on

 

More in: Business , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,054
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
6
Comments
0
Likes
3

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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