Nutzungsbandbreite: Das Layout ist im Bereich von 320 bis mindestens 1920 CSS-Pixeln funktionsfähig. Der Hauptinhalt befindet sich in einem zentrierten Container mit begrenzter Zeilenlänge, um Lesbarkeit und Orientierung zu sichern.

Zoomsicherheit: Eine Textvergrößerung um bis zu 200 % darf weder zu Funktions- noch zu Informationsverlust führen. Im Fließtext darf auch bei 400 % Zoom kein horizontales Scrollen erforderlich sein.

Planbarer Reflow: Für dynamisch erscheinende Inhalte - etwa Bilder, Fehlermeldungen oder Platzhalter - wird ausreichend Raum vorgesehen, um Layoutsprünge zu vermeiden.

Stabile Überlagerungen: Overlays und feste Elemente (z. B. Header oder Toolbars) überlagern den Inhalt, anstatt den Dokumentenfluss nachträglich zu verschieben. Der Fokus bleibt dabei steuerbar und stets sichtbar.

Breakpoints: Die Spaltenanzahl wird stufenweise je nach Bildschirmgröße definiert (z. B. 3 → 2 → 1); dies unterstützt skalierbare Layouts ohne Funktionsverlust. Individuelle Sondergrößen außerhalb der definierten Layout-Vorgaben sind zu vermeiden.

Abstände: Zwischenräume werden einheitlich und nachvollziehbar festgelegt. Überlagernde oder unkontrollierte Abstände zwischen Komponenten sollen vermieden werden, um ein konsistentes Layout sicherzustellen.

Flexible Breiten: Komponenten passen sich dynamisch der verfügbaren Spaltenbreite an. Feste Pixelbreiten sind zu vermeiden, damit Reflow und Zoom korrekt funktionieren.

Kontextabhängige Dichte: Auf großen Viewports darf das Layout kompakt, aber gut lesbar sein. Auf kleineren Geräten oder bei hohem Zoom werden Zeilenhöhe und Interaktionsflächen leicht vergrößert, um Bedienbarkeit und Lesbarkeit zu verbessern.

Label-Feld-Einheit: Labels und Eingabefelder werden räumlich zusammen platziert. Dies unterstützt die Blickführung und gewährleistet eine korrekte Interpretation durch assistive Technologien.

Resizing: Das Formularraster reduziert die Spalten je nach Breakpoint. Unterhalb des mittleren Breakpoints erfolgt die Darstellung einspaltig, um einen klaren, linearen Eingabefluss zu sichern.

Hinweise und Fehler: Hilfetexte und Fehlermeldungen sind kurz, feldnah und in reservierten Bereichen anzuzeigen. Dadurch werden Layoutsprünge und visuelle Unruhe vermieden.

Aktionen: Primäraktionen (z. B. „Speichern“) stehen am Ende des Formulars. Sekundäraktionen bleiben sichtbar, sind jedoch gestalterisch zurückgenommen.

Tastaturbedienung: Die Fokusreihenfolge entspricht der visuellen Lesereihenfolge, bildet eine durchgängige „Focus Order“ gemäß WCAG 2.1 SC 2.4.3 und folgt den allgemeinen Barrierefreiheitsvorgaben. Navigation mit Tab und Shift + Tab erfolgt ohne Sprünge.

Responsives Verhalten: Je nach Kontext kann zwischen einer gestapelten Darstellung (Zellen enthalten ihr Label) oder einem horizontal scrollbaren Container gewählt werden. In beiden Fällen bleiben Spaltenköpfe erkennbar.

Inhaltliche Priorisierung: Wichtige Spalten bleiben sichtbar; nachrangige Inhalte können gekürzt oder in Detailansichten ausgelagert werden.

Erfassbarkeit: Texte werden linksbündig, Zahlen rechtsbündig ausgerichtet. Zeilenhöhen bleiben kompakt, ohne die Bedienbarkeit zu beeinträchtigen.

Stabilität: Leere, Lade- oder Fehlerzustände belegen konstanten Raum, damit das Layout ruhig und stabil bleibt. Das Scrollverhalten orientiert sich an den Grundsätzen des barrierefreien Layoutverhaltens.

Zielgrößen: Interaktive Elemente müssen mindestens 24 × 24 CSS-Pixel groß sein. Für eine komfortable Touch-Bedienung wird eine Größe von 44 × 44 CSS-Pixel empfohlen.

Fokusführung: Der Fokusindikator ist deutlich und kontrastreich. Die Reihenfolge des Fokus folgt der visuellen Lesereihenfolge.

Lange Inhalte: Lange Text- oder Datenwerte werden umgebrochen oder mit Auslassungspunkten verkürzt. Der vollständige Inhalt bleibt über Tooltip oder Detailansicht zugänglich.

Scrollrichtung: Bevorzugt wird eine vertikale Scrollrichtung. Horizontal wird nur gescrollt, wenn es fachlich erforderlich ist, beispielsweise bei sehr breiten Tabellen.

A Logo des Anbieters der Anwendungslandschaft

