Navigazione da tastiera

Questa guida si concentra su come utilizzare la navigazione da tastiera predefinita in quanto è attualmente implementata in Blockly.

Utilizzo della navigazione da tastiera

Affinché la navigazione da tastiera funzioni correttamente, un utente deve essere in grado di completare le seguenti attività:

  • Spostarsi nell'area di lavoro
  • Collegare i blocchi in un'area di lavoro
  • Aggiungere un blocco allo spazio di lavoro
  • Scollega blocchi
  • Esplora gli strumenti
  • Navigazione nel riquadro a scomparsa
  • Inserisci blocchi dal riquadro a scomparsa

Di seguito viene spiegato in che modo la navigazione da tastiera predefinita di Blockly svolge queste attività.

Attivazione della navigazione da tastiera

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

Premi Invio per creare una linea blu nella posizione corrente che mostra l'indicatore di un utente. Un indicatore mostra una posizione target per l'inserimento del blocco. Non si aggiorna quando sposti il cursore nell'area di lavoro.
Quando un utente preme, sullo schermo appare una linea blu. Questo è l'indicatore.

Utilizzo del cursore predefinito

L'area di lavoro è composta da input, campi, connessioni, blocchi e coordinate dell'area di lavoro. Il cursore predefinito si sposta nell'area di lavoro suddividendo tutti i componenti in livelli diversi.

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

A livello di spazio di lavoro

Attiva la modalità di navigazione da tastiera premendo Maiusc + Ctrl + K. Il cursore viene posizionato nell'area di lavoro o sul primo blocco nell'area di lavoro. Se il cursore si trova in un blocco, spostalo al livello dell'area di lavoro premendo due volte A. Per spostare il cursore sullo spazio di lavoro, utilizza Maiusc + WASD. Per passare al livello di stack, utilizza il tasto D.
Il cursore nell'area di lavoro a blocchi si sposta quando l'utente preme i tasti Maiusc e W A S D. Quando l'utente preme d, il cursore viene visualizzato come un rettangolo attorno alla prima pila di blocchi.

Livello stack

A livello di stack, puoi spostarti tra gli stack di blocchi nell'area di lavoro utilizzando le chiavi W e S. A questo livello il cursore è rappresentato da un rettangolo rosso continuo intorno a tutti i blocchi in una pila. Per andare al primo blocco nello stack selezionato, utilizza la chiave D.
Quando l'utente preme S, il cursore si sposta alla pila 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 blocco e connessioni

Questo livello contiene un blocco e tutte le connessioni esterne al blocco. Il cursore predefinito è impostato per saltare il blocco in caso di connessione precedente o di output. Se nessuno dei due è presente, il cursore si sposterà nel blocco, come mostrato di seguito.

Quando l'utente preme d, il cursore passa da un rettangolo rosso che circonda la pila di blocchi a metà di un rettangolo che circonda il primo blocco nella pila.

Le tre connessioni esterne possibili sono mostrate di seguito.
Una linea rossa evidenzia le tre possibili connessioni esterne. Queste sono le connessioni precedente, successiva e di output di un blocco.

A livello di blocco e connessione, puoi navigare attraverso 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 al primo input di un blocco, premi D.
Quando l'utente preme il tasto S, il cursore viene visualizzato come una linea rossa lampeggiante sul successivo collegamento di un blocco. Quando un utente preme il tasto d, il cursore viene visualizzato come un rettangolo rosso intorno al primo campo del blocco.

Campi e livello di input

Questo livello contiene tutti i campi e gli input che si trovano nel 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 modificabili e gli input del blocco corrente con W e S. Per un campo, il cursore è un rettangolo rosso fisso. Per digitare, 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 su un ingresso con un blocco collegato, il cursore appare come una linea rossa lampeggiante sopra il blocco connesso.

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

Il cursore viene visualizzato come un rettangolo rosso intorno 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, quindi preme Invio per chiudere il menu a discesa.

