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 links, botões, controlos de formulários ou outros elementos interativos — tornam-se completamente inacessíveis via teclado. Se a frame também tiver conteúdo com scroll, os utilizadores de teclado não conseguem fazer scroll, 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 de mobilidade que não conseguem usar um rato. O conteúdo preso dentro de uma frame inacessível fica efetivamente escondido destes utilizadores, mesmo que possa estar completamente visível no ecrã.

Critérios de sucesso WCAG relacionados

Esta regra mapeia para o WCAG 2.1 Critério de Sucesso 2.1.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 conteúdo focalizável está bloqueado dentro de uma frame com tabindex="-1", este critério é violado porque 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 gerirá o foco naturalmente e permitirá que utilizadores de teclado naveguem 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 contenham conteúdo focalizável ou interativo. Mesmo assim, seja cauteloso — se o conteúdo da frame mudar posteriormente para incluir elementos interativos, o tabindex negativo criará silenciosamente uma barreira de acessibilidade.

Como boa prática geral, evite usar tabindex="-1" em frames completamente. É fácil o conteúdo das frames mudar ao longo do tempo, e um tabindex negativo pode tornar-se num problema de acessibilidade acidental 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 utilizadores de teclado naveguem para a frame e acedam ao 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 links, botões ou controlos de formulários), usar tabindex="-1" é aceitável porque não há nada dentro que exija 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

→