Navigazione da tastiera

Questa guida illustra come utilizzare la navigazione predefinita della tastiera così come è attualmente implementata in Blockly.

Utilizzare la navigazione da tastiera

Affinché la navigazione con tastiera vada a buon fine, l'utente deve essere in grado di completare le seguenti attività:

  • Muoversi nello spazio di lavoro
  • Collegare blocchi in uno spazio di lavoro
  • Aggiungere un blocco allo spazio di lavoro
  • Scollegare i blocchi
  • Navigare nella cassetta degli attrezzi
  • Navigare nel riquadro a comparsa
  • Inserire blocchi dal menu a scomparsa

Di seguito viene spiegato in che modo la navigazione con tastiera predefinita di Blockly consente di svolgere queste attività.

Attivazione della navigazione con tastiera

Un utente può attivare e disattivare la navigazione da tastiera premendo Maiusc + Ctrl + K. Quando la navigazione con la tastiera viene attivata per la prima volta, nello spazio di lavoro viene visualizzata una linea rossa lampeggiante. Questo è il cursore. Mostra la posizione attuale dell'utente e si aggiorna mentre l'utente naviga nello spazio di lavoro.
Quando un utente preme Maiusc Ctrl K, sullo schermo viene visualizzata una linea rossa lampeggiante. Questo è il cursore.

Se premi Invio, nella posizione attuale viene creata una linea blu che rappresenta l'indicatore di un utente. Un indicatore mostra una posizione target per l'inserimento del blocco. Non si aggiorna quando sposti il cursore nello spazio di lavoro.
Quando un utente preme Invio, sullo schermo viene visualizzata una linea blu. Questo è l'indicatore.

Utilizzo del cursore predefinito

Lo spazio di lavoro è costituito da input, campi, connessioni, blocchi e coordinate dello spazio di lavoro. Il cursore predefinito si sposta nell'area di lavoro suddividendo tutti i componenti in diversi livelli.

Per spostarti tra i livelli, utilizza i tasti A e D. Per spostarti all'interno di un livello, utilizza i tasti W e S.

Livello dello spazio di lavoro

Accedi alla modalità di navigazione da tastiera premendo Maiusc + Ctrl + K. Il cursore viene visualizzato nello spazio di lavoro o nel primo blocco dello spazio di lavoro. Se il cursore si trova su un blocco, spostalo a livello di spazio di lavoro premendo A due volte. Per spostare il cursore nello spazio di lavoro, utilizza Maiusc + WASD. Per passare al livello della pila, utilizza il tasto D.
Il cursore nello spazio di lavoro di Blockly si sposta quando l'utente preme i tasti Shift e W A S D. Quando l'utente preme D, il cursore viene visualizzato come un rettangolo attorno alla prima serie di blocchi

Livello di serie

A livello di serie, puoi spostarti tra le serie di blocchi nello spazio di lavoro utilizzando i tasti W e S. A questo livello il cursore è rappresentato da un rettangolo rosso pieno attorno a tutti i blocchi di una serie. Per andare al primo blocco della serie selezionata, utilizza il tasto D.
Quando l'utente preme S, il cursore passa alla serie di blocchi successiva. Quando l'utente preme D, il cursore viene visualizzato come una linea rossa lampeggiante sopra il primo blocco nell'elenco selezionato.

Livello di blocchi e connessioni

Questo livello contiene un blocco e tutte le connessioni esterne al blocco. Il cursore predefinito è impostato per saltare il blocco se è presente un collegamento precedente o di output. Se non esistono, il cursore si sposta sul blocco, come mostrato di seguito.

Quando l'utente preme D, il cursore passa da un rettangolo rosso attorno alla serie di blocchi a metà di un rettangolo che circonda il primo blocco della serie.

Le tre possibili connessioni esterne sono mostrate di seguito.
Una linea rossa evidenzia le tre possibili connessioni esterne. Si tratta delle connessioni precedenti, successive e di output di un blocco.

A livello di blocco e connessione, puoi spostarti tra le connessioni esterne utilizzando i tasti W e S. A questo livello il cursore è rappresentato da un contorno rosso lampeggiante della connessione corrente. Per andare al primo campo o all'inserimento in un blocco, premi D.
Quando l'utente preme il tasto S, il cursore viene visualizzato come una linea lampeggiante rossa sulla connessione successiva di un blocco. Quando un utente preme il tasto D, il cursore viene visualizzato come un rettangolo rosso attorno al primo campo del blocco.

Campi e livello di input

Questo livello contiene tutti i campi e gli input del blocco. Di seguito sono riportati alcuni esempi di campi e input.
Un rettangolo rosso evidenzia esempi di input e campi in un blocco.
A questo livello puoi spostarti tra i campi e gli input modificabili del blocco corrente con W e S. Per un campo, il cursore è un rettangolo rosso pieno. Per un input, il cursore è un pezzo di puzzle rosso lampeggiante. Quando il cursore si trova su un input, premi D per passare al blocco collegato.

Il cursore si sposta tra gli input e i campi del blocco quando un utente preme il tasto S. Quando un utente preme D mentre si trova in un input con un blocco collegato, il cursore viene visualizzato come una linea rossa lampeggiante sopra il blocco collegato.

Quando il cursore è su un campo, premi Invio per modificarlo.

