Nutzungsbandbreite 320-≥1920 px

Fenstertypen und Layout / Resizing

WCAG 2.1 SC 1.4.10

Ab 320 CSS-px ohne 2-D-Scroll; Hauptinhalt bleibt lesbar/zentriert.

200 % Text-Resize

Fenstertypen und Layout / Resizing

WCAG 2.1 SC 1.4.4

Bei 200 % keine Funktions-/Informationsverluste.

Reflow 400 %/320 px ohne X-Scroll

Fenstertypen und Layout / Resizing

WCAG 2.1 SC 1.4.10

Im Fließtext bei 400 %/320 px kein horizontales Scrollen.

Reflow ohne Layoutsprünge

Fenstertypen und Layout / Resizing

WCAG 2.1 SC 1.4.10

Dynamik (Bilder/Fehler/Platzhalter) erzeugt keine Sprünge.

Fokus nicht verdeckt (Sticky/Overlays)

Fenstertypen und Layout / Resizing

WCAG 2.1 SC 2.4.7

Fokusindikator stets sichtbar, nicht überlagert.

Spaltenreduktion 3→2→1

Fenstertypen und Layout / Resizing

WCAG 2.1 SC 1.4.10

Reflow in Stufen ohne Informationsverlust.

Konsistente Abstände / Text-Spacing

Fenstertypen und Layout / Resizing

WCAG 2.1 SC 1.4.12

Erhöhtes Spacing bricht Layout nicht.

Keine festen Pixelbreiten

Fenstertypen und Layout / Resizing

WCAG 2.1 SC 1.4.10

Keine Hard-Widths, die X-Scroll erzwingen.

Kontextabhängige Dichte

Fenstertypen und Layout / Resizing

WCAG 2.1 SC 1.4.12

Bei hohem Zoom wachsen Zeilenhöhe/Targets leicht.

Label-Feld-Nähe & Semantik

Fenstertypen und Layout / Formulare

WCAG 2.1 SC 1.3.1 / 3.3.2

Labels programmatisch zugeordnet, visuell feldnah.

Formulare einspaltig (schmal)

Fenstertypen und Layout / Formulare

WCAG 2.1 SC 1.4.10

Unterhalb Mid-Breakpoint linearisiert.

Feldnahe Fehlermeldungen

Fenstertypen und Layout / Formulare

WCAG 2.1 SC 3.3.1 / 3.3.3

Fehler feldnah, verständlich; Layout bleibt ruhig.

Tastatur: Fokusreihenfolge

Fenstertypen und Layout / Allgemein

WCAG 2.1 SC 2.1.1 / 2.4.3

Vollständige Tastaturbedienung ohne Sprünge.

Tabellen responsiv (gestapelt/X-Scroll)

Fenstertypen und Layout / Tabellen

WCAG 2.1 SC 1.4.10 / 1.3.1

Schmal: gestapelt mit Labels; breit: X-Scroll, Köpfe sichtbar.

Wesentliches priorisieren

Fenstertypen und Layout / Tabellen

WCAG 2.1 SC 1.3.1

Kernspalten sichtbar; Details ausgelagert.

Stabile Leer-/Lade-/Fehlerzustände

Fenstertypen und Layout / Tabellen

WCAG 2.1 SC 1.4.10

Zustände belegen konstanten Raum; keine Sprünge.

Zielgrößen ≥ 24x24 (44x44 empfohlen)

Fenstertypen und Layout / Barrierefreies Layoutverhalten

WCAG 2.1 AA

Ziele ≥ 24x24 px; Touch 44x44 empfohlen.

Fokus sichtbar & Reihenfolge korrekt

Fenstertypen und Layout / Barrierefreies Layoutverhalten

WCAG 2.1 SC 2.4.7 / 2.4.3

Fokus klar sichtbar, nicht verdeckt; Reihenfolge logisch.

Lange Inhalte: Zugriff behalten

Fenstertypen und Layout / Barrierefreies Layoutverhalten

WCAG 2.1 SC 1.4.13 / 1.4.10

Gekürztes via Tooltip/Detail vollständig zugänglich.

