Verificação HTML: Valor incorreto "" para atributo "tabindex" no elemento "X": A string vazia não é um número inteiro válido.

Sobre este problema HTML

O atributo tabindex controla se e em que ordem um elemento pode receber foco do teclado. O validador W3C reporta este erro quando encontra tabindex="" porque a especificação HTML requer que o valor do atributo seja um número inteiro válido — e uma string vazia não pode ser interpretada como tal. Isto acontece frequentemente quando um valor é acidentalmente omitido, quando um motor de template produz um valor em branco, ou quando um CMS gera o atributo sem um padrão adequado.

Por que isto é importante

A navegação por teclado é fundamental para a acessibilidade web. Leitores de ecrã e tecnologias assistivas dependem dos valores do tabindex para determinar o comportamento do foco. Um atributo tabindex vazio cria ambiguidade: os navegadores podem ignorá-lo ou tratá-lo de forma inconsistente, levando a um comportamento de foco imprevisível para utilizadores de teclado e tecnologias assistivas. Além da acessibilidade, também significa que o seu HTML é inválido de acordo com o padrão WHATWG HTML living standard, que define estritamente o tabindex como aceitando apenas um número inteiro válido.

Como funciona o `tabindex`

O atributo aceita um valor inteiro com três intervalos significativos:

Valor negativo (por exemplo, tabindex="-1"): O elemento pode ser focado programaticamente (através do .focus() do JavaScript), mas é excluído da ordem sequencial de navegação por teclado.
tabindex="0": O elemento é adicionado à ordem de navegação natural baseada na sua posição no código fonte do documento. Esta é a forma mais comum de tornar elementos não interativos (como um <div> ou <span>) focáveis por teclado.
Valor positivo (por exemplo, tabindex="1", tabindex="5"): O elemento é colocado na ordem de navegação antes de elementos com tabindex="0" ou sem tabindex, com números menores recebendo foco primeiro. O uso de valores positivos é geralmente desencorajado porque substitui a ordem natural do documento e torna a gestão de foco mais difícil de manter.

Como corrigir

Se o elemento deve ser focável na ordem de navegação, defina tabindex="0".
Se o elemento deve ser focável apenas programaticamente, defina tabindex="-1".
Se não precisa de comportamento de foco personalizado, remova completamente o atributo tabindex. Elementos interativos como <a>, <button>, e <input> já são focáveis por padrão.
Se um template ou CMS gera o atributo, certifique-se de que a lógica fornece um número inteiro válido ou omite o atributo quando não há valor disponível.

Exemplos

❌ Valor `tabindex` vazio (desencadeia o erro)

<div tabindex="">Click me</div>

<button tabindex="">Submit</button>

✅ Corrigido: número inteiro válido fornecido

<div tabindex="0">Click me</div>

<button tabindex="-1">Submit</button>

✅ Corrigido: atributo removido quando não necessário

Elementos interativos como <button> são focáveis por padrão, então o tabindex pode simplesmente ser removido:

<button>Submit</button>

✅ Corrigido: renderização condicional num template

Se está a usar um sistema de templates, certifique-se de que o atributo é apenas renderizado quando existe um valor válido:

<!-- Em vez de produzir sempre tabindex -->

<!-- Mau: <div tabindex="{{ tabindexValue }}"> -->


<!-- Produzir o atributo apenas quando um valor está definido -->

<div tabindex="0">Interactive content</div>

Uma nota sobre valores positivos de `tabindex`

Embora números inteiros positivos como tabindex="1" ou tabindex="3" sejam tecnicamente válidos, eles forçam uma ordem de navegação personalizada que diverge da ordem visual e DOM da página. Isto cria confusão para utilizadores de teclado e é difícil de manter à medida que as páginas evoluem. As WAI-ARIA Authoring Practices recomendam evitar valores positivos de tabindex. Use 0 e -1 em quase todos os casos.