Sprung zum Inhalt [/] Tastaturkürzel / Accesskeys [0]

Webdesign nach Maß von webdesign weisshart

Testwerkzeuge und Validatoren

Sauberen, korrekten (X)HTML- und CSS-Code schreiben - ob von Hand, oder mit einem CMS-System, mit einer Blog- oder Forensoftware, ist eine Sache. Aber auch hierbei gilt: Kontrolle ist besser. Um Webseiten nach allen denkbaren Kriterien zu testen, gibt es eine Fülle von Werkzeugen, viele davon online.

Ich habe mal in meine Werkzeugkiste gegriffen, und stelle meine wichtigsten Tools vor:

Validatoren

(X)HTML

  • Der Klassiker - das Original vom W3C Konsortium
  • Validome zeigt auch manchen Fehler, der vom W3C Validator nicht reklamiert wird. Der Validome gibt ausserdem seine Meldungen in deutsch aus.
  • WDG HTML Validator Batch Validierung bis maximal 100 Seiten - sehr komfortabel.
  • HTML Validator addon für Firefox
    Das Firefox addon fügt der Quellcode-Anzeige des Browsers den altbekannten Tidy-Validator von W3C hinzu. Die ausgegebenen Hinweise bei Fehlern sind gut interpretierbar.
    Eine ungemein erzieherische Wirkung geht von einem Icon in der Statuszeile des Browsers aus, das ohne weiteres Zutun und realtime fehlerfreie Seiten mit einem grünen Haken kennzeichnet.
  • Total Validator: The all-in-one validator
    Die »eierlegende Wollmilchsau«. HTML- und Link-Check, Screenshots mit sehr vielen Browsern (Klasse!), und sogar eine - wie nicht anders zu erwarten, für Deutsch völlig unbrauchbare - Rechtschreibprüfung in mehreren Sprachen.
    Alle Checks in einem Rutsch.

CSS

RSS Feeds

Links

  • W3C Checklink
    So genannte tote Links können ganz schnell durch Tippfehler entstehen, oder später durch Änderungen beim Linkziel. Der Link-Validator prüft die Erreichbarkeit aller Links auf einer Seite.
  • WDG Link Valet
    Dieses Tool durchsucht rekursiv alle Links auf der gleichen Site. (Dies führt zu sehr langen Ausführungzeiten, und sehr großen Reportdateien.)

Universelle Testwerkzeuge - bundles

  • Web Developer Extension für Firefox - Der Alleskönner.
    Eine Aufzählung der enthaltenen Werkzeuge würde jeden Rahmen sprengen.
    Das von mir am häufigsten genutzte Werkzeug: Edit CSS - CSS Stylesheets online editieren, auch auf fremden Seiten, mit sofortiger Ansicht des Ergebnisses.
    Alle oben genannten Validatoren sind übrigens im der Web Devoloper Extension integriert, bzw. können nachträglich integriert werden.
  • Firebug
    Das Firebug addon für Firefox ist ein ganz schweres Geschütz, und kann neben HTML- und CSS-Fehlern auch hartnäckige Javascript Fehler aufdecken.

Geschwindigkeit

Schnelle Seiten - das war mal ein Thema zu Modemzeiten. Nein. Das ist ein Thema. Zum Beispiel aufgrund der zunehmenden Bedeutung von mobilen Webbrowsern. Wenn man füher einfach versuchte, Webseiten klein zu halten, ist das in Zeiten von multimedialen Inhalten nicht mehr die alleinige Lösung. Andere Kriterien spielen eine zunehmende Rolle. (Rubrik im Aufbau)

  • webpagetest.orgMein absoluter Favorit. Gibt vor allem viele zielführende und verständliche Hinweise zur Optimierung.
  • Web Page Analyzer
    analysiert die Größe aller Elemente einer Seite, und gibt Tipps zur Optimierung. Dass das Tool (noch) kein DSL kennt, sollte kein Kriterium sein. Entscheidend sind die vielen Details, die das Tool listet.
  • Pingdom Tools
    analysiert die Ladezeit einer Seite.

