10.12.2024

Excluindo Elementos da Ordem de Navegação HTML: Uma Solução

Resposta Rápida

Se você deseja excluir um elemento da navegação por teclado usando a tecla Tab, basta adicionar o atributo tabindex="-1":

<div tabindex="-1">Este elemento será ignorado ao usar a tecla Tab!</div>

Essa abordagem funciona efetivamente na maioria dos casos, e o elemento não será mais incluído na navegação por Tab.

E a Acessibilidade?

Usar tabindex="-1" remove o elemento do foco ao navegar com o teclado, o que pode ter implicações negativas para a acessibilidade. Seu objetivo principal é garantir o acesso igual a todos os elementos para os usuários, incluindo aqueles que navegam usando o teclado. Portanto, é essencial verificar se a exclusão de elementos da sequência de navegação não degrada a acessibilidade.

JavaScript a Serviço

Para alterar dinamicamente o valor de tabindex, utilize JavaScript:

document.querySelector('#seuElemento').tabIndex = -1; // JavaScript em ação!

Nota: Em JavaScript, a propriedade é chamada tabIndex, e a capitalização é importante.

Confronto: HTML 4.01 vs. HTML5

HTML 4.01 apenas permite valores positivos para tabindex. Em contraste, o HTML5 amplia o escopo, permitindo tabindex="-1". No entanto, tenha em mente que versões mais antigas de navegadores podem nem sempre suportar os novos padrões do HTML5.

Desabilitado ou tabindex?

Para tornar elementos de formulário indisponíveis, use o atributo disabled:

<button disabled>Este botão não está disponível hoje.</button>

O atributo disabled exclui o elemento da sequência de Tab e o torna inativo.

Suporte do ARIA

O atributo ARIA aria-hidden="true" permite que você oculte conteúdos de tecnologias assistivas, como leitores de tela:

<div aria-hidden="true">Este elemento será invisível para tecnologias assistivas</div>

Automação com jQuery

Para adicionar automaticamente o atributo disabled, você pode usar jQuery:

$('seletor').prop('disabled', true);

Visualização

Imagine alternar entre elementos com a tecla Tab como um semáforo:

🟢 Luz Verde: Navegação por Tab é permitida!  
🟡 Luz Amarela: Cuidado, você está quase lá.  
🔴 Luz Vermelha: Você não pode trocar aqui usando Tab. Continue em frente.

<button tabindex="0">Avançar 🟢</button>
<div tabindex="-1">Elemento é ignorado 🔴</div>
<button>Parar 🟢</button>

Elementos com tabindex="-1" serão pulados, como se você tivesse visto um sinal vermelho em um semáforo.

Compreensão Completa

Quando Usar Um tabindex Negativo?

Usar tabindex="-1" é apropriado quando você deseja:

• Chamar a atenção para conteúdo não interativo
• Ignorar elementos duplicados durante a navegação
• Destacar elementos dentro de janelas modais ou pop-ups
• Ignorar elementos não funcionais

Atualizações de Conteúdo Dinâmico

Ao trabalhar com conteúdo que muda dinamicamente:

• Adicione programaticamente tabindex="-1" quando apropriado
• Se uma ordem de navegação por Tab precisa ser precisa, remova o atributo especificado
• Use manipuladores de eventos em JavaScript para controlar o foco em situações específicas

Compatibilidade Entre Navegadores

Para garantir compatibilidade entre diferentes navegadores, considere:

• Testar em vários navegadores
• Investigar como as tecnologias assistivas interagem com o atributo tabindex
• Verificar regularmente a validade do seu código HTML

Coisas para Ficar Atento

Evite armadilhas comuns:

• O uso excessivo de tabindex pode complicar a navegação para os usuários
• Usar valores negativos diferentes de "-1" não é aceitável
• Alterar a ordem de navegação por Tab pode confundir usuários de leitores de tela

Materiais Úteis

1. tabindex - HTML: HyperText Markup Language | MDN — Guia sobre tabindex.
2. Padrão HTML — Padrão oficial de HTML para tabindex.
3. WebAIM: Acessibilidade em Foco - Tabindex — Perspectivas sobre acessibilidade e navegação por teclado.
4. ARIA | WAI | W3C — Recomendações para gerenciar o foco em aplicações web.
5. Não Use Funções ARIA de Menu para Navegação do Site — Adrian Roselli — Análise do ARIA na navegação do site.
6. Deque University | Deque Systems — Práticas para melhorar a acessibilidade e navegabilidade pelo teclado.
7. Navegando Apenas com o Teclado para Melhorar a Acessibilidade — Estratégias para aprimorar a navegação por teclado.

Video

Navigation