Come ignorare l'elemento HTML da tabindex?

Esiste un modo in HTML per dire al browser di non consentire l'indicizzazione delle schede su elementi particolari?

Sulla mia pagina, però, c'è un baraccone che viene visualizzato con jQuery, quando lo sfogli, ottieni molte pressioni prima che il controllo delle schede si sposta sul successivo link visibile sulla pagina poiché tutte le cose da cui vengono tratteggiate sono nascoste in l'utente visivamente.

È possibile utilizzare tabindex="-1".

La specifica HTML5 del W3C supporta tabindexvalori negativi :

Se il valore è un numero intero negativo
L'agente utente deve impostare il flag di focus tabindex dell'elemento, ma non deve consentire all'elemento di essere raggiunto utilizzando la navigazione del focus sequenziale.

Attenzione però che questa è una funzione HTML5 e potrebbe non funzionare con i vecchi browser.
Per essere conforme allo standard HTML 4.01 del W3C (dal 1999) , tabindex dovrebbe essere positivo.

Esempio di utilizzo di seguito in puro HTML.

<input />
<input tabindex="-1" placeholder="NoTabIndex" />
<input />

Non dimenticare che, sebbene tabindexsia tutto minuscolo nelle specifiche e nell'HTML, in Javascript / DOM viene chiamata la proprietà tabIndex.

Non perdere la testa cercando di capire perché la chiamata degli indici di tabulazione modificata a livello di programmazione element.tabindex = -1non funziona. Usa element.tabIndex = -1.

Se questi sono elementi naturalmente nell'ordine di tabulazione come pulsanti e ancore, rimuoverli dall'ordine di tabulazione con tabindex = -1 è una specie di odore di accessibilità. Se stanno fornendo funzionalità duplicate rimuoverli dall'ordine di tabulazione è ok, e considera l'aggiunta di aria-hidden = true a questi elementi, quindi le tecnologie assistive li ignoreranno.

Se stai lavorando in un browser che non supporta tabindex="-1", potresti essere in grado di cavartela semplicemente dando alle cose che devono essere saltate un indice di tabulazione davvero alto . Ad esempio, tabindex="500"fondamentalmente sposta l'ordine di tabulazione dell'oggetto alla fine della pagina.

L'ho fatto per un lungo modulo di inserimento dati con un pulsante lanciato al centro. Non è un pulsante che le persone fanno clic molto spesso, quindi non volevo che si accedessero accidentalmente ad esso e premessero Invio. disablednon funzionerebbe perché è un pulsante.

Un hack come "tabIndex = -1" non funziona per me con Chrome v53.

Questo è ciò che funziona per Chrome e la maggior parte dei browser:

function removeTabIndex(element) {
    element.removeAttribute('tabindex');
}

<input tabIndex="1" />
<input tabIndex="2" id="notabindex" />
<input tabIndex="3" />
<button tabIndex="4" onclick="removeTabIndex(document.getElementById('notabindex'))">Remove tabindex</button>

Il modo per farlo è aggiungendo tabindex="-1". Aggiungendo questo a un elemento specifico, diventa irraggiungibile dalla navigazione da tastiera. C'è un ottimo articolo qui che ti aiuterà a capire ulteriormente il tabindex .

Basta aggiungere l'attributo disabledall'elemento (o usare jQuery per farlo per te). Disabilitato impedisce l'ingresso o la messa a fuoco dell'ingresso.