Garanzia di funzionamento tramite tastiera per menu a tendina e menu per dispositivi mobili

Come possono i menu a tendina e i menu per dispositivi mobili essere completamente utilizzabili tramite tastiera?

I menu a tendina e i menu per dispositivi mobili devono seguire il loro effettivo modello di navigazione ed essere completamente accessibili senza un dispositivo di puntamento. Durante l'apertura, la commutazione e la chiusura, lo stato visibile, la logica della tastiera e la posizione del focus rimangono sincronizzati, garantendo che né lo sfondo né l'elemento padre diventino un vicolo cieco.

Ritorno al focus prevedibile

Caso diagnostico: "Dipendenza dal passaggio del mouse"

Un menu mobile si apre come pannello laterale, ma il focus rimane sul pulsante del menu nascosto e il tasto Tab si sposta in secondo piano. All'apertura, il focus si sposta sull'intestazione del menu, rimane nel pannello durante l'utilizzo e ritorna al pulsante del menu dopo aver premuto Esc; i sottolink della versione desktop rimangono collegamenti normali con un ordine di tabulazione logico.

Dipendenza dal passaggio del mouse

• Dipendenza dal passaggio del mouse I sotto-elementi appaiono solo quando si passa il mouse sopra di essi e non sono accessibili tramite focus o attivazione.

• Trappola del focus nel pannello mobile – Il focus si sposta dietro il menu aperto oppure rimane su un elemento invisibile dopo la sua chiusura.

• Modello di tastiera straniera – I tasti freccia e Esc si comportano come in un menu di un'applicazione, anche se è prevista la navigazione web standard.

Layout del menu appropriato

• Layout del menu appropriato – Navigazione, menu delle azioni e campi di selezione non vengono mescolati, ma mantengono il comportamento della tastiera corrispondente alla loro funzione effettiva.

• Apertura e contenuto accessibili – Trigger, voci, sottolivelli e chiusura rimangono completamente utilizzabili senza dispositivo di puntamento, in un ordine logico.

• Ritorno al focus prevedibile – L'apertura e la chiusura mirano a mantenere l'attenzione del lettore senza perderla, riportando la pagina in cima o saltando contenuti.

Apertura e contenuto accessibili

1. Per i menu a tendina su desktop e i pannelli su dispositivi mobili, documentare lo scopo, gli stati, l'ordine di tabulazione e i pulsanti previsti prima dell'implementazione.

2. Aprire, navigare, uscire e rientrare in tutti i livelli del menu esclusivamente tramite tastiera.

3. Verificare in modo sincrono la posizione del focus, la visualizzazione espansa dell'area e la visibilità durante l'apertura, la chiusura, le modifiche del viewport e gli aggiornamenti dinamici del contenuto.

Come "Gestire i menu interamente tramite tastiera" si collega ad altri argomenti.

Testare in modo differenziato i problemi di contrasto invece di procedere ciecamente con i valori di soglia. Risponde alla successiva domanda pratica: come differenziare e testare i problemi di contrasto invece di procedere semplicemente con i valori di soglia?

Combinare lo scorrimento infinito con stati di pagina indicizzabili. prosegue questa linea di pensiero con un'altra domanda: come può un menu a scorrimento infinito rimanere completamente accessibile senza eventi di scorrimento?

Se si desidera implementare concretamente la gestione dei menu interamente tramite tastiera, è possibile fare riferimento a: Sistemi web robusti Questa risorsa si concentra su "Tastiera, Focus e Interazione Dinamica" e "Modello di Menu Appropriato".

Conclusione: Gestione dei Menu interamente tramite Tastiera

Un menu è accessibile tramite tastiera se il suo modello è appropriato al suo scopo e ogni cambio di stato mantiene il focus. L'aggiunta di logica da tastiera è utile solo se implementata in modo coerente e documentata.

Fonti e ulteriori informazioni

Le fonti primarie definiscono il quadro tecnico per la gestione dei menu interamente tramite tastiera.

• Comprensione della tastiera — W3C WAIWCAG 2.1.1 richiede che tutte le funzioni siano utilizzabili tramite interfaccia da tastiera senza vincoli temporali specifici.

• Esempio di menu di navigazione con funzionalità di visualizzazione — W3C ARIA APGQuesto esempio APG documenta l'ordine di messa a fuoco, il comportamento dei tasti Invio, Spazio ed Esc, nonché il comportamento di espansione ARIA per la navigazione con sezioni comprimibili.

• Modello di visualizzazione — W3C ARIA APGQuesto modello definisce ruoli, stati e interazioni obbligatorie da tastiera per i controlli che mostrano e nascondono il contenuto.