Primär vertikales Scrollen

Fenstertypen und Layout / Barrierefreies Layoutverhalten

WCAG 2.1 SC 1.4.10

X-Scroll nur, wenn fachlich nötig.

Header barrierefrei

Fenstertypen und Layout / Header

WCAG 2.1 SC 2.4.3 / 2.4.7 / 1.4.11

Tastaturbedienbar; Fokus sichtbar; UI-Kontraste erfüllt.

Bypass Blocks / Skip-Link

Fenstertypen und Layout / Header

WCAG 2.1 SC 2.4.1

Fokussierbarer „Zum Inhalt springen“-Link setzt den Fokus korrekt ins <main>.

Semantische Landmark-Struktur

Fenstertypen und Layout / Header

WCAG 2.1 SC 1.3.1 / Technik ARIA11

Eindeutige Landmarks: ein <header>/banner, benannte <nav>, genau ein <main>.

Konsistente Navigation & Identifikation

Fenstertypen und Layout / Header

WCAG 2.1 SC 3.2.3 / 3.2.4

Reihenfolge/Bezeichnungen wiederkehrender Navigation bleiben konsistent.

Print-Stylesheet & @page

Fenstertypen und Layout / Drucklayout

CSS Paged Media

Druck/PDF via @media print + @page (Format, Ränder, Kopf/Fuß).

Seitenumbrüche stabil

Fenstertypen und Layout / Drucklayout

CSS Fragmentation

break-inside: avoid verhindert „Zerschneiden“.

Farbhandhabung im Druck

Fenstertypen und Layout / Drucklayout

CSS Color Adjustment

print-color-adjust (ggf. exact) steuert Farbwiedergabe.

@page Margin-Boxes (Chromium ≥ 131)

Fenstertypen und Layout / Drucklayout

CSS Paged Media - Margin Boxes

Kopf-/Fußinhalte via Margin-Boxes; progressive Fallbacks.

Interaktive Elemente erkennbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 1.3.1 / 4.1.2

Interaktive Elemente sind semantisch korrekt ausgezeichnet und programmatisch identifizierbar.

Beschriftung programmatisch zugeordnet

Benutzereingaben / Interaktion

WCAG 2.1 SC 1.3.1 / 4.1.2

Eingabefelder sind eindeutig beschriftet und programmatisch zugeordnet.

Konsistentes Verhalten

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.2.3 / 3.2.4

Gleichartige Elemente verhalten sich konsistent und erwartungskonform.

Zustandsänderungen wahrnehmbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 4.1.3

Zustandsänderungen sind wahrnehmbar und werden assistiven Technologien mitgeteilt.

Information nicht nur über Farbe

Benutzereingaben / Interaktion

WCAG 2.1 SC 1.4.1

Informationen werden nicht ausschließlich über Farbe vermittelt.

Keine unerwarteten Kontextwechsel

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.2.2 / 3.2.3

Keine unerwarteten Kontextwechsel oder automatischen Statusänderungen ohne Nutzeraktion.

Reversibilität kritischer Aktionen

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.3.4

Kritische Aktionen sind reversibel oder erfordern Bestätigung.

Zustände unterscheidbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 1.4.11

Zustände erfüllen Mindestkontrastanforderungen für Nicht-Text-Inhalte.

Deaktivierte Elemente erkennbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 1.3.1 / 4.1.2

Deaktivierte oder schreibgeschützte Elemente sind programmatisch erkennbar.

Pflichtfelder gekennzeichnet

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.3.2

Eingabeanforderungen sind klar kommuniziert.

Fehler nicht nur farblich

Benutzereingaben / Interaktion

WCAG 2.1 SC 1.4.1

Fehlerzustände sind nicht ausschließlich farblich hervorgehoben.

Stabile Zustandsänderungen

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.2.2 / 1.4.10

Zustandsänderungen führen nicht zu unerwarteten Kontextwechseln oder Reflow-Problemen.

Vollständig per Tastatur bedienbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.1.1

Alle Funktionen sind vollständig per Tastatur nutzbar.

Keine Tastaturfalle

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.1.2

Der Fokus kann jederzeit weitergeführt oder verlassen werden.

