Lieferadressdialog mit der Tastatur prüfen
Ein ausgearbeitetes Beispiel zeigt Fokusfolge, Abbrechen und Speichern im Adressdialog. So werden Tastaturfehler konkret nachvollziehbar.
Ein Lieferadressdialog muss sich vollständig mit der Tastatur bedienen lassen. Prüfen Sie den ganzen Ablauf vom Öffnen bis zur Rückkehr auf die Seite. Ein erreichbarer Speichern-Button genügt dafür nicht.
Das folgende Beispiel ist erfunden: Im Kundenportal steht für Adresse D-17 „Hafenweg 8“. Die Person möchte die Hausnummer auf 10 ändern. Der Dialog enthält Straße und Hausnummer sowie „Abbrechen“ und „Adresse speichern“. Es geht um einen manuellen Funktionstest, nicht um ein vollständiges Barrierefreiheitsgutachten.
Den Fehler als Ablauf festhalten
Im angenommenen Ausgangszustand öffnet sich der Dialog, der Fokus bleibt jedoch auf „Lieferadresse ändern“ hinter der abgedunkelten Fläche. Mit Tab erreicht die Person anschließend Links im Seitenfuß. Die sichtbaren Adressfelder werden übersprungen. Ein Maustest hätte diesen Fehler leicht übersehen.
Dokumentieren Sie die Startseite, den Auslöser, die verwendeten Tasten und das tatsächlich fokussierte Element. So kann die Entwicklung denselben Fehler nachvollziehen. Verwenden Sie für den Test eine sichere Umgebung mit Testdaten; speichern Sie keine echte Kundenadresse probeweise um.
Das erwartete Verhalten festlegen
Für diesen kurzen Dialog ist das Feld „Straße“ eine sinnvolle erste Fokusposition. Bei langen oder folgenreichen Dialogen kann eine andere Position nötig sein. Das WAI-Dialogmuster beschreibt diese Unterschiede.
Aktion | Erwartetes Ergebnis im Beispiel |
|---|---|
Mit Tab zum Auslöser, dann Enter | Dialog öffnet; Fokus liegt sichtbar im Straßenfeld. |
Mit Tab vorwärts gehen | Straße, Hausnummer, Abbrechen, Adresse speichern; danach wieder Straße. |
Mit Shift+Tab rückwärts gehen | Dieselben Elemente in Gegenrichtung; kein Sprung hinter den Dialog. |
Hausnummer 10 eingeben, dann Escape vor dem Speichern | Dialog schließt; Fokus kehrt zum Auslöser zurück; D-17 bleibt Hafenweg 8. |
Erneut öffnen und 10 speichern | Erfolg wird erst nach bestätigter Speicherung angezeigt; D-17 zeigt Hafenweg 10. |
Speichern wird fachlich abgelehnt | Verständliche Fehlermeldung; Eingaben bleiben erhalten; betroffener Bereich ist erreichbar. |
Die Tab-Reihenfolge gilt für genau diesen Beispielaufbau. In Ihrer Oberfläche können weitere Bedienelemente dazugehören.
Die Ursache an der richtigen Stelle beheben
Verwenden Sie echte Buttons für Aktionen und passend beschriftete Felder. Ein eigener Dialog braucht einen zugänglichen Namen und eine korrekt umgesetzte Fokusführung. role="dialog" oder aria-modal="true" allein sperrt den Hintergrund nicht und implementiert keine Tastaturbedienung.
Die Entwicklung muss Öffnen, Begrenzung des Fokus auf den aktiven modalen Dialog und Schließen gemeinsam betrachten. Beim Schließen ist der Auslöser hier weiterhin vorhanden. Wird er in einem anderen Ablauf entfernt, braucht es eine andere logisch passende Rückkehrposition. Die sichtbare Fokusanzeige darf durch das Styling nicht verschwinden.
Schließen während einer laufenden Speicherung prüfen
Escape ist kein automatischer Rückruf einer bereits gesendeten Serveranfrage. Im Beispiel darf das Fenster auch während der Verarbeitung geschlossen werden. Die Seite zeigt dann weiterhin „Adressänderung wird verarbeitet“ für D-17. Nach einer bestätigten Antwort aktualisiert sie die Adresse; bei unklarem Ergebnis bleibt der Status klärungsbedürftig. „Änderung verworfen“ wäre in dieser Situation eine falsche Aussage.
Wiederholen Sie den Test nach der Korrektur in den unterstützten Browsern und zusätzlich mit einer passenden Screenreader-Konfiguration. Halten Sie Beobachtungen und offene Fehler fest. Der korrigierte Tastaturablauf sagt noch nichts über alle anderen Seiten, Kontraste oder Inhalte aus.
Quellen
Geschrieben von
- Julia HoffmannRedakteurin für Design und UXJulia Hoffmann ist bei ASES für die redaktionellen Inhalte zu Design und User Experience zuständig. Ihre Beiträge behandeln die Nutzung von Websites und Anwendungen, die Gestaltung von Benutzeroberflächen und digitale Barrierefreiheit.
Weiterlesen
Alle Beiträge
Design & UX mit ASES
Nutzererlebnis, Oberflächen und Markenauftritt