tabindex

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

Especificação Status Comentário
HTML Living Standard
The definition of 'tabindex' in that specification.		 Padrão em tempo real Nenhuma mudança desde o mais recente snapshot, HTML 5.1
HTML 5.1
The definition of 'tabindex' in that specification.		 Recomendação Snapshot de HTML Living Standard, nenhuma mudança desde HTML5
HTML5
The definition of 'tabindex' in that specification.		 Recomendação Snapshot de HTML Living Standard. Desde HTML 4.01 Specification, o atributo agora é suportado em todos os elementos (atributos globais).
HTML 4.01 Specification
The definition of 'tabindex' in that specification.		 Recomendação Suportado apenas em <a>, <area>, <button>, <object> (en-US), <select>, e <textarea>.

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também