Logische Fokusreihenfolge

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.4.3

Fokus folgt einer logischen und nachvollziehbaren Reihenfolge.

Fokus sichtbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.4.7

Aktiver Fokus ist visuell eindeutig erkennbar.

Sinnvoller Startfokus

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.4.3

Beim Öffnen neuer Kontexte wird ein sinnvoller Initialfokus gesetzt.

Fokus kehrt zurück

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.4.3

Nach Schließen eines Kontexts kehrt der Fokus nachvollziehbar zurück.

Enter & Escape korrekt nutzbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.1.1

Primäraktionen sind per Tastatur auslösbar; Escape beendet Kontexte.

Keine Konflikte durch Shortcuts

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.1.4

Tastenkombinationen beeinträchtigen keine System- oder Assistenzfunktionen.

Mindestzielgröße eingehalten

Benutzereingaben / Interaktion

WCAG 2.1 AA

Interaktive Elemente erfüllen die im Bedienkonzept festgelegte Mindestzielgröße.

Alternative zu komplexen Gesten

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.5.1

Komplexe Gesten besitzen alternative Bedienformen.

Pointer-Aktionen abbrechbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.5.2

Pointer-Aktionen sind abbrechbar oder werden erst bei Abschluss ausgelöst.

Alternative zu Drag-and-Drop

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.1.1

Drag-Bewegungen besitzen alternative Bedienwege.

Transparente Formatierung & Validierung

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.3.1 / 3.3.3

Formatierungen und Korrekturen erfolgen transparent und nachvollziehbar.

Alternative Eingabeweisen akzeptiert

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.3.1 / 3.3.2

Alternative Eingabeweisen werden akzeptiert.

Fehler feldnah identifizierbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.3.1 / 3.3.3

Fehler sind feldnah identifiziert und enthalten konkrete Hinweise.

Fehlerzustände bleiben sichtbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.3.1

Fehlerzustände bleiben wahrnehmbar, bis sie behoben sind.

Fehlerübersicht möglich

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.3.1 / 4.1.3

Mehrere Fehler können zusätzlich zusammengefasst dargestellt werden.

Autocomplete unterstützt

Benutzereingaben / Interaktion

WCAG 2.1 SC 1.3.5

Felder mit bekanntem Zweck unterstützen Autovervollständigung.

Ladezustände erkennbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 4.1.3

Lade- und Validierungszustände sind programmatisch erkennbar.

Statusmeldungen wahrnehmbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 4.1.3

Statusmeldungen sind wahrnehmbar ohne erzwungene Fokusübernahme.

Dynamische Fokusführung

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.4.3

Fokus wird bei dynamischen Änderungen sinnvoll gesetzt.

Fokus logisch weitergeführt

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.4.3

Beim Entfernen eines fokussierten Elements wird der Fokus logisch weitergeführt.

Live-Region korrekt umgesetzt

Benutzereingaben / Interaktion

WCAG 2.1 SC 4.1.3

Status- und Fehlermeldungen werden assistiven Technologien mitgeteilt.

Komponenten-Zustände ermittelbar

Benutzereingaben / Interaktion

WCAG 2.1 SC 1.3.1 / 4.1.2

Zustände interaktiver Komponenten sind programmatisch ermittelbar.

Konsistente Komponenten-Navigation

Benutzereingaben / Interaktion

WCAG 2.1 SC 3.2.3

Navigation innerhalb von Komponenten ist konsistent.

Nachvollziehbare Fokusführung in Komponenten

Benutzereingaben / Interaktion

WCAG 2.1 SC 2.4.3

Kontextwechsel innerhalb von Komponenten führen zu nachvollziehbarer Fokusführung.

Aktivierungszustände eindeutig

Benutzereingaben / Interaktion

WCAG 2.1 SC 4.1.2

Aktivierungs- und Auswahlzustände sind programmatisch identifizierbar.

Zentrierte Login-Card, reflow-fähig

Design Patterns / Fenstertypen

WCAG 2.1 SC 1.4.10 / 1.3.2

