Ressourcen · 57
Dialoge und Tastaturen: Testen Sie die Fokusreise
Öffnen, Verschieben, Schließen und Kontextwiederherstellung in Schnittstellen prüfen, die eine Aufgabe unterbrechen.
Aktualisiert · 3 min
Wozu dieser Leitfaden beiträgt
- Wählen Sie die richtige Komponente
- Setzen Sie den Fokus nachvollziehbar
- Schließen zulassen
- Kontext wiederherstellen
Kurzcheck
- Ist ein Modal notwendig?
- Wo landet der Eröffnungsfokus?
- Ist der Hintergrund tatsächlich inaktiv?
- Kann der Dialog per Tastatur geschlossen werden?
- Wohin kehrt der Fokus zurück, wenn der Auslöser verschwindet?
Schritt-für-Schritt-Anleitung
- 1
Wählen Sie die Unterbrechung
Entscheiden Sie, ob Informationen ein Modal benötigen oder auf der Seite verbleiben können. Separate modale Dialoge, Panels und Menüs. Bevorzugen Sie geeignete native Elemente und überprüfen Sie das Verhalten; Eine ARIA-Rolle erstellt nicht automatisch Interaktionen.
Liefergegenstand: Komponentenauswahl und Begründung.
- 2
Benennen und öffnen
Verbinden Sie einen barrierefreien Namen mit einer sichtbaren Überschrift. Setzen Sie den Fokus entsprechend: am Anfang eines strukturierten Inhalts, auf einem nützlichen Feld oder auf einer sicheren Aktion, je nach Aufgabe. Beim Öffnen sollte der Anfang nicht aus dem Blickfeld gescrollt werden.
Lieferbar: geprüfte Öffnung.
- 3
Navigieren per Tastatur
Unter dem modalen Dialogmuster von W3C bleiben Tab und Umschalt+Tab im Inneren und äußere Inhalte bleiben inaktiv. Überprüfen Sie den sichtbaren Fokus, die logische Reihenfolge und keine Überfüllungen in verschachtelten Steuerelementen.
Lieferbar: Vorwärts- und Rückwärtsnavigation.
- 4
Schließen und wiederherstellen
Sorgen Sie für sichtbares Schließen und erwartetes Escape-Verhalten. Den Fokus wieder auf den Auslöser oder einen logischen Schritt richten, wenn der Auslöser nicht mehr vorhanden ist. Nach der Übermittlung sollten Benutzer herausfinden, was sich geändert hat und was als nächstes passieren kann.
Ergebnis: Fokus und Kontext wiederhergestellt.
- 5
Testfehler und Leerzeichen
Fügen Sie lange Nachrichten, ungültige Felder, mobile Tastaturen und Zoom hinzu. Durch das Scrollen dürfen Aktionen oder Überschriften nicht dauerhaft ausgeblendet werden. Fehler sollten nachvollziehbar und erreichbar sein, ohne dass eingegebene Werte verloren gehen.
Lieferbar: Schmalbildschirm-Edge-Cases.
- 6
Checken Sie die Seite ein
Testen Sie die integrierte Komponente mit Tastatur und unterstützender Technologie, nicht nur in einer isolierten Demo. Überprüfen Sie das doppelte Öffnen und den Fokus nach wiederholtem Schließen. Die lokale Akzeptanz allein begründet noch keine WCAG-Zertifizierung.
Liefergegenstand: Abnahmeprotokoll und bekannte Grenzwerte.
Wiederverwendbares Arbeitsblatt
Ergänzen Sie Ihre autorisierten Beobachtungen. Bei diesen Feldern handelt es sich um eine Arbeitsvorlage, nicht um beobachtete Ergebnisse.
| Feld | Zu erfassende Informationen |
|---|---|
| Eröffnung | Auslöser, Kurs und anfänglicher Fokus |
| Reise | Tab, Umschalt+Tab, inaktiver Hintergrund und sichtbarer Fokus |
| Abschluss | Escape, Button und logische Rückkehr |
| Grenzen | Getesteter Zoom, lange Inhalte, Fehler und Hilfestellungen |
Fiktives Arbeitsbeispiel
Beispielhafte Situation
Fiktives Beispiel: Ein Dialog bestätigt das Löschen einer Zeile und seine Öffnungsschaltfläche verschwindet.
Entscheidung und erwartete Beweise
Nach der Bestätigung kehrt der Fokus zu einem logischen nächsten Element oder der Listenüberschrift zurück, mit einem angekündigten Ergebnis und einem sichtbaren nächsten Schritt.
Unterscheiden Sie die Mechanismen
| Mechanismus | Zweck | Überprüfung oder Einschränkung |
|---|---|---|
| Modaler Dialog | Unterbrechung für eine begrenzte Aufgabe | Inaktiver Hintergrund und begrenzter Fokus |
| Nichtmodales Panel | Kontext verfügbar halten | Kohärente Fokusbewegung |
| Seitenbereich | Weiterführende Informationen präsentieren | Oft einfacher zu konsultieren |
Managementindikatoren
| Indikator | Was es misst | Erste Aktion |
|---|---|---|
| Tastaturreisen abgeschlossen | Aufgaben, die ohne Zeiger ausgeführt werden | Blocker beheben |
| Korrekter Fokus kehrt zurück | Abschlüsse stellen nützlichen Kontext wieder her | Fehlende Trigger behandeln |
| Getestete Randzustände | Zoom, Fehler und langer Inhalt | Dokumentauslassungen |
Häufige Fallstricke
- Aria-modal ohne inerten Inhalt hinzufügen
- Nach dem Schließen den Fokus verlieren
- Blockierende Flucht ohne klaren Ausgang
- Testet nur das Öffnen mit der Maus
Häufig gestellte Fragen
Reicht ein nativer Dialog?
Es bietet nützliches Verhalten, aber Benennung, anfänglicher Fokus, Inhalt, Fehler und Integration müssen noch getestet werden.
Soll der erste Button den Fokus erhalten?
Nicht immer. Die geeignete Stelle hängt von Inhalt und Aufgabenstellung ab, insbesondere bei unumkehrbaren Entscheidungen.
Kann Automatisierung die Reise validieren?
Es werden einige Mängel erkannt, aber das Verständnis, die nützliche Reihenfolge und der wiederhergestellte Kontext müssen manuell akzeptiert werden.
Offizielle Referenzen
Die Referenzen unterstützen die Methode. Passen Sie die Prüfungen an Ihren Kontext an; sie stellen keine Zertifizierung dar. Originalreferenztitel und Quelldokumente können in einer anderen Sprache verfasst sein.
Referenzen geprüft am .
