adeyanjufuhad/astrolabe

Prägnante Regeln für den Aufbau zugänglicher, schneller, ansprechender Benutzeroberflächen. Verwende MUST/SHOULD/NEVER, um Entscheidungen zu leiten.

Interaktionen

Tastatur

• MUST: Vollständige Tastaturunterstützung nach WAI-ARIA APG
• MUST: Sichtbare, nicht verdeckte Fokusringe (:focus-visible; gruppieren mit :focus-within); sticky/fixed Elemente verdecken niemals den Fokus
• MUST: Fokus verwalten (einfangen, verschieben, zurückgeben) nach APG-Mustern
• NEVER: outline: none ohne sichtbaren Fokus-Ersatz

Ziele & Eingabe

• MUST: Trefferfläche ≥24px (mobil ≥44px); wenn visuell <24px, Trefferfläche erweitern
• MUST: Mobile <input> Schriftgröße ≥16px, um iOS-Zoom zu verhindern
• NEVER: Browser-Zoom deaktivieren (user-scalable=no, maximum-scale=1)
• MUST: touch-action: manipulation, um Doppeltipp-Zoom zu verhindern
• SHOULD: -webkit-tap-highlight-color an das Design anpassen

Formulare

• MUST: Hydrationssichere Eingaben (kein Verlust von Fokus/Wert)
• NEVER: Einfügen in <input>/<textarea> blockieren
• MUST: Ladebuttons zeigen einen Spinner und behalten das ursprüngliche Label
• MUST: Enter sendet das fokussierte Input; in <textarea> sendet ⌘/Strg+Enter
• MUST: Submit aktiviert lassen, bis die Anfrage startet; dann mit Spinner deaktivieren
• MUST: Freitext akzeptieren, nach der Eingabe validieren – Tippen nicht blockieren
• MUST: Unvollständige Formularübermittlung zur Validierung zulassen
• MUST: Fehler inline neben den Feldern anzeigen; bei Übermittlung ersten Fehler fokussieren
• MUST: autocomplete + aussagekräftiges name; korrekte type und inputmode
• SHOULD: Rechtschreibprüfung für E-Mails/Codes/Benutzernamen deaktivieren
• SHOULD: Platzhalter enden mit … und zeigen ein Beispielmuster
• MUST: Vor ungespeicherten Änderungen warnen, bevor navigiert wird
• MUST: Kompatibel mit Passwortmanagern & 2FA; Einfügen von Codes erlauben
• MUST: Werte trimmen, um nachfolgende Leerzeichen der Texterweiterung zu behandeln
• MUST: Keine toten Zonen bei Checkboxen/Radios; Label+Steuerelement teilen sich ein Trefferziel

Zustand & Navigation

• MUST: URL spiegelt den Zustand (Deep-Link Filter/Tabs/Paginierung/expandierte Panels)
• MUST: Zurück/Vorwärts stellt die Scrollposition wieder her
• MUST: Links verwenden <a>/<Link> für die Navigation (Cmd/Ctrl/Mittelklick unterstützen)
• NEVER: <div onClick> für Navigation verwenden

Feedback

• SHOULD: Optimistische UI; bei Antwort abgleichen; bei Fehler rückgängig machen oder Rückgängig anbieten
• MUST: Destruktive Aktionen bestätigen oder Rückgängig-Fenster bereitstellen
• MUST: Höfliches aria-live für Toasts/inline-Validierung verwenden
• SHOULD: Ellipsis (…) für Optionen, die Folgeschritte öffnen ("Umbenennen…") und Ladezustände ("Lade…")

Berührung & Ziehen

