Artikel-Hilfsmenü

Kommentare (2)

Freitag, 29. Januar 2010 – aktualisiert am Donnerstag, 26. August 2021

Webdesign · Tools

Validatoren

(X)HTML

• Der Klassiker - das Original vom W3C Konsortium
• Alternativ – falls der W3C-Validator mal down ist

CSS

• Der CSS Validator vom W3C Konsortium

RSS Feeds

• Der RSS Feed Validator vom W3C Konsortium

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 und Chrome - Der Alleskönner.
  Eine Aufzählung der enthaltenen Werkzeuge würde jeden Rahmen sprengen.
  Alle oben genannten Validatoren sind übrigens im der Web Devoloper Extension integriert, bzw. können nachträglich integriert werden.
• Die DevTools von Chrome: »Anzeigen → Entwickler → Entwicklertools«. Auch mit dem Tastaturkürzel Cmd+Option+I (Mac) oder Strg+Shift+I (Windows) lassen sich die Tools öffnen.
  oder die Entwicklerwerkzeuge in Firefox: Tastaturkürzel Cmd+Option+I (Mac) oder Strg+Shift+I (Windows)
  Mächtige Werkzeugsammlungen, die aber entsprechende Einarbeit erfordern.

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.org Mein Favorit. Gibt vor allem viele zielführende und verständliche Hinweise zur Optimierung.
• PageSpeed Insights von Google legt besonderen Wert auf mobile Seiten.
• Pingdom Tools
  analysiert die Ladezeit einer Seite.

Testen in verschiedenen Browsern

• Speziell für alle (von 5.5 bis 11) Versionen des Internet Explorer: Der IE NetRenderer. Schneller als alle anderen Screenshot-Services. Bitte auch die Anleitung lesen, um vollen Nutzen aus dem Tool zu ziehen.
• Einen Screenshot in vielen verschiedenen Browsern kann man übrigens auch mit webpagetest.org erzeugen. Obwohl das Tool ja weitaus mächtiger ist, als ein einfacher Screeshot-Dienst.
• Ein sehr mächtiges Werkzeug ist browserstack.com

  With BrowserStack, you can test your mobile apps and websites across 2,000+ real devices, browsers and operating systems.

  Der Service ist nicht gerade billig (ab US$ 29 pro Monat). Es gibt aber ein "Free Trial" – Anmeldung erforderlich – mit beschränkter Zugriffsdauer.

  Each device is available for up to 1 minute during Free Trial.

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.
• Auf allen Macs, iPhones und iPads ist VoiceOver im Betriebssystem enthalten, auf Android-Geräten ist Talkback installiert.

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.

• CynthiaSays
  Das wohl bekannteste Tool. Testet nach WCAG 2.0 Level A, AA und AAA sowie Section 508. Die Ergebnisse sind allerdings schwer zu imterpretieren.
  CynthiaSays wird Ende 2021 eingestellt. Infoseite [englisch]
• 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.
• WebAIM Kontrast Checker
  Sehr schöner Kontrast-Checker nach WCAG 2.0 Kriterien. Nicht mehr und nicht weniger als das Notwendige.
• Colour Contrast Analyser
  Ein Tool zum Download auf den eigenen Rechner.
• 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.
• 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

• colorfilter.wickline.org
• Mit der Chrome Erweiterung SEE können Sie das Web so betrachten, wie es ein Benutzer mit einer Sehbehinderung tun würde.
• Eine einfache und schnelle Möglichkeit zur Simulation von Farbfehlsichtigkeit ist im Betriebsystem Windows und macOS integriert:
  • unter Windows 10
  • unter macOS

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.
• und hier HeadingsMap für Chrome

Exoten und Sonstige

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.