Barrierefreies Internet VU Check Tools 1 · Barrierefreies Internet VU – Check Tools 9 Online...
Transcript of Barrierefreies Internet VU Check Tools 1 · Barrierefreies Internet VU – Check Tools 9 Online...
Barrierefreies Internet VU – Check Tools 1
Barrierefreies Internet VU – Check Tools 2
Check-Tools und deren Verwendung
Theorie und Praxis
Barrierefreies Internet VU – Check Tools 3
Allgemein
• Es gibt (bisher) kein Tool, das sicher und ohne menschliche Hilfe eine Seite vollständig prüfen kann.
• Es gibt kaum so viel Zeit, dass ein Mensch eine Seite ohne ‚maschinelle‘ Unterstützung testen kann.
Testdurchführung von einem geübten Menschen mit Unterstützung von Tools
Barrierefreies Internet VU – Check Tools 4
Verschiedene Tests
• (X)HTML Konformität – Für fertige Seiten
– Für Authoring Tools
• CSS Konformität – Für fertige Seiten
– Für Authoring Tools
• Browsertests – Wie rendern verschiedene Browser (und
Betriebssysteme) ein und den selben Code?
Barrierefreies Internet VU – Check Tools 5
Verschiedene Tests
• Zugänglichkeit
– WAI Guideline Einhaltung
• WCAG 1.0
• WCAG 2.0
– Section 508 Einhaltung
– Weitere Nationale Standards (für Österreich nicht relevant)
Barrierefreies Internet VU – Check Tools 6
Disclaimer
• Die vorgestellten Tools sind nicht die einzig Verfügbaren, sondern sollen als Beispiele dienen.
• Sie erheben nicht den Anspruch 'die Besten' zu sein oder für jedwede Aufgabe gleich gut geeignet zu sein.
• -> Use with care!
Barrierefreies Internet VU – Check Tools 7
(X)HTML CHECKER
Barrierefreies Internet VU – Check Tools 8
(X)HTML Checker
• Vollständig ‚maschinell‘ durchführbar
• Prüft gegen eine gegebene DTD (Doc Type Definition)
• Daher verschiedene Angebote für online und offline Tests
Barrierefreies Internet VU – Check Tools 9
Online HTML Checker
• Vorteile – Überall ohne Installation
– Kann sowohl Seiten auf Fremdservern als auch meist von Offline-Dateien überprüfen
• Nachteile – z.t. (sehr) langsam
– Zugangsbeschränkte Seiten können nicht überprüft werden
– Probleme mit Geheimhaltung
Barrierefreies Internet VU – Check Tools 10
Online HTML Checker
• Beispiele – W3C Checker
http://validator.w3.org
– Validome http://www.validome.org/
– Tidy
http://infohound.net/tidy/
Barrierefreies Internet VU – Check Tools 11
Offline HTML Checker
• Nahezu in jedem HTML-Editor enthalten
• In vielen 'normalen' Editoren enthalten
• Auch in standalone Checktools enthalten
Barrierefreies Internet VU – Check Tools 12
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/ (kostenpflichtig) http://www.freehtmlvalidator.com/ (gratis)
– HTML Validator Plugin (für FF) http://users.skynet.be/mgueury/mozilla/
Barrierefreies Internet VU – Check Tools 13
CSS CHECKER
Barrierefreies Internet VU – Check Tools 14
CSS Checker
• Neben gültigem (X)HTML auch gültiges CSS notwendig
• Online-Validatoren:
– W3C CSS Validator http://jigsaw.w3.org/css-validator/
– CSS Portal (auch allgemeines zu CSS)
http://www.cssportal.com/css-validator
Barrierefreies Internet VU – Check Tools 15
DEVELOPER / CHECKER
Barrierefreies Internet VU – Check Tools 16
Developer / Checker
– TopStyle (auch für html / CSS programmieren)
–Web-Developer Firefox Plugin
–Dreamweaver hat echten CSS checker
– IE8/IE9 Entwickler Tools integriert
Barrierefreies Internet VU – Check Tools 17
BROWSERUNABHÄNGIGKEIT TESTEN
Barrierefreies Internet VU – Check Tools 18
Browserunabhängigkeit
• Browserunabhängigkeitsprobleme bei:
– Verwenden von neueren Standards
– Verwenden von Skripts
– Verwenden von beliebten aber nicht genormten Eigenschaften
– Wunsch nach pixelgenauer Ausrichtung
– Verwenden von komplizierten CSS
Barrierefreies Internet VU – Check Tools 19
Browserunabhängigkeit testen
• Bei verschiedenen Herstellern i.a. leicht einfach mehrere Browser installieren. Üblich sind z.B. – Microsoft Internet Explorer
– Mozilla Firefox
– Google Chrome
– Safari
– Opera
– Konqueror
Barrierefreies Internet VU – Check Tools 20
Browserunabhängigkeit testen
• Bei verschiedenen Versionen eines Herstellers:
– Bei manchen Browsern ist eine Parallelinstallation möglich
– Verschiedene virtuelle Maschinen mit verschiedenen Versionen verwenden.
• IE9, Firefox 4, Chrome 11, Safari 5
• IE8, Firefox 3, Chrome 2, Safari 4
• IE7, Firefox 2, Chrome 1, Safari 3
Barrierefreies Internet VU – Check Tools 21
Browserunabhängigkeit testen
• Entsprechende Testtools verwenden
– Browsershots
http://browsershots.org/
– IETester (offline) http://www.my-debugbar.com/wiki/IETester/HomePage
– TopStyle http://www.topstyle4.com/
Barrierefreies Internet VU – Check Tools 22
WAI CHECKER
Barrierefreies Internet VU – Check Tools 23
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, …
Barrierefreies Internet VU – Check Tools 24
Online WAI Checker
• Synthia says (HiSoftware) http://www.cynthiasays.com/ – Check nach Section 508 und WCAG 1.0
– Bietet Browseremulation an
• AChecker http://www.atutor.ca/achecker/demo.php – Check nach BITV (Barrierefreie
Informationstechnik Verordnung; Deutschland), WCAG 1.0 & 2.0, Stanca Act (Italien)
Barrierefreies Internet VU – Check Tools 25
Offline WAI Checker
• Totalvalidator http://www.totalvalidator.com
– Basic Version gratis
– Pro Version ist kostenpflichtig
– Integriert sich optional mit Firefox Plugin
• CSE HTML Validator
– Auch Javascript Lint
Barrierefreies Internet VU – Check Tools 26
WEITERE CHECK TOOLS
Barrierefreies Internet VU – Check Tools 27
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
Barrierefreies Internet VU – Check Tools 28
Weitere Check Tools
– Color Blind Web Filter http://colorfilter.wickline.org/
• Online Tool
• Simulation von Farbfehlsichtigkeiten
• Keine Vergleichszahlen oder Checks
– Color Scheme Designer
http://www.colorschemedesigner.com
• Erstellen von Farbpaletten
• Farbfehlsichtigkeit checken
Barrierefreies Internet VU – Check Tools 29
BROWSERINTEGRATION
Barrierefreies Internet VU – Check Tools 30
Browser mit Checkfeatures
• Keiner der ‚großen Browser‘ hat echte Checkfeatures integriert (Begonnen haben IE8/IE9)
• Firefox hat mit einem sehr flexiblen Plugin-System großes Potential als Basisplattform
Viele für Web-Developer interessante Plugins
Barrierefreies Internet VU – Check Tools 31
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
Barrierefreies Internet VU – Check Tools 32
Firefox Plugins
• Web-Developer http://chrispederick.com/work/web-developer/
– Sehr vielseitiges Tool! (Auch für Chrome)
– Disable Features (Java, Javascript, Cache, …)
– Handle Cookies
– Handle CSS
– Handle Forms
– Handle Images
Barrierefreies Internet VU – Check Tools 33
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
Barrierefreies Internet VU – Check Tools 34
Firefox Plugins
• Totalvalidator http://www.totalvalidator.com/tool/extension.html
– Integration des offline Tools (online Tool nicht mehr verfügbar)
– HTML Validator
– WCAG 1.0 Validator
– WCAG 2.0 Validator
– Section 508 Validator
– Link Checker
Barrierefreies Internet VU – Check Tools 35
Firefox Plugins
• Firefox Accessibility Extension http://firefox.cita.uiuc.edu/
– ‚screenreaderartige‘ Anzeigemöglichkeiten (Listen von Header, Links, Objekten, …)
– Schnellzugriff auf WAI Checker
– Kontrastüberprüfungen
– ARIA Tests
Barrierefreies Internet VU – Check Tools 36
Firefox Plugins
• Popup ALT Attribute https://addons.mozilla.org/de/firefox/addon/popup-alt-attribute/
– Zeigt Alt-Texte wie ältere Internet Explorer Versionen als Popup an
• Link Evaluator http://evaluator.oclc.org/
– Testet alle Links einer Seite und markiert die Links entsprechend
Barrierefreies Internet VU – Check Tools 37
HILFSTOOLS
Barrierefreies Internet VU – Check Tools 38
Hilfstools
• Berichte – Abhängig vom Ziel (Gutachten über Erfolg, Feedback an
Entwickler, …) – Fireshot gute Unterstützung weil schnelle screenshots mit
Markierung möglich
• Erhebungsprotokolle – WAT
http://www.is.tuwien.ac.at/tools/wat/ • Hilfswerkzeug zum Protokollieren von Seiten und Sites • Anleitung bei der Überprüfung
– WAT Online
Barrierefreies Internet VU – Check Tools 39
WAT
• Für HÜ
• http://reha04nov.is.tuwien.ac.at/wat/login.php