Arbeitsprobe · kostenfrei
Wir haben die Website einer erfundenen Ferienwohnung zweimal gebaut: einmal so, wie solche Seiten nach fünfzehn Jahren ohne Pflege aussehen — und einmal richtig. Die alte Fassung haben wir gemessen. Was unten steht, sind Messwerte, keine Einschätzungen. Beide Fassungen sind offen abrufbar, jeder Befund ist nachrechenbar.
Zum Weitergeben und Ausdrucken: Bericht als PDF — acht Seiten A4, unter 400 KB, ohne Formular und ohne Adresse.
Beide Fassungen
Am besten auf dem Telefon — dort entscheidet sich, ob eine Seite funktioniert. Die Ferienwohnung Am Musterbach gibt es nicht; der Name ist mit Absicht so gewählt, dass ihn niemand mit einem echten Betrieb verwechselt.
Der Belegungskalender ist die Startseite: Zeitraum wählen, Preis steht sofort da, Anfrage geht mit dem Zeitraum raus. Rechnet auf dem Gerät, sendet nichts, speichert nichts.
Tabellenlayout, feste Breite, 11px Text, ein Belegungsplan aus grünen und roten Zellen. Absichtlich so gebaut — und absichtlich offen erreichbar, damit die Zahlen unten nachprüfbar sind.
Beide Fassungen zum Nachprüfen:
Neue Fassung: musterbach.fs-solutions.org
Prüfling: musterbach.fs-solutions.org/alt/
Methode
Damit die Zahlen etwas bedeuten, muss die Schwelle dabeistehen.
| Seitlicher Überlauf | Breite des Inhalts gegen Breite des sichtbaren Bereichs, bei 13 Fensterbreiten von 320 bis 2560px. Zusätzlich: ist der Layoutbereich breiter als das Gerät, wird die Seite gestaucht — das ist der schwerste und unauffälligste Mangel überhaupt. |
|---|---|
| Antippflächen | Mindestens 24×24px. Ausgenommen sind Verweise mitten im Satz und Ziele, die weit genug auseinanderliegen. |
| Kontrast | 4,5:1 für gewöhnlichen Text, 3:1 ab 24px oder ab 18,7px fett. Gerechnet über die relative Leuchtdichte, mit dem wirksamen Hintergrund und aufgelöster Teildurchsichtigkeit. |
| Formularfelder | Mindestens 16px Schriftgröße, sonst zoomt Safari auf iOS beim Antippen hinein. Jedes Feld braucht eine verknüpfte Beschriftung. |
| Struktur | Genau eine h1, keine übersprungenen Stufen, Sprachangabe, Alternativtexte, Sprunglink zum Inhalt, Zeichenkodierung, Titel und Beschreibung. |
| Bedienung | Von Hand nachgefahren: Tastaturführung durch den Kalender, Verhalten bei gesperrten Tagen, ob jede Eingabe den Betrag wirklich verändert. |
Was ein Werkzeug nicht kann: beurteilen, ob eine Farbe allein eine Bedeutung trägt, ob ein Text verständlich ist oder ob ein Ablauf zum Betrieb passt. Diese drei Punkte prüft ein Mensch, und der Bericht sagt jeweils dazu, welcher Befund gemessen und welcher beurteilt ist.
Befunde
Zehn Punkte, nach Schwere sortiert. Der erste ist der einzige, den man nicht sieht — und der schlimmste.
| Seite wird gestaucht | Layoutbereich 980px auf einem 320px-Gerät, Faktor 0,33. Der 11px-Fließtext kommt wie 3,6px an. Auf 390px sind es 4,4px. Lesbar ist das nicht — man muss hineinzoomen und dann seitwärts schieben. Ursache ist eine fehlende Zeile im Seitenkopf. |
|---|---|
| Antippflächen in der Navigation | 9 Verweise mit 150×16px, nötig sind 24px Höhe. Mit dem Daumen trifft man den Nachbarpunkt. Bei neun Einträgen untereinander ist das keine Kleinigkeit, sondern der Grund, warum Leute aufgeben und anrufen — oder eben nicht anrufen. |
| Formularfelder | 6 Felder mit 12px, Absendeknopf 11px. Unter 16px zoomt Safari auf dem iPhone beim Antippen in die Seite hinein und zoomt nicht von allein zurück. Wer die Anfrage ausfüllt, kämpft ab dem ersten Feld mit der Darstellung. |
| Kontrast, vier Stellen | 2,48:1 und 2,85:1 bei nötigen 4,5:1. Grau auf Weiß und Grau auf Beige. Betroffen sind Preishinweis und Fußzeile — also die Stellen mit den Einschränkungen. Bei Tageslicht auf einem Telefon praktisch nicht zu lesen. |
| Bilder ohne Alternativtext | 4 von 4 Bildern. Darunter die Wortmarke mit dem Betriebsnamen. Für einen Screenreader und für Suchmaschinen kommt der Name des Betriebs auf der Seite damit nicht vor. |
| Formularfelder ohne Beschriftung | 6 von 6 Feldern. Die Beschriftungen stehen daneben in einer Tabellenzelle, sind aber nicht mit dem Feld verknüpft. Ein Screenreader sagt „Eingabefeld" und nicht, was hineingehört. |
| Keine Hauptüberschrift | h1 fehlt, Überschriftenfolge beginnt bei h3. Die Seite hat keine maschinenlesbare Hauptaussage. Wer mit einem Screenreader die Überschriften durchgeht, findet keinen Einstieg. |
| Sprache nicht angegeben | html ohne lang-Attribut. Screenreader wählen die Aussprache nach Systemsprache. Deutsche Ortsnamen in englischer Aussprache sind unverständlich. |
| Belegungsplan nur farbig | grün und rot, ohne Muster, ohne Text. Rund jeder zwölfte Mann unterscheidet Rot und Grün schlecht. Für ihn ist der Plan nicht falsch, sondern leer. Dieser Punkt wurde von Hand geprüft — Farbbedeutung kann kein Werkzeug messen. |
Abzüge
Ein Bericht, der jede Meldung eines Werkzeugs als Mangel verkauft, hat mehr Punkte und weniger Wert. Diese drei sind geprüft und nicht in der Liste oben.
| Sechs Fußverweise mit 20px Höhe | Die Größenregel allein wäre verletzt. Bei ihrem Abstand greift jedoch die Abstandsausnahme: legt man um jedes Ziel einen Kreis von 24px, überschneiden sich die Kreise nicht. Kein Mangel, also nicht in der Liste oben. |
|---|---|
| Ausgegraute Tage im neuen Kalender bei 3,39:1 | Text eines gesperrten Bedienelements hat ausdrücklich keine Kontrastanforderung. Wir haben ihn trotzdem angehoben, weil die Tagesziffer weiter Orientierung ist — aber als Verbesserung, nicht als Fehlerbehebung. |
| Am Schreibtisch ist die alte Seite in Ordnung | Bei 1280px kein Überlauf, Layout intakt, Navigation bedienbar. Wer sie nur am Rechner ansieht, findet nichts. Das ist keine Entschuldigung, aber es erklärt, warum solche Seiten jahrelang unbeanstandet bleiben. |
Eigener Irrtum
Beim ersten Durchlauf meldete das Werkzeug für den Prüfling bei 320px „OK — kein Überlauf". Das war falsch, und zwar auf die gefährlichste Art: plausibel.
Der Grund liegt in der Messvorschrift. Überlauf wird gegen den Layoutbereich gemessen. Fehlt die Zeile, die dem Browser die Gerätebreite mitteilt, legt er den Layoutbereich auf 980px und schrumpft die ganze Seite auf das Display. Relativ zu 980px ragt dann nichts heraus — es ist nur alles dreimal zu klein. Das Werkzeug maß richtig und antwortete auf die falsche Frage.
Behoben: ist der Layoutbereich breiter als das Gerät, ist das jetzt ein eigener Befund mit Faktor und der Angabe, wie groß der Text tatsächlich ankommt. Gegengeprüft an einer korrekt gebauten Seite, damit die neue Regel keine Fehlalarme erzeugt.
Das steht hier, weil es der einzige belastbare Hinweis darauf ist, wie mit Fehlern umgegangen wird. Jeder kann behaupten, sorgfältig zu arbeiten. Wer den eigenen Irrtum benennt, hat es belegt.
Neue Fassung
Gleicher Betrieb, gleiche Angaben, gleiche Preise. Nur eben gebaut, statt gewachsen.
Kein Titelbild, kein Vorspann davor. Die erste Frage eines Gastes ist „ist frei?", und alles andere kann warten, bis sie beantwortet ist. Am Telefon ein Monat mit großen Feldern, am Rechner zwei nebeneinander, auf einem sehr breiten Monitor drei.
Nächte, Personen, Kurtaxe, Endreinigung, Hund — jede Eingabe verändert den Betrag sichtbar. Der Betrag oben ist der Betrag, der zu zahlen ist. Am Telefon klebt er unten am Rand, damit er beim Scrollen nicht verloren geht.
Belegte Tage sind gefüllt, schraffiert, durchgestrichen und werden als „belegt" vorgelesen. Vier Signale statt einem. Wer Rot und Grün schlecht unterscheidet, verliert dadurch keine Information.
Pfeiltasten bewegen um einen Tag oder eine Woche, Bild-Tasten um einen Monat. Genau ein Tag ist per Tabulator erreichbar, damit man nicht durch neunzig Felder muss. Belegte Tage nehmen den Fokus an, statt ihn zu verschlucken.
Eine eingebettete Karte lädt bei jedem Aufruf Daten eines Dritten und braucht dafür vorher eine Einwilligung. Die Wegbeschreibung steht in Worten — und wird häufiger gelesen, als man denkt.
Es sendet nichts und sagt das auch. Statt einer erfundenen Bestätigung zeigt es, was beim Betrieb ankäme: Zeitraum, Personen, Betrag, Nachricht. Eine Attrappe, die eine Zusage vortäuscht, wäre kein Arbeitsnachweis.
Nächster Schritt
Kostenfrei, mit klarer Grenze — damit aus einem Angebot keine Dauerleistung wird.
| Was Sie bekommen | Einen Kurzbericht über Ihre bestehende Seite: Überlauf, Antippflächen, Kontraste, Formularfelder, Struktur. Mit Messwerten und der Angabe, was davon in einer Stunde behoben ist und was nicht. |
|---|---|
| Was es kostet | Nichts. Kein Formular, keine Adresse, keine Voranmeldung. |
| Der Rahmen | Eine Seite Bericht, feste Prüfliste, ein Vorgang pro Woche. Wir sagen das offen, weil eine unbegrenzte kostenfreie Leistung nicht zu halten wäre — und ein Versprechen, das nicht hält, schadet mehr als keins. |
| Wenn Sie keine Seite haben | Dann gibt es nichts zu prüfen. Schreiben Sie stattdessen, was Ihr Betrieb am Telefon immer wieder erklären muss — daraus wird meistens die erste sinnvolle Seite. |