Focus em elementos com tabindex

Com o atributo HTML chamado tabindex você pode ordenar os elementos que receberão o focus quando a tecla TAB do teclado é pressionada.

Mas o que é focus? Focus é quando um elemento recebe o foco, uma atenção maior por assim dizer, quando você clica em um campo de texto ele recebe o focus, poucos elementos recebem o focus por padrão, os mais utilizados são os inputs e links.

As pessoas que tem algum tipo de dificuldade, não apenas pessoas cegas ou com baixa visão, mas também pessoas com dificuldade motoras utilizam bastante o TAB do teclado para navegar pela página.

Por padrão o TAB segue a ordem que é escrito os elementos na página, mas você pode alterar essa ordem utilizando o tabindex, como no exemplo a seguir...

<a href="#" tabindex="2">Link 01</a>
<a href="#" tabindex="3">Link 02</a>
<form action="#" name="form1" method="post">
	<input type="text" name="nome" tabindex="1">
</form>

Isso fará com que o primeiro elemento da página a ser acessado pelo TAB será o input dentro desse formulário, após ele será o primeiro link e logo após e segundo link, e após isso seguira o fluxo normal da página retornado para o primeiro elemento escrito que recebe focus.

Mas você também pode dar focus em qualquer elemento da página como H1, P, DIV, etc...

Caso você sete um elemento com o tabindex="01" por exemplo, esse elemento será focado antes de qualquer um da página, mas se caso você queira que os elementos recebão focus pela ordem em que foram escritos basta utilizar o tabindex com o valor zero. Por exemplo...

<a href="#" tabindex="0">Link 01</a>
<h1 tabindex="0">Título principal</h1>
<h2 tabindex="0">Sub título</h2>
<p tabindex="0">Parágrafo</p>

Isso fará com que o primeiro elemento que vai receber focus será o link, após isso o H1, H2 e por último o P.