La funzionalità "punto di partenza della navigazione con stato attivo sequenziale" definisce il punto in cui iniziamo la ricerca degli elementi attivabili per la navigazione dello stato attivo sequenziale ([Tab] o [Maiusc-Tab]) quando non è presente un'area attiva. È particolarmente utile per funzioni di accessibilità come "salta link" e gestione dello stato attivo nel documento.
L'HTML ci offre un supporto integrato per gestire le interazioni da tastiera, il che significa che è abbastanza facile scrivere pagine che possono essere utilizzate dalla tastiera, sia che una disabilità motoria ci impedisca di usare il mouse o che togliamo le mani dalla tastiera spreca mille millisecondi preziosi.
La gestione della tastiera ruota intorno al focus, che determina dove verranno inseriti gli eventi da tastiera nella pagina. Finora ci sono state alcune situazioni in cui abbiamo dovuto lavorare in più per fare in modo che le cose funzionassero bene per gli utenti che usano la tastiera. Il metodo focus() ci consente di gestire lo stato attivo scegliendo selettivamente un elemento su cui concentrarci in risposta a un'azione dell'utente. Tuttavia, questa best practice presenta molti errori e richiede un hackery JavaScript complicato per fornire un'esperienza di base.
Questa tecnica non verrà eliminata del tutto a breve, ma in Chrome 50 sarà necessaria in meno casi grazie al punto di partenza della navigazione sequenziale. Grazie a questa modifica, le pagine ben realizzate diventeranno automaticamente più accessibili senza bisogno di una gestione aggiuntiva del focus manuale. Vediamo un esempio.
Link all'interno di una pagina
I siti che contengono molte informazioni spesso si intercollegano 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 con la tastiera (e vorticoso di cibo australiano), la mia prossima serie di azioni sarebbe più o meno così:
- Premi due volte
Tabper impostare lo stato attivo sul link Ricette - Premi
Enterper passare alla sezione Ricette - Premi di nuovo
Tabper impostare lo stato attivo sul link Leggi tutto
Vediamolo in azione usando Chrome 49.
Oh. Beh, le cose non sono andate secondo i piani, giusto?
Invece di impostare lo stato attivo sul link Ulteriori informazioni, premendo Tab per l'ultima volta è stato impostato lo stato attivo sull'elemento successivo nel sommario. Questo perché lo sviluppatore non ha impostato tabindex="-1" nell'intestazione per renderlo attivabile. Quindi, facendo clic sull'ancoraggio denominato #recipes non è stato spostato lo stato attivo. Si tratta di un piccolo errore e non è un grosso problema se utilizzi il mouse. Tuttavia, è potenzialmente molto importante se utilizzi una tastiera o un dispositivo diverso. Considera la quantità di interlink in una tipica pagina di Wikipedia? Sarebbe frustrante dover scorrere continuamente avanti e indietro tra tutti questi ancoraggi.
Diamo un'occhiata alla stessa esperienza ora con Chrome 50.
È esattamente quello che volevamo e soprattutto non abbiamo dovuto cambiare il nostro codice. Il browser ha appena capito dove impostare lo stato attivo in base alla posizione nel documento in cui ci trovavamo.
Come funziona?
Prima dell'implementazione del punto di partenza dello stato attivo, lo stato attivo si spostava sempre dall'elemento attivo precedente o dalla parte superiore della pagina. Ciò significa che scegliere gli elementi su cui concentrarsi successivamente può comportare lo spostamento su un elemento che non dovrebbe essere realmente attivabile, come un elemento contenitore o un'intestazione. Questo causa ogni tipo di stranezza, ad esempio mostrare un anello di messa a fuoco se ti capita di fare clic artificiosamente su un elemento di questo tipo.
Il punto iniziale di messa a fuoco, come suggerisce il nome, fornisce un meccanismo per suggerire da dove iniziare a cercare il successivo elemento attivabile quando premiamo Tab o Shift-Tab.
Può essere impostato in vari modi:
Se un elemento è attivo, è anche il punto di partenza della navigazione, come in precedenza.
Inoltre, come in precedenza, se non è stato ancora impostato il punto di partenza della navigazione con stato attivo, sarà l'attuale document o, se disponibile e supportato, l'dialog attualmente attivo.
Se passiamo a un frammento di pagina come nell'esempio precedente, questo ora imposterà il punto iniziale di messa a fuoco.
Inoltre, se facciamo clic su qualsiasi elemento della pagina, indipendentemente dal fatto che sia attivabile, verrà impostato il punto di partenza della navigazione con l'elemento attivo.
Infine, se l'elemento che era il punto iniziale di messa a fuoco viene rimosso dal DOM, l'elemento principale diventa il punto iniziale. Non dovrai più concentrarti colpire una talpa!
Altri casi d'uso
A parte l'esempio sopra, ci sono molti altri scenari in cui questa funzione può tornare utile.
Nascondere gli elementi
In alcuni casi, l'utente potrebbe essere concentrato su un elemento che deve essere impostato su visibility: hidden o display: none. Un esempio di ciò sono gli elementi cliccabili all'interno di un carosello. Nelle versioni precedenti di Chrome, nascondere l'elemento attualmente attivo in questo modo avrebbe ripristinato lo stato attivo sul punto di partenza predefinito, trasformando il carosello sopra indicato in una brutta trappola per gli utenti con disabilità motorie. Con il punto iniziale di messa a fuoco sequenziale, questo non avviene più. Se un elemento viene nascosto con uno dei metodi precedenti, premi il tasto Tab per passare semplicemente all'elemento attivabile successivo.
Ignora link
Gli skip link sono ancoraggi invisibili e possono essere raggiunti solo tramite 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 che usano una tastiera o un dispositivo diverso. Come spiegato sul sito WebAIM
Molti siti web popolari implementano gli skip link, anche se potresti non averli mai notato.
Poiché gli skip link sono denominati ancoraggi, funzionano nello stesso modo dell'esempio del sommario originale.
Avvertenze e assistenza
Il punto di partenza della navigazione con focus sequenziale è attualmente supportato solo in Chrome 50, Firefox e Opera. Finché non sarà supportata in tutti i browser, dovrai comunque aggiungere tabindex="-1" (e rimuovere il contorno attivo) ai target di ancoraggio con nome.
Demo
Il punto di partenza della navigazione con focus sequenziale è un'ottima aggiunta all'insieme di primitive di accessibilità del browser. È facile grok e ci consente di rimuovere il 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.