Mobil, per Tastatur und mit Hilfstechnologien arbeiten
Nutze Dashboard, öffentliche Abläufe und PWA bei kleinen Viewports, Zoom, Tastatur und Screenreader zuverlässig.
- Rollen
- owner, manager, staff, customer
- Benötigte Module
- Kein Zusatzmodul erforderlich
- Zuletzt fachlich geprüft
Worum es geht
vsmBooking soll nicht nur bei einem Desktop-Standardviewport funktionieren. Dieses Kapitel erklärt Navigation, Safe Areas, Fokus, große Schrift, reduzierte Eingabemöglichkeiten und mobile Gerätegrenzen.
Voraussetzungen
- Verwende einen unterstützten aktuellen Browser.
- Aktiviere benötigte Systemberechtigungen wie Kamera bewusst und nur für die richtige Domain.
- Prüfe kritische Abläufe zusätzlich bei 200 Prozent Zoom und ohne Maus.
Schritt für Schritt
Mobile Navigation verstehen
Nutze Start, Kalender, Tickets, Analyse und Mehr in der unteren Leiste. Öffne Mehr für Setup, Ressourcen, Gäste, Hilfe und Verwaltung.
Erwartetes Ergebnis: Alle Bereiche bleiben erreichbar, ohne die fünf Kernziele zu verdrängen.Hauptinhalt und Fokus nutzen
Verwende beim Tastaturstart den Sprunglink Zum Hauptinhalt. Navigiere mit Tab und Shift+Tab und schließe Dialoge mit Escape, sofern angeboten.
Erwartetes Ergebnis: Fokus bleibt sichtbar, folgt der Lesereihenfolge und kehrt nach einem Dialog zum Auslöser zurück.Zoom und große Schrift prüfen
Erhöhe Browserzoom auf 200 Prozent beziehungsweise Systemschrift. Prüfe Überschriften, Tabellen, Buttons, Sticky-Aktionen und Fehlermeldungen.
Erwartetes Ergebnis: Kein Text überlappt, Hauptaktionen bleiben sichtbar und horizontales Scrollen ist auf echte breite Inhalte begrenzt.PWA bewusst installieren
Öffne die Buchungs- oder Kontoseite deines Betriebs und prüfe Name sowie Betrieb, bevor du Zum Home-Bildschirm wählst.
Erwartetes Ergebnis: Die installierte App startet im richtigen Betrieb und nicht auf der globalen vsmBooking-Seite.
So sieht es aus
Responsive Layout und Safe Areas
Desktop-Sidebar wird mobil durch ein fokussiertes Menü ersetzt. Tabellen wechseln in Karten oder kontrolliertes horizontales Scrollen. Sticky Footer berücksichtigen die Geräte-Safe-Area.
Tastatur und Screenreader
Interaktive Elemente benötigen zugängliche Namen, Status und sinnvolle Reihenfolge. Dialoge, Sheets, Popovers, Tabs und komplexe Formulare verwenden gepflegte Accessibility-Primitives.
Status wird nicht nur durch Farbe oder Position vermittelt. Livefeedback nutzt angemessene Statusregionen, ohne jede kleine Änderung störend anzusagen.
Kamera, PWA und Offline
Gerätefunktionen benötigen HTTPS, Berechtigung und häufig eine direkte Nutzeraktion. Biete immer einen manuellen Alternativweg, wenn Kamera, QR oder Push nicht verfügbar ist.
Wenn etwas nicht funktioniert
Untere Navigation verdeckt Inhalte.
- Wahrscheinliche Ursache
- Viewport, Safe Area oder zusätzlicher Sticky-Bereich wird nicht ausreichend berücksichtigt.
- Sichere Lösung
- Scrolle bis zum Ende, prüfe Browserzoom und melde Route, Gerät und Viewport. Nutze vorübergehend das Mehr-Menü, ohne primäre Aktion zu überdecken.
Fokus verschwindet nach einem Dialog.
- Wahrscheinliche Ursache
- Auslöser wurde entfernt oder Fokuswiederherstellung ist fehlerhaft.
- Sichere Lösung
- Nutze den Sprunglink zum Hauptinhalt und dokumentiere exakte Dialogaktion, Route und Eingabemethode für Support.
Beschriebene Produktoberflächen
/dashboard/p/[tenant]/events/[tenant]/[event]