Barrierefreies Internet VU Check Tools 1 · Barrierefreies Internet VU – Check Tools 9 Online HTML Checker •Vorteile –Überall ohne Installation –Kann sowohl Seiten auf Fremdservern

Barrierefreies Internet VU – Check Tools 1


Check-Tools und deren Verwendung

Theorie und Praxis


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


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?


Verschiedene Tests

• Zugänglichkeit

– WAI Guideline Einhaltung

• WCAG 1.0

• WCAG 2.0

– Section 508 Einhaltung

– Weitere Nationale Standards (für Österreich nicht relevant)


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!


(X)HTML CHECKER


(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


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


Online HTML Checker

• Beispiele – W3C Checker

http://validator.w3.org

– Validome http://www.validome.org/

– Tidy

http://infohound.net/tidy/


Offline HTML Checker

• Nahezu in jedem HTML-Editor enthalten

• In vielen 'normalen' Editoren enthalten

• Auch in standalone Checktools enthalten


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/


CSS CHECKER


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


DEVELOPER / CHECKER


Developer / Checker

– TopStyle (auch für html / CSS programmieren)

–Web-Developer Firefox Plugin

–Dreamweaver hat echten CSS checker

– IE8/IE9 Entwickler Tools integriert


BROWSERUNABHÄNGIGKEIT TESTEN


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


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



• 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





• Entsprechende Testtools verwenden

– Browsershots

http://browsershots.org/

– IETester (offline) http://www.my-debugbar.com/wiki/IETester/HomePage

– TopStyle http://www.topstyle4.com/


WAI CHECKER


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, …


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)


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


WEITERE CHECK TOOLS


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


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


BROWSERINTEGRATION


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


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


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


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


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


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


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


HILFSTOOLS


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


WAT

• Für HÜ

• http://reha04nov.is.tuwien.ac.at/wat/login.php

Barrierefreies Internet VU Check Tools 1 · Barrierefreies Internet VU – Check Tools 9 Online HTML Checker •Vorteile –Überall ohne Installation –Kann sowohl Seiten auf Fremdservern

Documents