Bis 400 %/320 px einspaltig nutzbar; Struktur/Lesereihenfolge bleibt erhalten.

Hilfe/Support unter Formular/Expander

Design Patterns / Fenstertypen

WCAG 2.1 SC 4.1.2

Hilfe konsistent unter Formular oder im Expander; Expander fokussierbar.

autocomplete für Benutzername/Passwort

Design Patterns / Fenstertypen

WCAG 2.1 SC 1.3.5

Felder mit autocomplete="username" / autocomplete="current-password"; Passwortmanager funktionieren.

Fehler feldnah und global, ohne Layoutsprünge

Design Patterns / Fenstertypen

WCAG 2.1 SC 3.3.1 / 3.3.3 / 4.1.3

Fehler feldnah und global verständlich; programmatisch als Statusmeldung erkennbar.

„Passwort anzeigen“-Toggle tastaturbedienbar

Design Patterns / Fenstertypen

WCAG 2.1 SC 2.1.1 / 4.1.2

Toggle tastaturbedienbar, korrekt benannt; verhindert weder Einfügen noch Autofill.

Dashboard-Grid 3→2→1, kein X-Scroll

Design Patterns / Fenstertypen

WCAG 2.1 SC 1.4.10

Dashboard reflowt 3→2→1 bis 400 %/320 px; kein horizontales Scrollen.

Leere/Lade/Fehler stabil, ohne Layoutsprünge

Design Patterns / Fenstertypen

WCAG 2.1 SC 1.4.10 / 4.1.3

Leer-/Lade-/Fehlerzustände klar als Status erkennbar; keine Layoutsprünge.

Unterseite spiegelt Titel/Icon/Farbe der Kachel

Design Patterns / Fenstertypen

WCAG 2.1 SC 3.2.4

Titel/Icon/Farbe kennzeichnen denselben Kontext konsistent.

„Zurück zur Übersicht“ und Vorheriges/Nächstes

Design Patterns / Fenstertypen

WCAG 2.1 SC 2.4.3 / 2.4.5

Treffermenge seitenweise durchlaufbar; Rückkehr zur Übersicht jederzeit möglich.

Unterseite: Grid 3→2→1, stabile Zustände

Design Patterns / Fenstertypen

WCAG 2.1 SC 1.3.1 / 1.4.10

Inhalte in klaren Abschnitten; 3→2→1-Reflow ohne horizontales Scrollen.

App-Name prominent/programmatisch erkennbar

Design Patterns / Fenstertypen

WCAG 2.1 SC 2.4.6

App-Name als Überschrift/Label klar wahrnehmbar und programmatisch identifizierbar.

Abschnitte ohne Misch-Widgets; Tabs/Accordion bei Bedarf

Design Patterns / Fenstertypen

WCAG 2.1 SC 1.3.1 / 1.4.10

Pro Abschnitt ein Inhaltstyp; umfangreiche Inhalte via Tabs/Accordion strukturiert.

Farben/Icons konsistent, nicht allein Information

Design Patterns / Fenstertypen

WCAG 2.1 SC 1.4.1 / 1.4.11

Farben/Icons kennzeichnen Apps konsistent; Information nicht nur über Farbe; Nicht-Text-Kontrast erfüllt.

Titelzeile Pflicht; Kontext eindeutig

Design Patterns / Fenstertypen

WCAG 2.1 SC 2.4.6

Titelzeile benennt Objekt und Kontext eindeutig; fungiert als Überschrift.

Toolbar konsistent; Enter/Esc-Konvention

Design Patterns / Fenstertypen

WCAG 2.1 SC 2.1.1 / 3.2.3

Toolbar einheitlich, vollständig tastaturbedienbar; Verhalten appweit konsistent.

Tabs für gleichrangig; Accordion für optional

Design Patterns / Fenstertypen

WCAG 2.1 SC 1.3.1 / 1.4.10

Gleichrangiges in Tabs, optional/nachgeordnet in Accordions; Gliederung bleibt auch bei Reflow klar.

Tastaturbedienbarkeit Overlays

Design Patterns / Fenstertypen

WCAG 2.1 SC 2.1.1 / 2.1.2 / 2.4.7

