tabindex

O atributo global tabindex indica se um elemento pode receber foco de entrada (se ele é focável), se e em qual posição ele deve fazer parte da navegação sequencial do teclado (geralmente com a tecla Tab, daí seu nome).

Experimente

<p>Click anywhere in this pane, then try tabbing through the elements.</p>
<label>First in tab order:<input type="text" /></label>
<div tabindex="0">Tabbable due to tabindex.</div>
<div>Not tabbable: no tabindex.</div>
<label>Third in tab order:<input type="text" /></label>

p {
 font-style: italic;
 font-weight: bold;
}
div,
label {
 display: block;
 letter-spacing: 0.5px;
 margin-bottom: 1rem;
}
div:focus {
 font-weight: bold;
}

Ele aceita valores inteiros, com diferentes resultados dependendo do valor desse inteiro:

• um valor negativo (geralmente tabindex="-1") significa que o elemento não deve ser localizado pela navegação sequencial do teclado, mas pode ser focável visualmente ou com JavaScript. Isso é mais útil para criar widgets accessíveis com JavaScript.

  Nota: Um valor negativo é útil quando você tem conteúdo fora da tela que aparece com um evento específico. O usuário não poder focar em nenhum elemento com um tabindex negativo utilizando o teclado, porém um script pode o fazer utilizando o método focus().

• tabindex="0" significa que o elemento deve ser focável e que pode ser localizado pela navegação sequencial do teclado, mas a sua posição será definida pela ordem no código-fonte do documento;

• um valor positivo significa que o elemento deve ser focável e que pode ser localizado pela navegação sequencial do teclado, e a sua posição definida pelo valor do número. Sendo assim, tabindex="4" seria focado antes de tabindex="5", mas depois de tabindex="3". Se vários elementos possuírem o mesmo valor positivo de tabindex, a sua posição na ordenação será definida pela sua posição no código-fonte do documento. O valor máximo do tabindex é 32767. Se não especificado, assume o valor padrão 0.

  Aviso: Evite usar valores do tabindex maiores que 0. Ao fazer isso dificulta para pessoas que dependem de tecnologias assistivas para navegar e operar o conteúdo da página. Ao invés disso, escreva o documento com os elementos em uma sequência lógica.

Se o atributo tabindex for definido em um elemento div <div>, seu conteúdo filho (interno) não poderá ser rolado utilizando as teclas direcionais a menos que seja definido tabindex no conteúdo também. Veja este fiddle para entender melhor os efeitos de rolagem do tabindex.

Especificações

Compatibilidade com navegadores

Veja também

• Todos os atributos globais.
• HTMLElement.tabIndex que reflete este atributo.
• Problemas de acessibilidade com tabindex: veja Don't Use Tabindex Greater than 0 | Adrian Roselli (em inglês).