22

Desde que comecei a programar, observei a utilização do tabindex em alguns elementos específicos.

Eu entendo perfeitamente que tem a ver com o pressionamento da tecla tab e o foco dos elementos, mas ainda tenho algumas dúvidas em relação ao seu uso.

  • Por que alguns programadores utilizam tabindex com o valor -1? Qual é a utilidade disso?

  • E quais elementos são permitidos usar o atributo tabindex?

  • Qual é o evento acionado ao o elemento ser focado pelo uso do tab? Seria o focus, mesmo não se tratando de inputs?

2 Respostas 2

31
+50

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:

  1. Possuir a propriedade tabindex definida (ou, por padrão, ter valor 0).
  2. Estar renderizado na página.
  3. Não ser um elemento inerte.
  4. 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

2
  • Muito bom, parabéns! Commented 27/07/2019 às 0:05
  • @rbz Por isso que eu coloquei como vinculada, não como duplicada xD
    – Woss
    Commented 3/03/2020 às 19:43
2

Usando tabindex, pode-se especificar uma ordem explícita para elementos inseridos na página e que devem ser focalizáveis, inserir um elemento que, de outra forma, não seria focalizável na ordem de tabulação, e remover elementos da ordem de tabulação(fonte).

Focalizar aqui se refere a ordem em que os elementos vão ser selecionados ao se pressionar tab por exemplo. É bem útil quando se tem que gerar páginas dinâmicas. Quanto ao negativo, atente-se a regra abaixo:

tabindex="0": Insere um elemento na ordem natural de tabulação. O elemento pode ser focalizado ao se pressionar a tecla Tab, e o elemento pode ser focado chamando-se seu método de focus() tabindex="-1": Remove um elemento da ordem natural de tabulação, mas o elemento ainda pode ser focado chamando seu método focus()

Qualquer tabindex maior que 0 passa o elemento inserido para a frente na ordem natural de tabulação. Se houver vários elementos com um tabindex maior que 0, a ordem de tabulação começa partir do valor mais baixo que é maior que zero e vai subindo. Usar um tabindex maior que 0 é considerado algo fora do padrão.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .