Risorse · 57
Finestre di dialogo e tastiere: testare il percorso di messa a fuoco
Verificare l'apertura, lo spostamento, la chiusura e il ripristino del contesto nelle interfacce che interrompono un'attività.
Aggiornato · 3 min
Obiettivi di questa guida
- Scegliere il componente corretto
- Posizionare il focus in modo comprensibile
- Consentire la chiusura
- Ripristinare il contesto
Verifica rapida
- È necessaria una finestra modale?
- Dove viene posizionato il focus all'apertura?
- Lo sfondo è effettivamente inerte?
- La finestra di dialogo può essere chiusa tramite tastiera?
- Dove viene ripristinato il focus se il trigger scompare?
Metodo passo passo
- 1
Scegliere l'interruzione
Decidere se le informazioni necessitano di una finestra modale o possono rimanere nella pagina. Separare finestre di dialogo, pannelli e menu modali. Preferire elementi nativi appropriati e verificarne il comportamento; un ruolo ARIA non crea interazioni automaticamente.
Risultato: scelta dei componenti e relative motivazioni.
- 2
Nome e apertura
Collegare un nome accessibile a un'intestazione visibile. Posizionare il focus in modo appropriato: all'inizio del contenuto strutturato, in un campo utile o in un'azione sicura a seconda dell'attività. L'apertura non deve far scorrere l'inizio fuori dalla visualizzazione.
Risultato: apertura testata.
- 3
Navigazione tramite tastiera
Secondo il modello di finestra di dialogo modale del W3C, Tab e Maiusc+Tab rimangono all'interno del contenuto, mentre l'esterno è inerte. Verificare la visibilità del focus, l'ordine logico e l'assenza di trappole nei controlli annidati.
Risultato: navigazione avanti e indietro.
- 4
Chiusura e ripristino
Fornire una chiusura visibile e il comportamento previsto del tasto Esc. Riportare il focus al trigger o a un passaggio logico se il trigger non esiste più. Dopo l'invio, gli utenti dovrebbero trovare le modifiche apportate e le azioni successive.
Risultato: ripristino del focus e del contesto.
- 5
Verifica errori e spaziatura
Includi messaggi lunghi, campi non validi, tastiere mobili e zoom. Lo scorrimento non deve nascondere in modo permanente azioni o intestazioni. Gli errori devono essere comprensibili e raggiungibili senza perdere i valori inseriti.
Risultato: casi limite per schermi di piccole dimensioni.
- 6
Verifica nella pagina
Testa il componente integrato con tastiera e tecnologie assistive, non solo in una demo isolata. Verifica l'apertura duplicata e il focus dopo chiusure ripetute. La sola accettazione locale non è sufficiente per la certificazione WCAG.
Risultato: registro di accettazione e limiti noti.
Foglio di lavoro riutilizzabile
Completare con le proprie osservazioni autorizzate. Questi campi costituiscono un modello di lavoro, non risultati osservati.
| Campo | Informazioni da registrare |
|---|---|
| Apertura | Attivazione, intestazione e focus iniziale |
| Percorso | Tab, Maiusc+Tab, sfondo inerte e focus visibile |
| Chiusura | Esc, pulsante e ritorno logico |
| Limiti | Zoom testato, contenuti lunghi, errori e assistenza |
Esempio pratico fittizio
Situazione illustrativa
Esempio fittizio: una finestra di dialogo conferma l'eliminazione di una riga e il relativo pulsante di apertura scompare.
Decisione e prove attese
Dopo la conferma, il focus torna all'elemento successivo logico o all'intestazione dell'elenco, con un risultato annunciato e un passaggio successivo visibile.
Distinguere i meccanismi
| Meccanismo | Scopo | Verifica o limitazione |
|---|---|---|
| Finestra di dialogo modale | Interruzione per un'attività delimitata | Sfondo inerte e focus contenuto |
| Pannello non modale | Mantieni il contesto disponibile | Movimento coerente del focus |
| Sezione di pagina | Presenta informazioni continue | Spesso più facile da consultare |
Indicatori di gestione
| Indicatore | Cosa misura | Prima azione |
|---|---|---|
| Percorsi da tastiera completati | Attività eseguite senza puntatore | Correggi i blocchi |
| Corretto ritorno del focus | Chiusure che ripristinano il contesto utile | Gestisci i trigger mancanti |
| Stati dei bordi testati | Zoom, errori e contenuto lungo | Omissioni di documenti |
Errori comuni
- Aggiunta di aria-modal senza contenuto inerte
- Perdita del focus dopo la chiusura
- Blocco di Esc senza un'uscita chiara
- Testa solo l'apertura del mouse
Domande frequenti
È nativo È sufficiente una finestra di dialogo?
Offre un comportamento utile, ma la denominazione, il focus iniziale, il contenuto, gli errori e l'integrazione richiedono ancora dei test.
Il primo pulsante dovrebbe ricevere il focus?
Non sempre. Il punto appropriato dipende dal contenuto e dall'attività, soprattutto per le decisioni irreversibili.
L'automazione può convalidare il percorso?
Rileva alcuni difetti, ma la comprensione, l'ordine utile e il contesto ripristinato richiedono l'approvazione manuale.
Riferimenti ufficiali
I riferimenti supportano il metodo. Adattare i controlli al proprio contesto; non costituiscono una certificazione. I titoli dei riferimenti originali e i documenti di origine potrebbero essere in un'altra lingua.
Riferimenti consultati il .
