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étodo 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.

    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
# attr-tabindex

Compatibilidade com navegadores

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
tabindex

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Veja também