Testen in verschiedenen Browsern

  • Browserpool
    13.05.2010: Browserpool (http://www.browserpool.de/kc/wob/portal.jsp) scheint wohl endgültig offline zu sein. Schade.
    Im Gegensatz zu einem simplen Screenshot-Service kann mit Browserpool neben dem Layout vor allem auch die Funktionalität einer Seite getestet werden. Nur über so einen Livetest können alle Funktionen, wie z. B. ein Aufklapp-Menü, wirklich geprüft werden.
    Browserpool erfordert die Installation einer Zugangssoftware.
  • Weit weniger als Browserpool, nämlich nur einen Screenshot, zeigt http://browsershots.org/. Dafür aber in 4 verschiedenen Betriebssystem, und einer Unzahl von Browserversionen. Warum der IE nur in Version 8 und 11 zur Verfügung steht, Firefox aber in 30 Versionen, angefangen von 1.0, ist wohl der Tatsache geschuldet, dass die parallele Installation verschiedener Browserversionen beim IE besonders aufwändig ist.
  • Einen Screenshot in vielen Verschiedenen Browsern kann man übrigens auch mit einem webpagetest.org erzeugen. Obwohl das Tool ja weitaus mächtiger ist, als ein einfacher Screeshot-Dienst.

Barrierefreiheit

  • Auch wenn es auf den ersten Blick übertrieben erscheint: Das beste Werkzeug zum Testen auf Barrierefreiheit ist ein Screen Reader. Quelle: Jens Meiert
    Ich muß hier allerdings eine Einschränkung machen: Das beste Werkzeug taugt nur in der Hand eines Experten.
  • NVDA
    Der kostenlose Screen Reader NVDA ist zum Testen ideal.
    Eine Anleitung zur Installation
  • Jaws
    Den am weitesten verbreiteten Screen Reader Jaws gibt es in einer kostenlosen Demo-Version.
    Eine recht detaillierte Anleitung zur Benutzung des Screen Readers Jaws.
  • Webformator
    Der Webformator ist kein Screen Reader, sondern ein Hilfswerkzeug, das ursprünglich zur Unterstützung von Screen Readern entwickelt wurde, aber vorzüglich geeignet ist, um eine Vorstellung zu erzeugen, wie Screen Reader eine Seite zeigen.
    Eine ausführliche Anleitung gibt es bei www.wai-austria.at

Die folgenden Tools zum automatischen Testen auf Barrierefreiheit können das Know-how eines Fachmanns nicht ersetzen. Aber sie können einem Fachmann die Arbeit erleichtern, und einem lernwilligen Einsteiger Tipps zur Weiterbildung liefern.

  • Cynthia
    Das wohl bekannteste Tool. Testet nach WCAG 1.0 Priorität 2 und 3 sowie Section 508 (scheint offline zu sein.)
  • imergo® vom Fraunhofer Institut
    geht einen Schritt weiter - und nennt das dann Web Compliance. Die Interpretation der Testergebnisse erfordert allerdings fortgeschrittene Kenntnisse.
  • WAVE von WebAIM
    WAVE kann einfach online genutzt werden, oder auf verschiedene Arten in die eigene Arbeitsumgebung integriert werden.
    Wie bei imergo erfordert die Interpretation der Testergebnisse fortgeschrittene Kenntnisse.
  • wickline simuliert verschiedene Arten von Farbenblindheit.
  • Firefox Accessibility Extension
    Eine Werkzeugsammlung ähnlich der Web Developer Toolbar, mit Schwerpunkt auf Barrierefreiheit.
    Pfiffig: automatischer Kontrasttest nach WCAG 2.0
  • ATRC Web Accessibility Checker
    Ein Accessibility Checker nach WCAG 2.0 der Universität Toronto.
    Der Nachfolger von A-Prompt. Scheint noch sehr Beta zu sein - und leider nur sehr selten erreichbar.
  • WebAIM Kontrast Checker
    Sehr schöner Kontrast-Checker nach WCAG 2.0 Kriterien. Nicht mehr und nicht weniger als das Notwendige.
  • WCAG Contrast checker
    Ein Firefox Add-on, das Kontraste nach WCAG 1.0. oder 2.0 prüft. Die Prüfung erfolgt interaktiv. Elemente auf der zu prüfenden Seite werden mit der Maus angewählt, die Kontrastwerte in einer Seitenleiste angezeigt. Sehr schön!
  • Colour Contrast Analyser
    Ein Tool zum Download auf den eigenen Rechner. Nur exe, keine Installation. Einige nette Zusatzfeatures, z. B. Kontrastcheck unter Berücksichtigung von Farbfehlsichtigkeit, sowie Umwandlung beliebiger Bilder entsprechend Farbfehlsichtigkeit.
  • PDF-Accessibility-Checker (PAC)
    Das Gratis-Programm PAC testet PDF-Dateien rasch bezüglich Barrierefreiheit. PAC dient der Unterstützung von Experten- und Betroffenen-Tests bei der Beurteilung. Nur exe, keine Installation.
  • LogFocus - hilfreiches Bookmarklet beim Testen von Keyboard Accessibility
    Zugänglichkeit für Nutzer ohne Maus zu ermöglichen ist einer der größten und wichtigsten Schritte beim Aufbau einer barrierefreien Webseite. Beim Testen von Keyboard Accessibility findet man sich immer wieder nach dem Drücken der Tabtaste in der Situation: "Wo ist mein Cursor?" bzw. "welches Element hat eigentlich gerade den Focus?". Gerade bei Elementen die Offscreen verschoben wurden tappt/tabt man dann gerne und lang im dunkeln...
  • Accessify
    Eine schöne Sammlung verschiedener Accessibility Tools:

Farbfehlsichtigkeit

Farbfehlsichtigkeit ist weit verbreitet. 8 bis 10% der Männer leiden unter irgend einer Form von Farbfehlsichtigkeit. Dennoch kommt dieses Thema im Zusammenhang mit Barrierefreiheit wenig bis kaum zur Sprache. Tools zum Testen gibt es wie Sand am Meer. Ich benutze und empfehle

Semantik - Struktur

Eine wichtige Voraussetzung für Barrierefreiheit ist eine logische Überschriften-Struktur. Viele Benutzer von Screen Readern verschaffen sich an Hand der Überschriften einen ersten Überblick.

  • Das Firefox Add-on HeadingsMap zeigt die Gliederung einer Webseite an Hand der Überschriften.

Exoten und Sonstige

  • Qualidator
    Der Qualidator überprüft die ersten 5 Seiten einer Website mit ca. 60-70 automatischen Tests auf die Kernpunkte der Bereiche Usability (Benutzungsfreundlichkeit), Accessibility (Zugänglichkeit), SEO (Suchmaschinenoptimierung) und Quality (technische Qualität).
    Quality monitored by qualidator.com Als Belohnung für durchgeführte Tests gibt es einen Eintrag in die Liste der top bewerteten Websites, und ein Pickerl zum Einbau in die eigene Site.
  • Zuletzt noch eine eigene Entwicklung: Kontrast-Test
    Gibt es zu einer bestimmten Farbe / Hintergrundfarbe überhaupt eine Kontrastfarbe, die nach WCAG 1.0 zulässig ist?
    Kurioserweise gibt es Farben, auf die das nicht zutrifft. Dieses Werkzeug kann Klarheit schaffen.

Diese Aufstellung wird fallweise erweitert und / oder aktualisiert.


Kommentar schreiben

2 Kommentare

  1. Eva Papst schrieb am Montag, 01.02.10 07:52 Uhr:

    Eine hervorragende und empfehlenswerte Sammlung, die ihresgleichen sucht - und damit ein probates Heilmittel gegen die oft gehörte Behauptung (Ausrede?), seriöse Qualitätskontrolle sei nicht möglich.

  2. STUBE13 schrieb am Donnerstag, 03.02.11 12:43 Uhr:

    Super, vielen Dank! Hab mich die letzten Wochen immer abgemüht einzelne Tools zu finden....

    Merci!

Einen Kommentar zu diesem Artikel schreiben:

Über Ihren Kommentar oder Ihre Frage zu diesem Artikel freue ich mich. Ich behalte mir jedoch vor, Einträge wider die guten Sitten, unsinnige Einträge, oder Spam kommentarlos zu entfernen.

? Anweisungen zur Eingabe von BB Code Wenn Javascript verfügbar ist, können Sie die obigen Schaltflächen zum Einfügen der folgenden Steuercodes verwenden (an der Cursorposition oder um gegebenenfalls markierten Text):

[a]example.org[/a] um eine URL zu verlinken bzw.
[a]example.org Beschreibung der verlinkten Seite[/a]
[b]als wichtig <strong>[/b] hervorgehobener Text
[c]Quellcode[/c] oder optisch hervorgehobenes Zitat

Tastaturkürzel

zum Seitenanfang