Check-Tools und deren Verwendung Theorie und Praxis Web Accessibility Vorlesung Block 6 1
Problematik Es gibt kein Tool, das sicher ohne menschliche Hilfe eine Seite überprüfen kann. Es gibt kaum so viel Zeit, daß ein Mensch eine Seite ohne maschinelle Unterstützung testen kann. Testdurchführung von einem geübten Menschen mit Unterstützung von Tools Web Accessibility Vorlesung Block 6 2
Gliederung der Tools HTML Konformität Für fertige Seiten Für Authoring Tools CSS Konformität Für fertige Seiten Für Authoring Tools Browsertests Web Accessibility Vorlesung Block 6 3
Gliederung der Tools Zugänglichkeit WAI Guideline Einhaltung WCAG 1.0 WCAG 2.0 Section 508 Einhaltung Weitere Checker / Hilfstools Web Accessibility Vorlesung Block 6 4
HTML CHECKER Web Accessibility Vorlesung Block 6 5
HTML Checker Vollständig maschinell durchführbar Im Prinzip DTD Check Daher, viele verschiedene Angebote für online und offline Web Accessibility Vorlesung Block 6 6
Online HTML Checker Vorteile Überall ohne Installation Kann Seiten auf Fremdservern als auch zumeist von Offline-Dateien überprüfen Nachteile Z.T. sehr langsam Zugangsbeschränkte Seiten können nicht überprüft werden Probleme mit Geheimhaltung Web Accessibility Vorlesung Block 6 7
Beispiele für online HTML Checker W3C Checker http://validator.w3.org Validome http://www.validome.org/ Totalvalidator http://www.totalvalidator.com/ Web Accessibility Vorlesung Block 6 8
Offline HTML Checker Nahezu in jedem HTML-Editor enthalten In vielen normalen Editoren enthalten Auch in Standalone Checktools enthalten. Web Accessibility Vorlesung Block 6 9
Offline HTML Checker Beispiele: HTML Tidy (gratis mit API weit verbreitet) http://tidy.sourceforge.net/ CSE Validator (Lite gratis, Pro kostenpflichtig) http://www.htmlvalidator.com/ HTML Validator Plugin: http://users.skynet.be/mgueury/mozilla/ Web Accessibility Vorlesung Block 6 10
CSS CHECKER Web Accessibility Vorlesung Block 6 11
CSS Checker CSS wird im Allgemeinen stiefmütterlich behandelt wenige online-validatoren: W3C CSS Validator http://jigsaw.w3.org/css-validator/ Auch wenige Offline Validatoren: TopStyle Web-Developer Firefox Plugin Web Accessibility Vorlesung Block 6 12
BROWSERUNABHÄNGIGKEIT TESTEN Web Accessibility Vorlesung Block 6 13
Browserunabhängigkeit Mehr Browserunabhängigkeitsprobleme bei: Verwenden von neueren Standards Verwenden von Skripts Verwenden von beliebten aber nicht genormten Eigenschaften Wunsch nach pixelgenauer Ausrichtung Web Accessibility Vorlesung Block 6 14
Browserunabhängigkeit testen Bei verschiedenen Herstellern i.a. leicht einfach mehrere Browser installieren. Üblich sind z.b. Microsoft Internet Explorer Mozilla Firefox Google Chrome Apple Safari Opera Conquerer Web Accessibility Vorlesung Block 6 15
Browserunabhängigkeit testen Bei verschiedenen Versionen eines Herstellers: Bei manchen Browsern ist eine Parallelinstallation möglich Verschiedene virtuelle Maschinen mit verschiedenen Versionen verwenden. IE8, Firefox 3, Chrome 2, Safari 4 IE7, Firefox 2, Chrome 1, Safari 3 Micro VMs verwenden: XenoCode bietet verschiedene Singlefile Browser an Web Accessibility Vorlesung Block 6 16
Browserunabhängigkeit testen Entsprechende Testtools verwenden IETester http://www.my-debugbar.com/wiki/ietester/homepage Xenocode online Browser http://www.xenocode.com/browsers/ Totalvalidator http://www.totalvalidator.com Adobe Dreamweaver TopStyle http://www.bradsoft.com Web Accessibility Vorlesung Block 6 17
WAI CHECKER Web Accessibility Vorlesung Block 6 18
Generelle WAI Checker WAI kann nur teilweise maschinell überprüft werden Ergebnissen aus rein maschinellen Tests nicht 100% trauen aber i.a. eine gute Grundlage Zusatzüberprüfungen sind notwendig. Z.B. Farbgebung, erklärende Texte, Einfache Sprache, Inhalte, Anpassung an den Browser, Fenstergröße, Web Accessibility Vorlesung Block 6 19
Online WAI Checker Bobby: Ursprung der Testtools von CAST Verkauf an Watchfire, Weiterverkauf an IBM IBM stellt das Produkt ein Totalvalidator http://www.totalvalidator.com/ Testet HTML, WCAG 1.0 und Section 508 Sehr genauer Test, Knackpunkt Web Accessibility Vorlesung Block 6 20
Online WAI Checker Synthia says (HiSoftware) http://www.cynthiasays.com/ Check nach WCAG 1.0 und Section 508 Bietet Browseremulation an AChecker http://www.atutor.ca/achecker/demo.php Check nach BITV (Deutschland), WCAG 1.0 & 2.0, Stanca Act (Italien) Web Accessibility Vorlesung Block 6 21
Offline WAI Checker Bobby (wird nicht mehr verkauft) Checkt WAI 1.0 Liefert andere Ergebnisse als online Version Totalvalidator http://www.totalvalidator.com Basic Version gratis Gratisregistrierung für Advanced Version notwendig Integriert sich optional mit Firefox Plugin Web Accessibility Vorlesung Block 6 22
Offline WAI Checker CSE HTML Validator Kein WAI Check in der Gratisversion nur in der Kaufversion ein WAI Checker Web Accessibility Vorlesung Block 6 23
WEITERE CHECK TOOLS Web Accessibility Vorlesung Block 6 24
Weitere Check Tools Farbhelfer Color Contrast Check http://snook.ca/technical/colour_contrast/colour.html Online Tool RGB und HSV Color Contrast Analyzer http://www.wat-c.org/index.html Offline Tool Fehlsichtigkeitssimulator für beliebige Fenster Web Accessibility Vorlesung Block 6 25
Weitere Check Tools Color Blind Web Filter http://colorfilter.wickline.org/ Online Tool Simulation von Farbfehlsichtigkeiten Keine Vergleichszahlen oder Checks Web Accessibility Vorlesung Block 6 26
BROWSERINTEGRATION Web Accessibility Vorlesung Block 6 27
Browser mit Checkfeatures Keiner der großen Browser hat echte Checkfeatures integriert Firefox hat mit einem sehr flexiblen Plugin- System großes Potential als Basisplattform Viele für Web-Developer interessante Plugins Web Accessibility Vorlesung Block 6 28
Firefox Plugins HTML Validator http://users.skynet.be/mgueury/mozilla/ Offline Check Tool Check mit SGML Parser (identisch zu W3C Validator) Check mit HTML Tidy Läuft ständig im Hintergrund mit Grafische und Zahlendarstellung Anzeige der Fehler im Quelltext möglich Web Accessibility Vorlesung Block 6 29
Firefox Plugins Web-Developer http://chrispederick.com/work/web-developer/ Sehr vielseitiges Tool! Disable Features (Java, Javascript, Cache, ) Handle Cookies Handle CSS Handle Forms Handle Images Web Accessibility Vorlesung Block 6 30
Firefox Plugins Web-Developer (Fortsetzung) Darstellung von versteckter Information (Alt-Texte, Descriptions, ) Kennzeichnung von verschiedenen Blöcken/Elementen Simulation von Bildschirmgrößen Direkt-Links zu online-checktools Web Accessibility Vorlesung Block 6 31
Firefox Plugins Totalvalidator http://www.totalvalidator.com/tool/extension.html Direkter Link zu online Tool Integration des offline Tools HTML Validator WCAG 1.0 Validator Section 508 Validator Link Checker Web Accessibility Vorlesung Block 6 32
Firefox Plugins Popup Alt Text http://piro.sakura.ne.jp/xul/_popupalt.html.en Zeigt Alt-Texte wie ältere Internet Explorer Versionen als Popup an Link Checker http://www.kevinfreitas.net/extensions/linkchecker/ Testet alle Links einer Seite und markiert die Links entsprechend Web Accessibility Vorlesung Block 6 33
Internet Explorer Toolbars IE ist mit Toolbars erweiterbar Wenige Toolbars in Development Keine Toolbar fertig, die häufig im Einsatz ist. Web Accessibility Vorlesung Block 6 34
HILFSTOOLS Web Accessibility Vorlesung Block 6 35
Hilfstools Berichte Abhängig vom Ziel (Gutachten über Erfolg, Feedback an Entwickler, ) Erhebungsprotokolle WAT http://www.is.tuwien.ac.at/tools/wat/ Hilfswerkzeug zum Protokollieren von vielen Seiten und Sites Anleitung bei der Überprüfung Web Accessibility Vorlesung Block 6 36
HAUSÜBUNG Web Accessibility Vorlesung Block 6 37
Hausübung Jeder bekommt oder wählt drei Internetseiten Test der Startseite und eine Unterseite mit den vorgestellten Tools Eintragung der Ergebnisse in WAT Datei mit samt der Screenshots per ZIP abgeben Kurzer schriftlicher Bericht über die Seiten (in Englisch) mit den Highlights Web Accessibility Vorlesung Block 6 38
DEMONSTRATION UND DISKUSSION Web Accessibility Vorlesung Block 6 39