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.

    Note: 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étodo (en-US) focus().

  • 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 de tabindex="5", mas depois de tabindex="3". Se vários elementos possuírem o mesmo valor positivo de tabindex, a sua posição na ordenação será definida pela sua posição no código-fonte do documento. O valor máximo do tabindex é 32767. Se não especificado, assume o valor padrão 0.

    Warning: 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