Introduzione alla messa a fuoco

Panoramica dello stato attivo dello schermo nell'accessibilità

Dave Gash
Dave Gash
Meggin Kearney
Meggin Kearney

In questa lezione parleremo dell'obiettivo e di come puoi gestirlo nella tua applicazione. Lo stato attivo si riferisce al controllo sullo schermo (un elemento di input come un campo, una casella di controllo, un pulsante o un link) che riceve l'input dalla tastiera e dagli appunti quando incolli i contenuti.

Questo è un ottimo punto di partenza per conoscere l'accessibilità perché tutti sappiamo come usare una tastiera, è facile da capire e testare e apporta vantaggi praticamente a tutti gli utenti.

Gli utenti con disabilità motorie, che potrebbero essere una paralisi permanente o una distorsione del polso, possono affidarsi a una tastiera o a un sensore per navigare nella pagina, pertanto una buona strategia di concentrazione è fondamentale per offrire loro un'esperienza positiva.

Gli utenti esperti, che conoscono tutte le scorciatoie da tastiera sul computer, la possibilità di navigare rapidamente nel sito con la sola tastiera li renderà sicuramente più produttivi.

Una strategia di concentrazione ben implementata garantisce quindi un'esperienza migliore a tutti gli utenti della tua applicazione. Nelle prossime lezioni vedremo che l'impegno che dedichi a concentrarti è una base importante per supportare gli utenti delle tecnologie per la disabilità e, infatti, tutti gli utenti.

Cos'è l'obiettivo?

Lo stato attivo determina dove vengono inseriti gli eventi da tastiera nella pagina in un dato momento. Ad esempio, se imposti lo stato attivo su un campo di immissione di testo e inizi a digitare, il campo riceve gli eventi della tastiera e mostra i caratteri digitati. Quando è attivo, riceverà anche gli input incollati dagli appunti.

Stato attivo della tastiera in un campo di testo.

L'elemento attualmente attivo è spesso indicato da un anello di messa a fuoco, il cui stile dipende dal browser e dallo stile applicato dall'autore della pagina. Chrome, ad esempio, evidenzia gli elementi attivi con un bordo blu, mentre Firefox utilizza un bordo tratteggiato.

Pulsante di registrazione.

Alcuni utenti utilizzano il computer quasi interamente con la tastiera o un altro dispositivo di input. Per questi utenti l'attenzione è cruciale, in quanto è il mezzo principale per raggiungere qualsiasi elemento presente sullo schermo. Per questo motivo, nella sezione 2.1.1 l'elenco di controllo di Web AIM indica che le funzionalità di tutte le pagine dovrebbero essere disponibili usando la tastiera, a meno che non si tratti di qualcosa che non puoi fare con una tastiera, ad esempio un disegno a mano libera.

Come utente, puoi controllare quale elemento è attualmente attivo utilizzando Tab, Shift+Tab o i tasti freccia. Su Mac OSX questa procedura funziona in modo leggermente diverso: sebbene Chrome ti consenta sempre di navigare con Tab, devi premere Option+Tab per cambiare lo stato attivo in altri browser come Safari. Puoi modificare questa impostazione nella sezione Tastiera delle Preferenze di Sistema.

Finestra di dialogo delle preferenze della tastiera.

L'ordine in cui lo stato attivo procede avanti e indietro attraverso gli elementi interattivi tramite Tab è chiamato, non sorprende, l'ordine delle schede. Disegnare la pagina con un ordine logico delle schede è un passaggio importante che tratteremo più avanti.

Che cos'è attivabile?

Gli elementi HTML interattivi integrati come campi di testo, pulsanti ed elenchi di selezione sono implicitamente attivabili, ovvero vengono inseriti automaticamente nell'ordine delle schede e dispongono di gestione degli eventi della tastiera integrata senza l'intervento dello sviluppatore.

Campi attivabili implicitamente.

Tuttavia, non tutti gli elementi sono attivabili: i paragrafi, i div e gli altri elementi della pagina non vengono attivati quando scorri la pagina, ed è per impostazione predefinita. In genere non è necessario concentrare l'attenzione su qualcosa se l'utente non può interagire con quest'ultimo.

Non tutti gli elementi sono attivabili,

Stai per raggiungere lo stato attivo

Proviamo alcune delle tecniche di concentrazione che abbiamo appena illustrato. In Chrome, accedi a questa pagina di simulazione del sito della compagnia aerea e cerca un biglietto specifico utilizzando soltanto la tastiera. La pagina non accetta input del mouse, quindi non puoi persuadere l'esercizio (non perché Google non ti fidi).

Simulazione del sito della compagnia aerea.

I parametri del ticket che devi specificare sono:

  • solo andata
  • a Melbourne
  • partenza il 12 ottobre 2017 (10/12/2017)
  • ritorna il 23 ottobre 2017 (23/10/2017)
  • sedile vicino al finestrino
  • non vogliono ricevere offerte promozionali

Una volta compilato correttamente il modulo senza errori di input e attivato il pulsante Cerca, il modulo verrà semplicemente cancellato e reimpostato. Procedi e compila il modulo, quindi torna indietro.

Esaminiamo in che modo il modulo utilizza l'input da tastiera. A partire dalle prime pressioni di Tab, il browser evidenzia le voci di navigazione relative a Voli, Hotel e Auto a noleggio. Man mano che premi Tab, procedi al gruppo di pulsanti di opzione in cui puoi scegliere tra andata e ritorno, sola andata o più città utilizzando i tasti freccia.

Continua con i campi del nome e dell'indirizzo e compila le informazioni richieste. Quando arrivi all'elemento di selezione della destinazione, puoi utilizzare i tasti freccia per scegliere una città oppure iniziare a digitare per completare automaticamente il campo. Analogamente, nei campi relativi alle date, puoi utilizzare i tasti freccia o semplicemente digitare una data.

La selezione di un tipo di posto si basa anche sui tasti freccia. In alternativa, puoi digitare "w", "a" o "n" per passare a un'opzione di posto. Dopodiché puoi disattivare le offerte promozionali predefinite premendo la barra spaziatrice e la casella di controllo. Infine, imposta lo stato attivo sul pulsante Cerca e premi Enter per inviare il modulo.

È molto utile interagire con un modulo usando soltanto la tastiera e non dover passare e tornare al mouse per completare un'attività. Poiché tutti gli elementi utilizzati nel modulo sono tag HTML nativi con stato implicito, il modulo funziona bene con la tastiera e non è necessario scrivere alcun codice per aggiungere o gestire il comportamento di impostazione dello stato attivo.