putzhuber.net » Testen http://www.putzhuber.net Sun, 11 Apr 2010 08:32:20 +0000 de hourly 1 http://wordpress.org/?v=3.0 Schnelltest ohne Werkzeuge http://www.putzhuber.net/2007/12/05/schnelltest-ohne-werkzeuge/ http://www.putzhuber.net/2007/12/05/schnelltest-ohne-werkzeuge/#comments Wed, 05 Dec 2007 17:12:27 +0000 admin http://www.putzhuber.net/2007/12/05/schnelltest-ohne-werkzeuge/ mit Einstellungen der Browser Firefox oder Internet Explorer (IE) oder Opera.
Praktischer ist das Testen mit gratis Browser Erweiterungen, den Accessibility oder Webdeveloper Toolbars.

Lesen Sie auch: Schnelltest mit Werkzeugleisten.

1. Schrift vergrößern

  • Im Firefox mit Strg und +Taste, Strg und Mausrad oder unter Ansicht / Schriftgrad
  • Im IE 7 unter Ansicht / Schriftgrad (mit Px = Pixeln fixierte Schrift ist hier nicht vergrößerbar), prozentweise zoomen: Strg und Mausrad
  • Im IE 6 mit Strg und Mausrad oder unter Ansicht / Schriftgrad
  • im Opera unter Ansicht / Seitendarstellung / sehr gross oder prozentweise zoomen

Was Sie sehen sollten:

  • Die Schrift lässt sich mindestens 2 Stufen vergrößern
  • das Layout zerfällt nicht
  • Teile überlagern sich nicht
  • Beim Zoomen ist alles sichtbar, idealerweise muss man nicht sofort querscrollen

2. Layout wegschalten

  • Im Firefox unter Ansicht / Webseiten-Stil / Kein Stil
  • Im Opera unter Ansicht / Seitendarstellung / Benutzermodus

Was Sie sehen sollten:

  • Linearer Aufbau (Zeile für Zeile, nicht Blöcke nebeneinander in Tabelle)
  • Ein Link (=Sprungmarke) Zum Inhalt
  • Navigation als Liste, ideal einzelne Menüteile mit Überschriften
  • Mehrere Überschriften und Aufzählungspunkte in längerem Fließtext

3. Farbe wegschalten

  • Im Firefox unter Extras / Einstellungen / Inhalt / Farben
  • Im IE unter Extras / Internetoptionen / Eingabehilfen / Farbangaben ignorieren
  • Im Opera unter Ansicht / Seitendarstellung / Kontrastreich

Was Sie sehen sollten:

  • Farbe und Hintergrundbilder sind verschwunden
  • Alle Texte sind lesbar

4. Kontraste testen

Augen zusammenkneifen – ist der Text noch lesbar?

5. Kontrastmodus ändern

  • Im Firefox unter Extras / Einstellungen / Inhalt / Farben
  • Im IE in der Systemsteuerung / Eingabehilfen / Anzeige / Kontrast aktivieren
  • Im Opera unter Ansicht / Seitendarstellung

Was Sie sehen sollten:

  • Hintergrundfarbe schwarz
  • Alle Texte sind lesbar, auch wenn Schrift größer ist

6. Bilder wegschalten

  • Im Firefox unter Extras / Einstellungen / Inhalt / Grafiken laden nicht angehakt
  • Im IE unter Extras / Internetoptionen / Erweitert
  • Im Opera unter Ansicht / Bilder

Was Sie sehen sollten:
sinnvolle Alternativtexte bei inhaltlich wichtigen Bildern

7. Formulare testen

  • Mit der Maus auf Text neben Eingabefeld klicken. Der Curser sollte ins Eingabefeld springen (d.h. klare Zuordnung von Begleittext zu Inputfeld mit Labels)
  • Abschicken ohne alle Felder ausgefüllt zu haben: sind die Fehlermeldungen zusammengefasst am Anfang des Formulars und sinnvoll? Idealerweise kann man von den Fehlermeldungen zum fehlerhaften Eingabefeld springen.

8. Tastaturtest

  • Man kann die Seite mit Tabulator Taste und Enter Taste bedienen, Auswahlboxen in Formularen kann man mit Pfeiltasten bedienen.
  • Der Fokus ist sichtbar, d.h. Links verändern z.B. die Farbe so wie beim Darüberfahren mit der Maus

9. Ein Blick auf den Quellcode

