Schnelltest ohne Werkzeuge
5. Dezember 2007
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.
Am 27. Dezember 2007
Saugut! So als abhakbare Checkliste habe ich das noch Nirgends gesehen.
Kleine Korrektur zum Punkt 9: Quältext ansehen. Eine Webseite muss nicht notwendigerweise mit DOCTYPE beginnen. Bei xhtml-Seiten kann (sollte) die Seite mit der xml-Deklaration beginnen. Ein DOCTYPE kommt dann an zweiter Stelle. Zweitens: Die Codierungsangabe im html ist suboptimal und nur dann notwendig, wenn sie nicht bereits im http-Header vorhanden ist. Besser ist es, den Webserver entsprechend zu konfigurieren, so dass diese Angabe im http-Header gesendet wird. Ansonsten könnten sich Probleme ergeben bei den Zeilen vor dieser Angabe. Als Zusatz allerdings nicht unbedingt verkehrt. Der http-Header kann leider nicht ohne Werkzeuge eingesehen werden.
Die Sprachangabe ist allerdings wichtig. Es fehlt allerdings der Hinweis, dass man das in xhtml mit xml:lang codiert statt mit lang.
Am 11. April 2008
Tolle Liste
Insbesondere sehr gut geeignet zum abhacken, so dass man endlich einen sinnvollen und linearen Test durchführen kann…