A propriedade tabindex
define como um elemento deve se comportar quando feita a navegação através do teclado, servindo, principalmente, para a construção de acessibilidade de uma aplicação, visto que muitas pessoas com algum tipo de restrição utilizam o teclado - ou qualquer outro meio que simule o teclado - como forma de navegação. Resumidamente, a propriedade define quais elementos podem receber foco através da navegação pelo teclado e a ordem que isto ocorre.
O valor da propriedade deve ser um valor inteiro, quando definido.
- Pode ser um valor negativo, retirando o elemento da lista de ordenação de elementos focáveis. Isto é, não será possível acessá-lo através da tecla tab.
- Pode ser zero, indicando que o elemento pode ser focalizado e que a ordem deve seguir a ordem definida pelo DOM. Ou seja, elementos que são definidos anteriormente no DOM são focalizados primeiro.
- Pode ser um valor positivo, indicando que o elemento deve ser focalizado e a ordem será definida pelo seu respectivo valor de forma crescente. Se múltiplos elementos possuírem o mesmo valor, a precedência é definida pela ordem no DOM.
Alguns elementos já possuem um comportamento pré-definido, tais como a
, com a propriedade href
definida, link
, com a propriedade href
definida, button
, input
, cujo type
seja diferente de hidden
, select
, textarea
e possivelmente outros. Estes possuem a propriedade tabindex
igual a zero e, portanto, estão na lista de elementos focalizáveis seguindo a ordem definida pelo DOM. Qualquer outro elemento diferente destes possui, por padrão, tabindex
igual a -1 e, assim, não são elementos focalizáveis.
Para que um elemento seja considerado focalizável deve satisfazer todas as condições:
- Possuir a propriedade
tabindex
definida (ou, por padrão, ter valor 0).
- Estar renderizado na página.
- Não ser um elemento inerte.
- Não estar desabilitado (propriedade
disabled
).
Qualquer elemento considerado focalizável, ao receber o foco, dispara o evento focus
e, ao perder o foco, o evento blur
.
div:focus { background: red; }
<div tabindex='0'>Sou uma div focalizável</div>
Você pode definir qualquer elemento da página como focalizável, como no exemplo acima e até mesmo estilizá-lo com CSS através do seletor :focus
, mas sempre considere a usuabilidade e acessibilidade de sua aplicação. Uma pergunta deve ser feita e respondida antes de definir a propriedade tabindex
: este elemento faz parte da navegação da minha aplicação e deve estar na lista de elementos focalizáveis?
Às perguntas, então:
Por que alguns programadores utilizam tabindex
com o valor -1? Qual é a utilidade disso?
Para remover aquele elemento da lista de elementos focalizáveis através da navegação pelo teclado. Quanto a utilidade (e necessidade), dependerá da aplicação.
E quais elementos são permitidos usar o atributo tabindex
?
Basicamente qualquer elemento pode ter a propriedade tabindex
definida, visto que é uma propriedade global do HTML, porém, não são todos que possuem a necessidade da mesma. Uma div
utilizada para a definição do grid da aplicação, por exemplo, não precisa ser acessada através da navegação pelo teclado. Já links e campos de um formulário sim.
Qual é o evento acionado ao o elemento ser focado pelo uso do tab? Seria o focus
, mesmo não se tratando de inputs?
Sim, é o evento focus
, como visto no exemplo anterior. Pode ler mais sobre aqui, no item 7.4.2, especialmente onde diz focusing steps e unfocusing steps.
Dito isso, pode parecer que a propriedade quase nunca será realmente necessária, visto que os elementos que deveriam (realmente) ser focalizáveis já o são por padrão. Porém, uma utilização bem comum que justifica a existência e uso da propriedade tabindex
são os menus de navegação que são ocultáveis na página. Por exemplo, se tiver um menu que fique posicionado fora da área visível da página, porém ainda renderizado (ou seja, com a propriedade display
diferente de none
), os links do mesmo estarão na lista de elementos focalizáveis e isso gera um comportamento estranho na aplicação, pois espera-se que ao navegar pelo teclado, a mesma seja feita apenas em elementos visíveis. Então os links deste menu deveriam possuir a propriedade tabindex
igual a -1 enquanto fora da área visível e igual a 0 quando dentro da mesma.
O exemplo supracitado pode ser visto em ação neste vídeo sobre acessibilidade. O mesmo faz ligação com a propriedade inert
, que será discutida nesta pergunta.
Leitura adicional: W3C User interaction