tabindex
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.
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
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étodofocus()
. -
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 detabindex="5"
, mas depois detabindex="3"
. Se vários elementos possuírem o mesmo valor positivo detabindex
, a sua posição na ordenação será definida pela sua posição no código-fonte do documento. O valor máximo dotabindex
é 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
Specification |
---|
HTML Standard # attr-tabindex |
Compatibilidade com navegadores
BCD tables only load in the browser
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).