Barrierefreies Internet VU Check Tools 1 · Barrierefreies Internet VU – Check Tools 9 Online...

39
Barrierefreies Internet VU – Check Tools 1

Transcript of Barrierefreies Internet VU Check Tools 1 · Barrierefreies Internet VU – Check Tools 9 Online...

Page 1: 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

Page 2: 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 2

Check-Tools und deren Verwendung

Theorie und Praxis

Page 3: 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 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

Page 4: 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 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?

Page 5: 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 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)

Page 6: 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 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!

Page 7: 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 7

(X)HTML CHECKER

Page 8: 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 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

Page 9: 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 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

Page 10: 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 10

Online HTML Checker

• Beispiele – W3C Checker

http://validator.w3.org

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

– Tidy

http://infohound.net/tidy/

Page 11: 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 11

Offline HTML Checker

• Nahezu in jedem HTML-Editor enthalten

• In vielen 'normalen' Editoren enthalten

• Auch in standalone Checktools enthalten

Page 12: 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 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/

Page 13: 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 13

CSS CHECKER

Page 14: 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 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

Page 15: 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 15

DEVELOPER / CHECKER

Page 16: 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 16

Developer / Checker

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

–Web-Developer Firefox Plugin

–Dreamweaver hat echten CSS checker

– IE8/IE9 Entwickler Tools integriert

Page 17: 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 17

BROWSERUNABHÄNGIGKEIT TESTEN

Page 18: 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 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

Page 19: 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 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

Page 20: 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 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

Page 21: 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 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/

Page 22: 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 22

WAI CHECKER

Page 23: 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 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, …

Page 24: 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 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)

Page 25: 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 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

Page 26: 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 26

WEITERE CHECK TOOLS

Page 27: 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 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

Page 28: 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 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

Page 29: 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 29

BROWSERINTEGRATION

Page 30: 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 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

Page 31: 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 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

Page 32: 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 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

Page 33: 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 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

Page 34: 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 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

Page 35: 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 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

Page 36: 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 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

Page 37: 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 37

HILFSTOOLS

Page 38: 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 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

Page 39: 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 39

WAT

• Für HÜ

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