Collegare i blocchi nell'area di lavoro

  1. Vai alla connessione di destinazione utilizzando le chiavi WASD
  2. Contrassegna la connessione utilizzando il tasto Invio.
  3. Accedi a un punto di connessione valido utilizzando le chiavi WASD
  4. Collega i due blocchi usando il tasto I (per l'inserimento)

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

Spostamento di un blocco nell'area di lavoro

Normalmente 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 desideri spostare e poi dirgli di spostarlo.

  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 le chiavi WASD.
  4. Sposta il blocco nella posizione contrassegnata utilizzando il tasto I.

Nell'area di lavoro a blocchi è visualizzato un cursore. Quando l'utente preme Invio, contrassegna la sua posizione e compare una linea blu. Utilizzando i tasti WASD, spostano il cursore sulla connessione esterna di un blocco. Quando l'utente preme i, il blocco si sposta nella posizione contrassegnata.

Blocchi di sgancio

Normalmente in Blockly scolleghi due blocchi selezionando il blocco inferiore e trascinandolo lontano dal blocco padre. Con le scorciatoie da tastiera scollega i blocchi premendo X con il cursore sulla connessione che vuoi interrompere.

  1. Vai alla connessione che vuoi interrompere utilizzando le chiavi WASD.
  2. Interrompi la connessione con X

Sullo schermo sono collegati due blocchi con il cursore al centro. Quando l'utente preme il tasto x, i blocchi si disconnettono.

Inserire un blocco dal riquadro degli strumenti

  1. Premi il tasto T per aprire la casella degli strumenti
  2. Utilizza i tasti W e S per spostarti tra le categorie.
  3. Premi il tasto D per spostarti sui blocchi nel riquadro a scomparsa.
  4. Spostati tra i blocchi utilizzando i tasti W e S.
  5. Premi il tasto Invio per inserire un blocco nel riquadro a scomparsa

Quando un utente preme t si apre una casella degli strumenti che mostra diverse categorie di blocchi. Premi "S" per spostarti tra le varie categorie. Quando un utente preme d, viene evidenziato il primo blocco della categoria. Premi Invio per posizionare il blocco nello spazio di lavoro e chiudere la casella degli strumenti.

Sperimentazione

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

  1. Mappature dei tasti: a quali chiavi devono essere associate le azioni.
  2. Testo per screen reader/Logging/avvisi: in che modo uno screen reader dovrebbe leggere le posizioni dei cursori, nonché eventuali errori o avvisi.
  3. Navigazione nell'area di lavoro: la modalità di navigazione dell'utente tra blocchi, campi, input e connessioni nell'area di lavoro.
  4. Aspetto del cursore: che aspetto devono avere il cursore e l'indicatore.

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

Se ci sono altre aree su cui vorresti sperimentare le aree in cui potremmo essere utili, compila questo modulo.

Domande frequenti

D. Perché non hai usato i tasti freccia per la navigazione da tastiera?
R: Gli screen reader in genere utilizzano i tasti freccia. Per evitare interferenze con questo sistema, abbiamo scelto di utilizzare le chiavi WASD.
Tuttavia, sappiamo bene che ognuno ha esigenze diverse e pertanto ti 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 pensavamo alla navigazione da tastiera, avevamo bisogno di un modo strutturato per spostarsi tra i diversi blocchi, connessioni, campi, input e coordinate dell'area di lavoro.
Internamente lo rappresentiamo con un albero della sintassi astratto (AST). L'implementazione del cursore predefinito non si discosta molto da questo modello, che è intenzionale per consentire agli sviluppatori di comprendere meglio l'architettura sottostante. Esistono altri cursors che potrebbero essere più facili da comprendere per un utente finale.

Limitazioni

Non è ancora supportata la navigazione a componenti che non si bloccano (ad es. cestino, pulsanti di zoom e pulsanti a comparsa). Per ulteriori informazioni sulle limitazioni, consulta l'elenco di bugs aperti per la navigazione da tastiera.