Overlays vollständig per Tastatur bedienbar; sichtbarer Fokus; keine Tastaturfalle.

Fokusführung Overlays

Design Patterns / Fenstertypen

WCAG 2.1 SC 2.4.3 / 2.4.7

Beim Öffnen sinnvoller Initialfokus; Fokusreihenfolge folgt der visuellen Struktur.

Overlays programmatisch erkennbar (Name/Rolle/Wert)

Design Patterns / Fenstertypen

WCAG 2.1 SC 4.1.2

Overlays und Controls mit programmatisch ermittelbarem Name/Rolle/Zustand; modale Overlays nutzen aria-modal.

Overlays: Reflow & Responsivität

Design Patterns / Fenstertypen

WCAG 2.1 SC 1.4.10

Bis 400 %/320 px ohne horizontales Scrollen nutzbar; Inhalte/Funktionen bleiben erhalten.

Dialoge: Modalität nur bei Erforderlichkeit

Design Patterns / Fenstertypen

WCAG 2.1 SC 3.3.4

Stark modale Dialoge nur bei rechtlich/finanziell/datenkritischen Aktionen; unterstützen Prüfen/Bestätigen.

Meldungsdialoge: zwingende Einsatzfälle

Design Patterns / Fenstertypen

WCAG 2.1 SC 3.3.4

Meldungsdialoge sperren Hintergrund nur bei irreversiblen, sicherheitskritischen Aktionen oder drohendem Datenverlust; sonst nicht-modale und kontextbezogene Muster.

Bestätigen und Rückgängig: Rückgängig-Option

Design Patterns / Interaktionsmuster

WCAG 2.1 SC 3.3.4 / 4.1.3

Reversible Aktionen mit zeitlich begrenzter Rückgängig-Option; Status-/Rückgängig-Meldungen programmatisch als Status erkennbar (z. B. aria-live).

Inline-Edit: Validierung & Fehlerbeschreibung

Design Patterns / Interaktionsmuster

WCAG 2.1 SC 3.3.1 / 3.3.3 / 4.1.3

Fehler feldnah textlich beschrieben, ggf. zusammengefasst; konkrete Korrekturhinweise; Zuordnung z. B. via aria-describedby.

Drill-Down: Fokusführung & Rückkehr

Design Patterns / Interaktionsmuster

WCAG 2.1 SC 2.4.3 / 2.4.7

Initialfokus in Detailansicht sinnvoll; beim Zurückkehren Fokus auf Auslöser/Zeile/Karte; keine „Fokus-Verluste“.

Drill-Down: Fehlerzusammenfassung & Sprünge

Design Patterns / Interaktionsmuster

WCAG 2.1 SC 3.3.1 / 3.3.3 / 4.1.3

Fehler feldnah und optional als Sprungliste zusammengefasst; Fokus zur Zusammenfassung oder zum ersten fehlerhaften Feld.

Benachrichtigungen: Statusmeldungen ohne Fokus-Hijack

Design Patterns / Interaktionsmuster

WCAG 2.1 SC 4.1.3

Benachrichtigungen per aria-live angekündigt, ohne Fokuswechsel; Schweregrad und nächste Schritte sprachlich beschrieben.

Stepper: Validierung und Fehlerbehandlung

Design Patterns / Interaktionsmuster

WCAG 2.1 SC 3.3.1 / 3.3.3

Ungültige Pflichtfelder verhindern Fortfahren; Fehler textlich gekennzeichnet und ggf. zusammengefasst.

Stepper: Fokusführung & Tastaturbedienung

Design Patterns / Interaktionsmuster

WCAG 2.1 SC 2.1.1 / 2.4.3 / 2.4.7

Stepper vollständig tastaturbedienbar; Fokus springt beim Schrittwechsel nachvollziehbar zur Überschrift oder zum ersten Inhalt.

Stepper: Zustände & Reflow

Design Patterns / Interaktionsmuster

WCAG 2.1 SC 1.4.10

Stepper reflowt 3→2→1 ohne horizontales Scrollen; Leer/Lade/Fehlerzustände verursachen keine störenden Layoutsprünge.