Skip to content

Oberfläche und Bedienung

Die Oberfläche verwendet eine ruhige industrielle Gestaltung mit dunkler Navigation, hellen Arbeitsflächen, klaren Überschriften und zurückhaltenden Akzentfarben. Das Design liegt in public/assets/interface.css; die funktionalen Twig-Templates und das bestehende Basis-CSS bleiben Teil derselben Symfony-Anwendung. Alle Assets werden lokal ausgeliefert. Ein Node-Build und externe Schrift-CDNs sind für den Betrieb nicht erforderlich.

Responsive Abläufe

  • Desktop: feste Seitennavigation, breite Arbeitsflächen und mehrspaltige Karten.
  • Tablet: angepasste Karten- und Formularraster, kompaktere Kopfzeile.
  • Bis 900 Pixel: Navigation als seitliche mobile Dialogfläche mit Hintergrundabdeckung.
  • Bis 720 Pixel: Filter über eine eigene Schaltfläche einklappbar; aktive Filter werden gezählt.
  • Bis 500 Pixel: Maschinenkarten und Formulare einspaltig. Die Maschinenillustration bleibt als kompakte Fläche sichtbar.

Tabellen behalten ihre Spaltenbeziehungen und werden bei Bedarf horizontal gescrollt. JavaScript ergänzt hierfür fokussierbare, beschriftete Bereiche. Ohne JavaScript bleiben die Tabellen per Touchpad und Touch scrollbar; Navigation und Filter bleiben zugänglich.

Suchbegriffe und technische Filter lassen sich kombinieren. Der Sprachwechsel behält Seitenkontext, Maschinen-ID/Slug, Suchparameter und Vergleichsauswahl bei. Der Maschinenvergleich erlaubt vier Modelle, merkt die Auswahl lokal und meldet Änderungen an assistive Technik. Die Sprachwahl verwendet native Bezeichnungen und wächst als Menü mit weiteren Sprachen mit.

Bewegung

Einblendungen laufen einmal beim Erreichen des sichtbaren Bereichs. Die Katalogillustration bewegt sich sanft; eine Verbindungsgrafik und eine Dokumentkarte unterstreichen den grenzüberschreitenden Ablauf. Karten und Schaltflächen reagieren auf Mausinteraktion.

Die Schaltfläche in der Kopfzeile pausiert Animationen und speichert diese Einstellung lokal im Browser. prefers-reduced-motion hat Vorrang; dann sind Animationen und sanftes Scrollen deaktiviert. Dauerbewegung läuft nur bei sichtbarer Kataloggrafik und pausiert bei ausgeblendeter Seite. Inhalte werden vor einer Animation nicht verborgen, sodass sie auch bei einem fehlgeschlagenen Skript lesbar bleiben.

Bedienbarkeit

Navigation und Sprachmenü unterstützen Tastaturbedienung. Die mobile Navigation hält den Fokus im geöffneten Dialog, sperrt den Hintergrund und gibt den Fokus beim Schließen zurück. Escape und die Hintergrundfläche schließen die Navigation. Der Sprunglink führt zum Hauptinhalt; sichtbare Fokusmarkierungen zeigen die Position. Aktive Navigationseinträge besitzen aria-current.

Formularfelder verwenden lesbare Schriftgrößen, die auf Mobilgeräten keinen unbeabsichtigten Fokuszoom auslösen sollen. Hauptaktionen haben große Bedienflächen; Fehler und Erfolgsmeldungen sind für assistive Technik markiert. Technische Angaben, Status und Dokumentversionen bleiben sichtbar. Datums-, Zahlen- und Währungsanzeigen richten sich nach dem Locale; die explizite Berlin-/Tokio-Zeitdarstellung bei Terminen bleibt erhalten.

Dies ist eine umgesetzte Bedienungsbasis. Es wird keine formelle WCAG-Zertifizierung behauptet. Ein visueller Test in realen Browsern und Tests mit Nutzern auf den Zielgeräten stehen noch aus; die ausgeführten Prüfungen sind in VERIFICATION.md beschrieben.