tabindex 0, -1 e nunca positivo

O atributo tabindex decide se um elemento pode receber focus pelo teclado e como ele se encaixa na ordem de Tab. Ele é o seu controle de ajuste da capacidade de receber focus.

Links, botões e inputs podem receber focus por padrão, portanto raramente é necessário alterar tabindex neles. Use-o somente quando o elemento nativo não puder cumprir a função.

Definir tabindex="0" coloca um elemento normalmente incapaz de receber focus na ordem natural de Tab, exatamente onde ele está no DOM.

Use tabindex="0" em um componente personalizado criado a partir de uma div ou span que precise ser acessível pelo teclado, como um alternador controlado por script.

Com tabindex="-1", um elemento é ignorado pela tecla Tab, mas ainda pode receber focus a partir de JavaScript usando element.focus().

Você usa tabindex="-1" para mover o focus para uma região depois de uma ação, como um painel de resultados, sem adicioná-la a cada pressionamento de Tab. 🎯

Um tabindex positivo, como 3, coloca o elemento à frente de todos os demais, desorganizando a ordem e prendendo você em um labirinto. Evite-o.

Qualquer elemento com um valor positivo é visitado antes de todos os elementos com tabindex="0" e dos elementos padrão. Assim, a ordem do focus deixa de corresponder à ordem visual.

A ordem de Tab mais organizada vem da própria ordem do DOM. Organize sua marcação de forma lógica, e a maioria dos problemas de focus desaparecerá por conta própria.

Adicionar tabindex="0" a texto simples ou a contêineres inteiros cria ruído, obrigando os usuários do teclado a passar por paradas que não fazem nada.

Use 0 para adicionar um controle personalizado à ordem, -1 para permitir focus somente por script e nunca use um número positivo. Isso abrange quase todos os casos.

Agora você domina o controle tabindex: 0 adiciona controles personalizados à ordem, -1 permite focus controlado por script, e valores positivos estão proibidos. 👍