tabindex o focus per la navigazione da tastiera

Question

Al momento sto facendo molto lavoro con accessibilità e WCAG ma una cosa che sto cercando di far funzionare bene per tutti gli utenti e in particolare quelli che usano la navigazione da tastiera, è un salto al collegamento del contenuto .

Sembra facile da fare, lanciare un collegamento a un'ancora nella parte superiore della pagina e le persone possono "cliccarci" per saltare la navigazione o altri contenuti in gran parte non importanti.

Il problema è, tuttavia, quando si fa clic su un collegamento di ancoraggio utilizzando la tastiera e si preme di nuovo il tasto "tab", si passa all'elemento direttamente dopo il collegamento "salta al contenuto" e non al successivo elemento nell'area di contenuto principale. Cioè, l'ancora che hai collegato non ha ricevuto attenzione.

Sembra che questo sia un problema comune, perché devo ancora trovare un sito con un collegamento "salta al contenuto" che funzioni correttamente. Anche il sito Vision Australia ha questo problema.

Speravo che qualcuno sapesse di una tecnica/hack/libreria per fare in modo che funzionasse come dovrebbe.

EDIT: Posso confermare che questo problema si verifica in Chrome e Safari, ma non in Firefox sul mio Mac.

Answer 1

La maggior parte dei browser scorre verso il basso visivamente verso la destinazione del collegamento stessa pagina, ma in realtà non mette a fuoco la tastiera su quel collegamento. È possibile utilizzare JavaScript (o JQuery, come nell'esempio qui sotto) per dare attenzione al target:

$("a[href^='#']").not("a[href]='#'").click(function() { 
    $("#"+$(this).attr("href").slice(1)+"").focus(); 
}); 

Tuttavia, c'è un bug in WebKit che impedisce anche questa soluzione di lavorare in browser WebKit come Chrome e Safari . Ho scritto un post sul blog su questo circa un anno fa, e molti altri hanno costruito su di esso:

• Terrill Thompson blog post
• More from Damon Muma
• A JavaScript-only solution by Zegnat
• WebKit Bug Report
• Chromium Bub Report