Perché un tag `a` ha bisogno di` tabindex = 0`?

Question

Sto lavorando a un'app Web e uno degli elementi ripetuti (ancoraggio) a non ottiene il focus sulla tastiera mentre faccio scorrere la pagina. Solo se aggiungo tabindex=0 posso inserirmi nella scheda.

(Anche se il mio obiettivo è quello di rendere visibile la messa a fuoco, che sto per determinare se un elemento viene messa a fuoco usando un frammento di jQuery:

// Whenever I hit tab, show me which element has focus 
$('main').on('keydown',function(e) { 
    var keyCode = e.keyCode || e.which; 

    if (keyCode == 9) { 
    console.log("focus is now on ", $(':focus')); 
    } 
}); 

)

Questo mi confonde. Secondo the specs, "L'attributo tabindex può anche rendere qualsiasi elemento in contenuto interattivo" - ma a è uno di quelli che elencano come interattivi per impostazione predefinita.

E ancora, da un articolo accessibilità:

Un valore [tabindex] di 0 indica che l'elemento deve essere collocato nell'ordine navigazione predefinito. Questo permette elementi che sono non nativo attivabile (come <div>, <campata> e <p>) per ricevere attivo. Naturalmente si dovrebbe in genere utilizzare i collegamenti e controlli dei moduli per tutti elementi interattivi ... (http://webaim.org/techniques/keyboard/tabindex)

Che cosa potrebbe causare un elemento di ancoraggio da saltare come scheda io attraverso gli elementi interattivi di una pagina?

Answer 1

Secondo il vostro domanda:

Che cosa potrebbe causare un elemento di ancoraggio da saltare come scheda io attraverso le elementi interattivi di una pagina?

Se si aggiunge tabindex="-1", l'elemento verrà saltato.
E se il tag <a> non ha href, verrà saltato anche.

Answer 2

Se viene utilizzato un tabindex di "-1", l'elemento a cui è applicato non sarà più utilizzabile con la tastiera.

È possibile controllare il W3C specification per esso.