Frames com conteúdo focalizável não devem ter tabindex=-1

Quando uma <frame> ou <iframe> tem tabindex="-1", o navegador remove-a da ordem sequencial de navegação por teclado. Isto significa que quaisquer elementos focalizáveis dentro da frame — como ligações, botões, controlos de formulário, ou outros elementos interativos — ficam completamente inacessíveis via teclado. Se a frame também tiver conteúdo deslocável, os utilizadores de teclado não conseguem deslocá-lo, uma vez que o foco nunca pode entrar na frame para começar.

Isto cria uma barreira séria para pessoas que dependem de teclados para navegar, incluindo utilizadores cegos que usam leitores de ecrã e pessoas com deficiências motoras que não conseguem usar um rato. O conteúdo preso dentro de uma frame inacessível fica efetivamente oculto destes utilizadores, mesmo que possa estar completamente visível no ecrã.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o Critério de Sucesso 2.1.1 WCAG 2.1: Teclado (Nível A), que exige que toda a funcionalidade seja operável através de uma interface de teclado sem exigir tempos específicos para teclas individuais. Quando o conteúdo focalizável está bloqueado dentro de uma frame com tabindex="-1", este critério é violado porque os utilizadores de teclado não conseguem aceder ou interagir com esse conteúdo.

Este é um requisito de Nível A — o nível mais fundamental de acessibilidade — o que significa que deve ser cumprido para que uma página seja considerada minimamente acessível.

Como corrigir

1. Remova tabindex="-1" de qualquer <frame> ou <iframe> que contenha conteúdo focalizável. Sem um tabindex explícito, o navegador irá lidar com o foco naturalmente e permitir que os utilizadores de teclado tabulem para dentro da frame.
2. Use tabindex="0" se precisar de incluir explicitamente a frame na ordem de tabulação.
3. Use apenas tabindex="-1" em frames que genuinamente não contêm conteúdo focalizável ou interativo. Mesmo assim, seja cauteloso — se o conteúdo da frame mudar mais tarde para incluir elementos interativos, o tabindex negativo irá silenciosamente criar uma barreira de acessibilidade.

Como boa prática geral, evite usar tabindex="-1" em frames inteiramente. É fácil o conteúdo da frame mudar ao longo do tempo, e um tabindex negativo pode tornar-se acidentalmente num problema de acessibilidade após uma atualização de conteúdo de rotina.

Exemplos

Incorreto: Frame com conteúdo focalizável e tabindex="-1"

O botão dentro desta iframe é inacessível por teclado porque tabindex="-1" impede que o foco entre na frame.

<iframe
  srcdoc="<button>Click me</button>"
  tabindex="-1"
  title="Interactive widget">
</iframe>

Correto: Frame com conteúdo focalizável e sem tabindex negativo

Remover tabindex="-1" permite que os utilizadores de teclado tabulem para dentro da frame e alcancem o botão.

<iframe
  srcdoc="<button>Click me</button>"
  title="Interactive widget">
</iframe>

Correto: Frame com conteúdo focalizável e tabindex="0"

Usar tabindex="0" coloca explicitamente a frame na ordem natural de tabulação.

<iframe
  srcdoc="<button>Click me</button>"
  tabindex="0"
  title="Interactive widget">
</iframe>

Correto: Frame sem conteúdo focalizável e tabindex="-1"

Quando uma frame contém apenas conteúdo estático, não-interativo (sem ligações, botões, ou controlos de formulário), usar tabindex="-1" é aceitável porque não há nada dentro que requeira acesso por teclado.

<iframe
  srcdoc="<p>Hello world</p>"
  tabindex="-1"
  title="Static content display">
</iframe>

Learn more:

Deque Reference

Deque University - How To Fix

→