La funzionalità "Punto di partenza della navigazione con attivazione sequenziale dello stato attivo" definisce dove iniziamo a cercare elementi attivabili per la navigazione con attivazione sequenziale dello stato attivo ([Tab] o [Maiusc-Tab]) quando non è presente un'area attiva. È particolarmente utile per le funzionalità di accessibilità come i "link di avanzamento " e la gestione dell'attenzione nel documento.
HTML offre un'ampia gamma di supporto integrato per gestire le interazioni con la tastiera, il che significa che è abbastanza facile scrivere pagine che possono essere utilizzate tramite la tastiera, che si tratti di un'incapacità motoria che ci impedisce di utilizzare un mouse o che siamo semplicemente così efficienti da togliere le mani dalla tastiera e sprecare millisecondi preziosi.
La gestione della tastiera ruota attorno allo stato attivo, che determina dove verranno inseriti gli eventi della tastiera nella pagina. Fino a questo momento, in alcune situazioni abbiamo dovuto fare un po' di lavoro extra per far funzionare tutto correttamente per gli utenti che utilizzano la tastiera. Il metodo focus() ci consente di gestire lo stato attivo scegliendo in modo selettivo un elemento su cui attivarlo in risposta a un'azione dell'utente. Tuttavia, questa best practice presenta molti problemi e richiede alcune modifiche complicate di JavaScript per fornire un'esperienza di riferimento.
Anche se questa tecnica non scomparirà del tutto a breve, in Chrome 50 sarà necessaria in meno casi grazie al punto di partenza della navigazione con il fuoco sequenziale. Con questa modifica, le pagine ben redatte diventeranno automaticamente più accessibili senza che sia necessaria una gestione manuale aggiuntiva dell'attenzione. Vediamo un esempio.
Link all'interno di una pagina
I siti con molto testo spesso contengono link all'interno della stessa pagina per aiutare gli utenti a passare rapidamente alle sezioni importanti.
<!-- Table of Contents -->
<a href="#recipes">Recipes</a>
<a href="#ingredients">Ingredients</a>
<!-- Recipes Section -->
<h2 id="recipes">Recipes</h1>
<h3>Vegemite Cheesecake</h3>
<p>
Vegemite cheesecake is delicious. We promise.
<a href="cheesecake.html">Read More</a>
</p>
Se fossi un utente di tastiera (e un buongustaio di cibi australiani), la mia prossima serie di azioni sarebbe più o meno la seguente:
- Premi
Tabdue volte per mettere a fuoco il link Ricette - Premi
Enterper passare alla sezione Ricette - Premi di nuovo
Tabper mettere in primo piano il link Scopri di più
Vediamo come funziona utilizzando Chrome 49.
Oh. Non è andata proprio come previsto, vero?
Invece di mettere in primo piano il link Scopri di più, la pressione del tasto Tab per l'ultima volta ha spostato lo stato attivo sull'elemento successivo dell'indice. Questo accade perché lo sviluppatore non ha impostato tabindex="-1" nell'intestazione per renderla attivabile. Pertanto, il clic sull'ancora denominata #recipes non ha spostato lo stato attivo. Si tratta di un errore sottile e non è un problema se utilizzi il mouse. Tuttavia, è un problema potenzialmente molto grave se utilizzi una tastiera o un dispositivo di commutazione. Considera la quantità di link interni in una pagina di Wikipedia standard. Sarebbe frustrante dover passare continuamente da un'ancora all'altra.
Ora esaminiamo la stessa esperienza utilizzando Chrome 50.
Wow, è esattamente quello che volevamo e, soprattutto, non abbiamo dovuto modificare il nostro codice. Il browser ha appena capito dove deve essere applicato lo stato attivo in base alla posizione nel documento.
Come funziona?
Prima dell'implementazione del punto di partenza dell'attenzione, l'attenzione si spostava sempre dall'elemento selezionato precedente o dalla parte superiore della pagina. Ciò significa che la scelta dell'elemento su cui verrà impostato lo stato attivo successivo può comportare il trasferimento dello stato attivo a un elemento che non dovrebbe essere attivabile, ad esempio un elemento contenitore o un'intestazione. Ciò causa ogni sorta di anomalie, inclusa la visualizzazione di un anello di attivazione se fai clic per caso su un elemento di questo tipo.
Il punto di inizio dell'attenzione, come suggerisce il nome, fornisce un meccanismo per suggerire dove iniziare a cercare l'elemento successivo che può essere selezionato quando si preme Tab o Shift-Tab.
Può essere impostato in diversi modi:
Se un elemento ha il fuoco, è anche il punto di partenza della navigazione con il fuoco, come prima.
Inoltre, come in precedenza, se non è stato impostato un altro punto di partenza per la navigazione con il controllo attivo, verrà utilizzato il document corrente o, se disponibile e supportato, il dialog attualmente attivo.
Se andiamo a un frammento di pagina come nell'esempio precedente, verrà impostato il punto di inizio dell'attenzione.
Inoltre, se facciamo clic su un elemento qualsiasi della pagina, indipendentemente dal fatto che sia possibile da mettere a fuoco, verrà impostato il punto di partenza della navigazione con il fuoco.
Infine, se l'elemento che era il punto di inizio dell'attenzione viene rimosso dal DOM, il relativo elemento principale diventa il punto di inizio dell'attenzione. Non dovrai più cercare di mantenere l'attenzione.
Altri casi d'uso
Oltre all'esempio riportato sopra, esistono molti altri scenari in cui questa funzionalità può essere utile.
Nascondere gli elementi
A volte un utente potrebbe concentrarsi su un elemento che deve essere impostato su visibility: hidden o display: none. Un esempio sono gli elementi cliccabili all'interno di un carosello. Nelle versioni precedenti di Chrome, nascondere l'elemento attualmente attivo in questo modo reimpostava lo stato attivo sul punto di partenza predefinito, trasformando il carosello sopra citato in una brutta trappola per gli utenti con disabilità motorie. Con il punto di partenza dell'attenzione sequenziale, non è più così. Se un elemento è nascosto con uno dei metodi precedenti, premendo il tasto Tab si passa semplicemente all'elemento attivo successivo.
Ignora link
Gli skip link sono ancore invisibili che possono essere raggiunti solo tramite la tastiera. Consentono agli utenti di "saltare" gli elementi di navigazione per passare direttamente ai contenuti di una pagina e possono essere estremamente utili per gli utenti di tastiere e dispositivi con selettore. Come spiegato sul sito WebAIM
Molti siti web popolari implementano i link di passaggio, anche se potresti non averli mai notati.
Poiché i link di scorrimento sono ancore con nome, funzionano nello stesso modo dell'esempio di sommario originale.
Limitazioni e assistenza
Il punto di partenza della navigazione con il focus sequenziale è attualmente supportato solo in Chrome 50, Firefox e Opera. Finché non sarà supportato in tutti i browser, dovrai comunque aggiungere tabindex="-1" (e rimuovere il riquadro di messa a fuoco) ai target di ancoraggio denominati.
Demo
Il punto di partenza della navigazione con lo stato attivo sequenziale è un'ottima aggiunta al set di primitive di accessibilità del browser. È facile da comprendere e ci consente di rimuovere codice dalla nostra applicazione, migliorando al contempo l'esperienza per i nostri utenti. Doppia vittoria. Dai un'occhiata alla demo per esplorare questa funzionalità in modo più approfondito.