• MUST: Großzügige Ziele, klare Affordanzen; fummelige Interaktionen vermeiden
• MUST: Ersten Tooltip verzögern; nachfolgende Tooltips sofort anzeigen
• MUST: overscroll-behavior: contain in Modals/Drawern
• SHOULD: Beim Unterdrücken des Gummiband-Effekts der Seite overscroll-behavior: none auf <html> innerhalb @media (pointer: fine) setzen; Standard-Seitenverhalten für grobe Zeiger für Pull-to-Refresh beibehalten. Hybride Touch-Geräte testen: pointer beschreibt das primäre Eingabegerät, und none deaktiviert auch das Scroll-Chaining und die native Swipe-Navigation
• MUST: Während des Ziehens Textauswahl deaktivieren und inert auf gezogene Elemente setzen
• MUST: Zieh-/Wisch-/Kneif-/Pfadgesten haben eine Tipp-/Klick- und Tastaturalternative, es sei denn, sie sind essenziell
• MUST: Wenn es klickbar aussieht, muss es klickbar sein

Autofokus

• SHOULD: Autofokus auf Desktop bei einzelner primärer Eingabe; selten auf Mobilgeräten

Animation

• MUST: prefers-reduced-motion beachten (reduzierte Variante bereitstellen oder deaktivieren)
• SHOULD: CSS > Web Animations API > JS-Bibliotheken bevorzugen
• MUST: Nur compositor-freundliche Props animieren (transform, opacity)
• NEVER: Layout-Props animieren (top, left, width, height)
• NEVER: transition: all – Eigenschaften explizit auflisten
• SHOULD: Nur animieren, um Ursache/Wirkung zu verdeutlichen oder bewusste Freude hinzuzufügen
• SHOULD: Easing passend zur Änderung wählen (Größe/Entfernung/Auslöser)
• MUST: Animationen unterbrechbar und eingabegesteuert; Autoplay nur für stummgeschaltete, nicht wesentliche Schleifen
• MUST: Autoplay-Bewegung >5s neben anderen Inhalten hat Pause-, Stopp- oder Ausblendsteuerungen
• MUST: Korrekte transform-origin (Bewegung beginnt dort, wo sie "physisch" sollte)
• MUST: SVG-Transformationen auf <g>-Wrapper mit transform-box: fill-box

Layout

• SHOULD: Optische Ausrichtung; ±1px anpassen, wenn die Wahrnehmung die Geometrie übertrifft
• MUST: Bewusste Ausrichtung am Raster/Grundlinie/Kanten – keine zufällige Platzierung
• SHOULD: Icon/Text-Ausrichtungen ausbalancieren (Gewicht/Größe/Abstand/Farbe)
• MUST: Mobil, Laptop, Ultraweit überprüfen (Ultraweit bei 50% Zoom simulieren)
• MUST: Sichere Bereiche respektieren (env(safe-area-inset-*))
• MUST: Unerwünschte Scrollbalken vermeiden; Überläufe beheben
• SHOULD: Flex/Grid gegenüber JS-Messung für Layout bevorzugen

Inhalt & Barrierefreiheit

• SHOULD: Inline-Hilfe zuerst; Tooltips als letztes Mittel
• MUST: Skelette spiegeln den endgültigen Inhalt wider, um Layoutverschiebungen zu vermeiden
• MUST: <title> entspricht dem aktuellen Kontext
• MUST: Keine Sackgassen; immer nächsten Schritt/Wiederherstellung anbieten
• MUST: Leere/spärliche/dichte/Fehlerzustände entwerfen
• SHOULD: Geschweifte Anführungszeichen („“); Witwen/Waisen vermeiden (text-wrap: balance)
• MUST: font-variant-numeric: tabular-nums für Zahlenvergleiche
• MUST: Redundante Statushinweise (nicht nur farblich); Icons haben Textlabels
• MUST: Zugängliche Namen vorhanden, auch wenn die Optik Labels weglässt
• MUST: …-Zeichen verwenden (nicht ...)
• MUST: scroll-margin-top auf Überschriften; "Zum Inhalt springen"-Link; hierarchische <h1>–<h6>
• MUST: Widerstandsfähig gegenüber benutzergeneriertem Inhalt (kurz/durchschnittlich/sehr lang)
• MUST: Gebietsschema-aware Daten/Zeiten/Zahlen (Intl.DateTimeFormat, Intl.NumberFormat)
• SHOULD: translate="no" auf Markennamen, Code-Token und Identifikatoren, um fehlerhafte automatische Übersetzung zu verhindern
• MUST: Genaues aria-label; dekorative Elemente aria-hidden
• MUST: Icon-only-Buttons haben beschreibendes aria-label
• MUST: Native Semantik bevorzugen (button, a, label, table) vor ARIA
• MUST: Medien haben Untertitel/Transkripte/Beschreibungen, sofern zutreffend; Steuerelemente sind tastaturbedienbar; dekorative Medien vor assistiver Technik versteckt
• MUST: Geschützte Leerzeichen: 10 MB, ⌘ K, Markennamen

