Was haltet ihr von der Seite...

[Thomas Luethi]

Hallo,

Was haltet ihr von der Seite http://www.roadrunner-pk.de/ in Punkto Barrierefreiheit und Web Usability?

Zuerst mal: Ich finde es gut, dass Du auch bei einer Seite,
auf der es um Motorraeder u.s.w. geht, auf Accessibility achtest
und nicht einfach sagst: "Wer keine guten Augen hat, gehoert
nicht zu unserem Zielpublikum" oder so...

Erster Eindruck: Recht gut. Schrift auf Anhieb anstaendig gross.
Du verwendest ja als Groessenangaben die Woerter (medium, small u.s.w.),
also ist die Schrift auch im MS IE skalierbar.
font:bold medium/14px helvetica, georgia, verdana, arial, sans-serif;
Ob 14px bei "medium" wirklich eine geeignete Zeilenhoehe ist,
wage ich zu bezweifeln...
Ich wuerde auf die Angabe der line-height eher verzichten.

Habe es nur rasch in Mozilla 1.5 (Linux) angeschaut
und kaum in den Quelltext geguckt.

http://www.roadrunner-pk.de/html/sonder.html
Das <h4>Technische Daten</h4> ist in hellblau, normale
Schriftgroesse (wohl 1em oder so) und nicht einmal fett.
Dadurch etwas schlecht lesbar - zuwenig Kontrast.
Noch schlimmer ist es mit der Fusszeile:
"© Peter Klein's Road Runner 2004" - klein, wenig Kontrast.

Ueberschriften, Fusszeile und Links haben die gleiche Farbe,
eben das bereits kritisierte Hellblau.
Und die Links sind nichtmal unterstrichen.
=> Sehr verwirrlich und schlecht, weil man mit der Maus
ueber den Text gehen muss, um zu sehen, was ein Link ist.
Unbedingt aendern!

Ich faende es hilfreich, wenn man anhand der Linkfarben
unterscheiden koennte, was man schon gesehen hat.
Du hast ja kaum Farben, also waere es IMHO kein
Problem, das umzusetzen.

Der jeweils aktive Menuepunkt, also die Seite, auf der
man sich gerade befindet, sollte _kein_ Link sein.
Und er sollte (z.B. farblich) hervorgehoben sein.

Fuer Tastatur-Bedienung, also das sogenannte Tabbing
(Springen von einem Link zum andern mit der Tab-Taste)
solltest Du auch noch den Linkzustand a:focus definieren.
a:hover und a:focus wuerde ich etwas auffaelliger machen
als bloss mit der Unterstreichung. Mindestens eine
andere Hintergrundfarbe, ggf. auch Invertierung
(helle Schrift auf dunklem Hintergrund).

Dass die Navigation links mit position:fixed (und den entsprechenden
schmutzigen Hacks fuer den MS IE) festgenagelt ist, finde ich
persoenlich sehr schlecht. Wenn man die Schriftgroesse etwas
erhoeht, ist nicht mehr alles sichtbar, und man kann den
Navigations-Bereich auch nicht scrollen. Also bleiben
einige Seiten (inklusive das Impressum) unerreichbar fuer
Leute, die grosse Schrift brauchen und/oder einen kleinen
Anzeigebereich haben.
Ich koennte mir vorstellen, dass z.B. Sehbehinderte
eher niedrige Aufloesungen eingestellt haben,
z.B. 800x600 auf einem 19"-CRT, damit ein Pixel
moeglichst gross ist. Wenn sie dann noch die
Schriftgroesse etwas skalieren, ist Dein Menue
nicht mehr vollstaendig sichtbar und benutzbar.

http://www.roadrunner-pk.de/html/sitemap.html
Ich persoenlich hasse Kursivschrift ist auf dem Bildschirm.
Und ich denke, ich bin nicht der einzige.

Ich wuerde noch ein extra Druck-Stylesheet machen,
das die Navigation und den Kruemelpfad ausblendet.
Diese Dinge braucht man auf dem Papier IMHO nicht.

Die Uebersichtskarte in niedriger Auflösung ist IMHO
voellig ueberfluessig. Die Qualitaet ist eh zu schlecht.
Eine Version reicht - "don't make me think!"

Ich hoffe fuer Dich, dass Du die Sache mit den
Urheberrechten geklaert hast, siehe
http://www.heise.de/tp/deutsch/inhalt/on/16851/1.html

Der kleine Motorradfahrer ist zwar nett, aber ein Logo,
das auch den Firmennamen als Text enthaelt, waere dort
oben links IMHO sinnvoller.

Das Logo sollte auf jeden Fall ein Link zur Homepage sein.
Das ist ueblich so, die Leute erwarten das.

Das Hintergrundbild unten rechts (Schriftzug-Umriss)
ist IMHO schlecht lesbar und unnuetz, weil man
nicht darauf klicken kann (bzw. weil nichts passiert,
wenn man darauf klickt).

Zur Barrierefreiheit gehoert IMHO auch, dass man
es den Benutzern so leicht wie moeglich macht,
CSS abzuschalten.
Fuer Mozilla braucht es dazu ein TITLE-Attribut
im LINK-Element, mit dem man das Stylesheet
einbindet, bzw. im STYLE-Element. Versuch mal:

<style type="text/css" media="screen" title="Road-Runner Style">
<!-- @import "./../layout.css"; -->
</style>

Ein Kontaktformular waere schon sehr nuetzlich und wuerde
die Usability massiv steigern fuer all die Leute, die gerade
nicht an ihrem eigenen Rechner sind.

Achja, zu guter Letzt: Valider Quellcode waere auch ein
IMHO wesentlicher Bestandteil der Usability, Accessibility
und Zukunftssicherheit... http://validator.w3.org/
Gerade die Anfahrt-Seite ist eine mittlere Katastrophe. ;-)

Freundliche Gruesse,

Thomas