Mit der rechten Maustaste auf die Seite klicken und Seitenquelltext anzeigen lassen. Suchen Sie nach ein paar Schlüsselbegriffen, Sie müssen deren Bedeutung gar nicht genau verstehen.

  • Gut: Die Seite beginnt mit <!DOCTYPE (zeigt HTML Version) , es gibt eine Codierungsangabe (<meta….charset=…>).
    Es gibt eine Sprachangabe im html Element, z.B. <html …lang=”de”>.
  • Schlecht: Es gibt Elemente wie <table>, ohne dass eine Datentabelle auf der Seite ist = Layouttabellen
    <font> <table bgcolor=”"> = Formatierung im HTML, statt extern,
    <frameset> = Frames

10. Videos

Sind sie mehr als ein unwichtiges Zusatzfeature? Dann sollten sie Untertitel haben.

]]> http://www.putzhuber.net/2007/12/05/schnelltest-ohne-werkzeuge/feed/ 3 mit Werkzeugleisten http://www.putzhuber.net/2007/12/05/mit-werkzeugleisten/ http://www.putzhuber.net/2007/12/05/mit-werkzeugleisten/#comments Wed, 05 Dec 2007 17:12:16 +0000 admin http://www.putzhuber.net/2007/12/05/schnelltest-mit-browser-erweiterungen/ Browser Erweiterungen für WebentwicklerInnen
(“Accessibility Toolbar”und “Web Developer Toolbar”)

Lesen Sie auch Weitere Tools - Listen, Werkzeuge, Tests

Was Sie damit alles tun können:

  • Die Toolbar in 1 Minute herunterladen und installieren
  • Sie unter Ansicht / Symbolleisten aus- oder einblenden
  • CSS (Layout) wegschalten
  • Farbe wegschalten
  • Javascript wegschalten
  • Grafiken wegschalten
  • Alternativtexte (alt Attribute) von Grafiken anzeigen lassen
  • Tabellen-, Frames- Aufbau anzeigen lassen
  • Überschriftenstruktur anzeigen
  • Kleinere Bildschirmgröße simulieren
  • HTML und CSS (Formatierungsangaben) auf Fehler testen (validieren)
  • Automatische WAI Tests machen (testen maschinell prüfbare Punkte der WAI Richtlinien), Cyntia says, WebXact)
  • und einiges mehr

Mit der Accessibility Toolbar für IE auch:

  • Seiten grau einfärben
  • Farbkontraste testen
  • Simulation von Farbenblindheit und Augenkrankheiten
  • Textbrowser (Lynx) Ansicht – zeigt Textseite ohne Javascript
  • Sprachangaben (lang Attribute), Metadaten (z.B. keywords…) und vieles mehr anzeigen
  • und einiges mehr, besonders in der aktuellen Version 2.0

Was Sie damit testen sollten:

  • Wie sieht die Seite ohne CSS aus (Zeile für Zeile lesbar oder Tabellenblöcke nebeneinander?)
  • Ist die Seite im HTML gut strukturiert (Überschriften, Listen)
  • Gibt es Alternativtexte für Bilder (sie sind absolut notwendig bei verlinkten Bildern, leeres alt Attribut bei unwichtigen Bildern)
  • Sind die Alternativtexte sinnvoll
  • Funktioniert die Seite ohne Javascript (erscheint die Seite, sind Formulare absendbar, funktioniert die Suche, funktionieren Links, die Popupfenster aufmachen…)
  • Werden Tabellen für Layoutgestaltung oder Frames verwendet
  • Gibt es nur wenige HTML Validierungsfehler
  • Sind die Kontraste ausreichend

Die Ergebnisse von automatischen Prüftools (wie WebXact / Bobby) sind unvollständig und interpretationsbedürftig, ein grünes Häkchen bedeutet noch nicht Barrierefreiheit!! Um Ergebnisse zu bewerten braucht man Fachkenntnisse.

]]> http://www.putzhuber.net/2007/12/05/mit-werkzeugleisten/feed/ 1 Weitere Tools http://www.putzhuber.net/2007/12/05/weitere-tools/ http://www.putzhuber.net/2007/12/05/weitere-tools/#comments Wed, 05 Dec 2007 17:12:05 +0000 admin http://www.putzhuber.net/2007/12/05/weitere-tools/ Einige zusätzliche nützliche Listen und Werkzeuge, interessante Tests

Validatoren und gängige WAI Online Tests sind hier nicht verlinkt, weil sie über die Toolbars erreichbar sind.

]]> http://www.putzhuber.net/2007/12/05/weitere-tools/feed/ 0