Il cursore viene visualizzato come un rettangolo rosso attorno a un campo. Quando l'utente preme Invio, si apre un menu a discesa. L'utente preme il tasto S per selezionare un valore nel menu a discesa e poi preme Invio per chiuderlo.

Collegamento di blocchi nello spazio di lavoro

  1. Vai alla connessione di destinazione utilizzando i tasti WASD
  2. Contrassegna la connessione utilizzando il tasto Invio
  3. Vai a un punto di connessione valido utilizzando i tasti WASD
  4. Collega i due blocchi utilizzando il tasto I (per inserire)

Una connessione di input ha un punto blu che indica che è contrassegnata. Quando l'utente preme i su una connessione valida, il blocco si sposta sul punto di connessione contrassegnato.

Spostare un blocco nello spazio di lavoro

In genere, in Blockly sposti un blocco nell'area di lavoro selezionandolo, trascinandolo nella posizione desiderata e rilasciandolo. Con le scorciatoie da tastiera, puoi contrassegnare la posizione di destinazione, andare al blocco che vuoi spostare e poi dirgli di muoversi.

  1. Vai a una posizione nello spazio di lavoro utilizzando i tasti Maiusc + WASD.
  2. Contrassegna la posizione nello spazio di lavoro utilizzando il tasto Invio
  3. Vai al blocco che vuoi spostare utilizzando i tasti WASD.
  4. Sposta il blocco nella posizione contrassegnata utilizzando il tasto I

Nell'area di lavoro di Blockly viene visualizzato un cursore. Quando l'utente preme Invio, viene contrassegnata la sua posizione e in questa posizione viene visualizzata una linea blu. Utilizzando i tasti WASD, spostano il cursore al collegamento esterno di un blocco. Quando l'utente preme i, il blocco si sposta nella posizione contrassegnata.

Blocchi staccabili

In genere, in Blockly scolleghi due blocchi selezionando il blocco inferiore e trascinandolo lontano dal blocco principale. Con le scorciatoie da tastiera puoi scollegare i blocchi premendo X con il cursore sulla connessione che vuoi interrompere.

  1. Vai alla connessione che vuoi interrompere utilizzando i tasti WASD.
  2. Interrompi la connessione con X

Due blocchi sono collegati sullo schermo con il cursore visualizzato al centro. Quando l'utente preme il tasto X, i blocchi vengono scollegati.

Inserire un blocco dalla cassetta degli attrezzi

  1. Premi il tasto T per aprire la cassetta degli attrezzi
  2. Usa i tasti W e S per spostarti tra le categorie
  3. Premi il tasto D per passare ai blocchi nel menu a scomparsa
  4. Per spostarti tra i blocchi, utilizza i tasti W e S.
  5. Premi il tasto Invio per inserire un blocco dal menu a scomparsa.

Quando un utente preme T, si apre una cassetta degli attrezzi che mostra diverse categorie di blocchi. Premendo S si passa da una categoria all'altra. Quando un utente preme D, il primo blocco della categoria viene evidenziato. Se premi Invio, il blocco viene inserito nello spazio di lavoro e la cassetta degli attrezzi viene chiusa.

Sperimentazione

Riteniamo che le persone potrebbero essere interessate a sperimentare quattro aree principali:

  1. Mappature dei tasti: quali tasti devono essere mappati a quali azioni.
  2. Testo per screen reader/registrazione/avvisi: la modalità di lettura da parte di uno screen reader delle posizioni dei cursori, nonché di eventuali errori o avvisi.
  3. Navigazione nello spazio di lavoro: la modalità di navigazione dell'utente tra i diversi blocchi, campi, input e connessioni nello spazio di lavoro.
  4. Aspetto del cursore: l'aspetto del cursore e dell'indicatore.

Per ulteriori informazioni su come utilizzare queste API, consulta il lab di codice di navigazione con tastiera di Blockly.

Se vuoi sperimentare altre aree in cui potremmo aiutarti, compila il modulo.

Domande frequenti

D: Perché non hai utilizzato i tasti freccia per la navigazione da tastiera?
R: in genere gli screen reader utilizzano i tasti freccia. Non volevamo interferire con questo, quindi abbiamo scelto di utilizzare i tasti WASD.
Tuttavia, siamo consapevoli che ognuno ha esigenze diverse, pertanto consigliamo vivamente di creare un modo semplice per modificare le mappature delle chiavi.

D: Sembra piuttosto complicato, perché abbiamo bisogno di livelli diversi?
R: quando abbiamo pensato alla navigazione con la tastiera, avevamo bisogno di un modo strutturato per muoverci tra i diversi blocchi, le connessioni, i campi, gli input e le coordinate dello spazio di lavoro.
All'interno, lo rappresentiamo con un albero sintattico astratto (AST). L'implementazione predefinita del cursore non si discosta molto da questo modello.Si tratta di una scelta intenzionale per aiutare gli sviluppatori a comprendere meglio l'architettura sottostante. Esistono altri cursor che potrebbero essere più facili da comprendere per un utente finale.

Limitazioni

Non supportiamo ancora la navigazione verso componenti non bloccanti (ad es. cestino, pulsanti di zoom e pulsanti popup). Per ulteriori informazioni sulle limitazioni, consulta l'elenco dei bug relativi alla navigazione con la tastiera aperti.