O que é o atributo tabindex HTML?

Para que é tabindexutilizado o atributo em HTML?

tabindexé um atributo global responsável por duas coisas:

1. define a ordem dos elementos "focalizáveis" e
2. isso faz com que elementos "focalizável" .

Na minha opinião, a segunda coisa é ainda mais importante que a primeira. Existem muito poucos elementos que podem ser focalizados por padrão (por exemplo, <a> e controles de formulário). Os desenvolvedores frequentemente adicionam alguns manipuladores de eventos JavaScript (como 'onclick') em elementos não focalizáveis ​​(<div>, <span> e assim por diante), e a maneira de fazer com que sua interface responda não apenas aos eventos do mouse, mas também aos eventos do teclado (por exemplo, 'onkeypress') é tornar esses elementos focáveis. Por fim, se você não deseja definir a ordem, basta usar seu elemento com foco tabindex="0"em todos esses elementos:

<div tabindex="0"></div>

Além disso, se você não quiser que seja focável através da tecla tab, use tabindex="-1". Por exemplo, o link abaixo não será focado ao usar as teclas de tabulação para percorrer.

<a href="#" tabindex="-1">Tab key cannot reach here!</a>

Quando o usuário pressiona o botão tab, o usuário será levado pelo formulário na ordem 1, 2 e 3, conforme indicado no exemplo abaixo.

Por exemplo:

Name: <input name="name" tabindex="1"  />
Age: <input name="age" tabindex="3"  />
Email: <input name="email" tabindex="2"  />

o tabindexé usado para definir uma sequência que os usuários seguem quando usam a tecla Tab para navegar por uma página. Por padrão, a ordem de tabulação natural corresponderá à ordem de origem na marcação.

O atributo tabindex content permite que os autores controlem se um elemento deve ser focável, se deve ser acessado usando a navegação de foco sequencial e qual deve ser a ordem relativa do elemento para fins de navegação de foco sequencial. O nome "índice da guia" vem do uso comum da tecla "guia" para navegar pelos elementos em foco. O termo "tabulação" refere-se a avançar pelos elementos focalizáveis ​​que podem ser alcançados usando a navegação de foco sequencial.
Recomendação W3C: HTML5
Seção 7.4.1 Navegação em foco seqüencial e o atributo tabindex

Os tabindexarranques a 0 ou qualquer número inteiro positivo e incrementos para cima. É comum ver o valor 0 evitado, porque nas versões mais antigas do Mozilla e IE, o índice de tabulação começava em 1, passava para 2 e somente após 2 passava para 0 e depois para 3. O valor inteiro máximo para tabindexé 32767. Se os elementos tiverem o mesmo tabindex, o tabindex corresponderá à ordem de origem na marcação. Um valor negativo removerá o elemento do índice da guia para que nunca seja focado.

Se um elemento é atribuído um tabindexde -1ele irá remover o elemento e nunca será focalizável mas o foco pode ser dada ao elemento programaticamente usando element.focus().

Se você especificar o tabindexatributo sem nenhum valor ou com um valor vazio, ele será ignorado.

Se o disabledatributo estiver definido em um elemento que possui a tabindex, o elemento será ignorado.

Se a tabindexestiver definido em qualquer lugar da página, independentemente de onde estiver em relação ao restante do código (pode estar no rodapé, na área de conteúdo e em qualquer lugar), se houver um definido tabindex, a ordem das guias começará no elemento que recebe explicitamente o tabindexvalor mais baixo acima de 0. Ele passará pelos elementos definidos e somente depois que os tabindexelementos explícitos tiverem sido tabulados, retornará ao início do documento e seguirá a ordem natural das guias.

Na especificação HTML4, apenas os seguintes elementos suportam o atributo tabindex: âncora, área, botão, entrada, objeto, selecionare área de texto. Mas a especificação HTML5, com acessibilidade em mente, permite que todos os elementos sejam atribuídos tabindex.

-

Por exemplo

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="2"></li>
  <li tabindex="3"></li>
</ul>

é o mesmo que

<ul tabindex="-1">
  <li tabindex="1"></li>
  <li tabindex="1"></li>
  <li tabindex="1"></li>
</ul>

porque, independentemente do fato de todos terem sido atribuídos tabindex="1", eles ainda seguirão a mesma ordem, o primeiro é o primeiro e o último é o último. Isso também é o mesmo ..

<div>
  <a></a>
  <a></a>
  <a></a>
</div>

porque você não precisa definir explicitamente o tabIndex se for o comportamento padrão. A divpor padrão não será focalizável, as anchortags serão.

Controlando a ordem das guias (pressionando a tabtecla para mover o foco) dentro da página.

Referência: http://www.w3.org/TR/html401/interact/forms.html#h-17.11.1

os valores que você define determinam a ordem em que o foco do teclado se moverá entre os elementos no site.

No exemplo a seguir, na primeira vez que você pressionar tab, seu cursor se moverá para #foo, depois #awesome e, em seguida, #bar

<input id="foo" tabindex="1"  />
<input id="bar" tabindex="3"  />
<input id="awesome" tabindex="2"  />

Se você não definiu índices de tabulação em nenhum lugar, o foco do teclado seguirá as tags HTML da sua página na ordem em que são definidas no documento HTML.

Se você tabular mais vezes do que especificou os índices de tabulação, o foco se moverá como se não houvesse índices de tabulação, ou seja, na ordem de aparência das tags HTML

Ele pode ser usado para alterar a sequência de navegação do foco do elemento de formulário padrão.

Então, se você tem:

text input A

text input B

submit button C

usando a tecla tab, você navega por A-> B-> C. Tabindex permite alterar esse fluxo.

Normalmente, quando o usuário guia de campo em campo em um formulário (em um navegador que permite a tabulação, nem todos os navegadores o fazem), a ordem é a ordem em que os campos aparecem no código HTML.

No entanto, às vezes você deseja que a ordem das guias flua um pouco diferente. Nesse caso, você pode numerar os campos usando TABINDEX. As guias fluem na ordem do TABINDEX mais baixo para o mais alto.

Mais informações sobre isso podem ser encontradas aqui w3

outra boa ilustração pode ser encontrada aqui

Em palavras simples, tabindexé usado para focar nos elementos. Sintaxe: tabindex="numeric_value" este numeric_valueé o peso do elemento. O valor mais baixo será acessado primeiro.

O atributo tabindex HTML é responsável por indicar se um elemento é acessível pela navegação do teclado . Quando o usuário pressiona a tecla Tab, o foco é deslocado de um elemento para outro. Usando o atributo tabindex, o fluxo da ordem de tabulação é alterado.

A navegação pelos controles geralmente ocorre sequencialmente à medida que aparecem no código HTML.

Usando tabindex, a tabulação fluirá do controle com o tabindex mais baixo para o controle com o tabindex mais alto na ordem sequencial tabindex