Inhaltsbehandlung

• MUST: Textcontainer behandeln langen Inhalt (truncate, line-clamp-*, break-words)
• MUST: Flex-Kinder benötigen min-w-0, um Kürzung zu ermöglichen
• MUST: Leere Zustände behandeln – keine kaputte UI für leere Strings/Arrays

Leistung

• SHOULD: iOS Low Power Mode und macOS Safari testen
• MUST: Zuverlässig messen (Erweiterungen deaktivieren, die die Laufzeit beeinflussen)
• MUST: Neu-Renderings verfolgen und minimieren (React DevTools/React Scan)
• MUST: Mit CPU-/Netzwerk-Drosselung profilieren
• MUST: Layout-Lese-/Schreibvorgänge bündeln; Reflows/Repaints vermeiden
• MUST: Mutationen (POST/PATCH/DELETE) Ziel <500ms
• SHOULD: Ungesteuerte Eingaben bevorzugen; gesteuerte Eingaben günstig pro Tastendruck
• MUST: Große Listen (>50 Elemente) virtualisieren
• MUST: Bilder oberhalb der Falz vorladen; den Rest lazy laden
• MUST: CLS verhindern (explizite Bildabmessungen)
• SHOULD: <link rel="preconnect"> für CDN-Domains
• SHOULD: Kritische Schriftarten: <link rel="preload" as="font"> mit font-display: swap
• SHOULD: <video autoplay muted loop playsinline> über animiertes GIF; Standbild/reduced-motion-Alternative bereitstellen
• SHOULD: Kurze, nicht wesentliche Schleifen enthalten eine Safari H.264 MP4 <picture>-Quelle, eine prefers-reduced-motion Medienbedingung und einen Standbild-Fallback

Dark Mode & Designsystem

• MUST: color-scheme: dark auf <html> für dunkle Designs
• SHOULD: <meta name="theme-color"> passt zum Seitenhintergrund
• MUST: Natives <select>: explizite background-color und color (Windows-Fix)

Hydration

• MUST: Eingaben mit value benötigen onChange (oder defaultValue verwenden)
• SHOULD: Datums-/Zeitwiedergabe vor Hydrationsinkongruenzen schützen

Design

• SHOULD: Geschichtete Schatten (Umgebungs- + direkt)
• SHOULD: Gestochen scharfe Kanten durch halbtransparente Ränder + Schatten
• SHOULD: Verschachtelte Radien: Kind ≤ Elternteil; konzentrisch
• SHOULD: Farbtonkonsistenz: Ränder/Schatten/Text zum Hintergrundfarbton hin einfärben
• MUST: Barrierefreie Diagramme (farbenblindfreundliche Paletten)
• MUST: Kontrast erfüllen – APCA gegenüber WCAG 2 bevorzugen
• MUST: Kontrast bei :hover/:active/:focus erhöhen
• SHOULD: Browser-UI an Hintergrund anpassen
• SHOULD: Dunkelfarbverlaufsbänderung vermeiden (bei Bedarf Hintergrundbilder verwenden)