Skrabi-Webseiten-Spielplatz: Eine kleine HTML-Oberfläche mit der Tastatur prüfen

Der Webseiten-Spielplatz zeigt eingefügtes HTML in einer getrennten Vorschau. Eine kleine Bedienprobe macht sichtbar, ob Beschriftungen, Reihenfolge und Ziele verständlich sind.

Mit einer kurzen Oberfläche anfangen

Öffne im Ideenlabor den Webseiten-Spielplatz. Das Feld „HTML für deine kleine Seite“ nimmt den Quelltext auf. Eine Überschrift, ein Link zu einem Abschnitt und ein aufklappbarer Hinweis genügen für eine erste Probe. Wähle klare Namen für die beiden Bedienelemente. Ein Link namens „Zum Beispiel“ sagt mehr über sein Ziel aus als „Hier klicken“. Erstelle eine kleine statische Fassung ohne externe Ressourcen. Mit „Vorschau öffnen“ erscheint die Seite in einem getrennten Bereich. In der heutigen Probe war dort die Überschrift aus dem eingefügten HTML zu sehen. Für diese Prüfung reichen Beispieldaten, die du auch in einer öffentlichen Anleitung zeigen würdest.

Den Weg vom Einstieg bis zur Erklärung verfolgen

Gehe mit der Tabulatortaste durch die Seite und beobachte, ob der Fokus erkennbar bleibt. Prüfe am Link, wohin die Aktivierung führt, und am aufklappbaren Hinweis, ob er sich wieder schließen lässt. Achte darauf, ob der nächste bedienbare Punkt dort liegt, wo du ihn erwartest. Wiederhole den Ablauf mit einer schmalen Ansicht und längeren Beschriftungen. So fällt auf, wenn ein wichtiger Text abgeschnitten ist oder ein Bedienelement nur durch Farbe auffällt. Halte möglichst genau fest, welche Eingabe und welcher sichtbare Zustand die Abweichung auslösen. Eine solche Notiz lässt sich später als Anforderung für den eigentlichen Bauauftrag verwenden.

Die Probe ins echte Projekt mitnehmen

Die Vorschau dient zum Anklicken eines kleinen HTML-Entwurfs. Für eine echte Anwendung mit Formularverarbeitung, Sitzung oder Datenbank wird anschließend ein eigenes Projekt gebraucht. Übernimm dafür die überprüften Texte und formuliere die Interaktion als Abnahmeschritt. Zum Beispiel soll nach dem Öffnen des Hinweises derselbe Abschnitt weiterhin erreichbar sein. Prüfe die fertige Oberfläche danach im Kontext ihrer Navigation und ihres Stylesheets. Dort können eine feste Kopfzeile, eine abweichende Fokusgestaltung oder zusätzliche Dialoge das Ergebnis verändern. Halte auch dann die statische Referenz getrennt, damit sich Änderungen an Gestaltung und Ablauf miteinander vergleichen lassen.