B Balken als Identitätselement der Anwendungslandschaft gemäß gestalterischen Vorgaben

C Logo der Anwendungslandschaft

D Informationen zum angemeldeten Nutzenden

E/F Haupt- und Subnavigation als Flyout (zur Nutzung siehe Hauptnavigation)

Bypass Blocks / Skip-Link: Am Seitenanfang ist ein fokussierbarer „Zum Inhalt springen“-Link vorhanden, der den Fokus korrekt ins <main> setzt.

Semantische Landmark-Struktur: Genau ein <header>/role="banner", benannte <nav>-Landmarks und genau ein <main> pro Seite; Landmarks sind eindeutig und nicht redundant.

Konsistente Navigation und Identifikation: Reihenfolge und Bezeichnungen wiederkehrender Navigationsbestandteile sowie die Identifikation von Komponenten bleiben über Seiten hinweg konsistent.

Konsistenz: Einheitliche Struktur und Abstände für alle Seiten und Anwendungstypen.

Responsivität: Anpassung an verschiedene Bildschirmgrößen und Zoomstufen ohne Informationsverlust.

Barrierefreiheit: Klare Fokusreihenfolge, ausreichende Kontraste und vollständige Tastaturbedienbarkeit.

Modularität: Wiederverwendung standardisierter Komponenten (Widgets, Panels, Tabellen, Dialoge). Die konkreten Fenster- und Seitentypen, die dieses gemeinsame Raster verwenden, sind in Kapitel Primäre Fenstertypen detailliert beschrieben:

Print-Stylesheet aktivieren: Druckspezifische Stile werden über @media print angewendet. Alternativ kann ein separates Stylesheet mit media="print" eingebunden werden.

Seitenformat, Ränder und Orientierung: Mit @page werden Format (z. B. A4 hochkant) und Seitenränder definiert. Diese Vorgaben müssen projektspezifisch geprüft und dokumentiert werden.

Seitenumbrüche und Fragmentierung: Für stabile Druckausgaben sind die modernen CSS-Eigenschaften break-* (z. B. break-inside: avoid;) zu verwenden. Diese verhindern, dass Tabellenzeilen oder Inhaltsboxen auf mehrere Seiten „zerschnitten“ werden.

Farbanpassung beim Drucken: Mit print-color-adjust lässt sich steuern, ob der Browser Farbwerte verändern darf. Standardmäßig ist Anpassung durch den User Agent erlaubt; mit dem Wert exact kann eine exakte Farbwiedergabe erzwungen werden (sofern vom Browser unterstützt).

Laufende Kopf-/Fußzeilen und Seitenzahlen: Laufende Kopf- und Fußzeilen sowie Seitenzahlen sind projektspezifisch zu prüfen und nach Möglichkeit über standardisierte Druckfunktionen umzusetzen. Die Unterstützung durch Browser und Ausgabekanäle kann variieren. Für nicht unterstützte Funktionen sind geeignete Fallbacks vorzusehen.

Nur relevante Inhalte drucken: Navigationsleisten, Header, Footer und interaktive Controls (Buttons, Filter, Toolbars) dürfen nicht gedruckt werden. Sie werden über das Print-Stylesheet ausgeblendet.

Farben auf das notwendige Minimum reduzieren: Für Hintergründe sind helle Töne zu verwenden; flächige Farben nur, wenn sie semantisch notwendig sind (z. B. Status- oder Legendenfarben). Farbmanagement erfolgt über print-color-adjust.

Typografie und Kontrast: Textfarben sind gemäß den gestalterischen Vorgaben festzulegen und müssen ausreichenden Kontrast gewährleisten.

Ziel­format: Standardformat ist A4 hochkant. Querformat sollte nur bei fachlicher Notwendigkeit (z. B. breite Tabellen) eingesetzt werden. Das Format wird über @page size festgelegt.

Metainformationen: Jede Seite sollte Metainformationen wie Logo, Dokumenttitel, Datum und ggf. den angemeldeten Nutzenden enthalten.

Start des Druckvorgangs:

Die allgemeinen Regeln des Drucklayouts gelten weiterhin. Navigation, Buttons und Toolbars werden ausgeblendet, nur inhaltliche Daten werden ausgegeben.

Eine Druckvorschau-Ansicht sollte auf einer separaten, druckoptimierten Route dargestellt werden.

Metainformationen wie Titel und Seitenzahl sollten pro Seite eingebunden werden (je nach Browser-Unterstützung über Margin-Boxen oder Fallbacks).

Spalteninhalte müssen vollständig und lesbar sein; Spaltenbreiten sollten automatisch angepasst werden (table-layout: auto;).

Tabellenzeilen und Kopfbereiche dürfen nicht getrennt werden (break-inside: avoid;).

Lange Tabellen sollen über mehrere Seiten hinweg sauber umbrechen.

Formulare müssen in einer einspaltigen, linearisierten Struktur dargestellt werden. Labels erscheinen neben oder über den jeweiligen Werten.

Bei mehrspaltigen Formularen werden Spalten untereinander angeordnet, um Lesbarkeit und logische Reihenfolge zu gewährleisten.