← Todas as regras

Teclado

Não aninhe controles interativos

• Regra: nested-interactive
• Gravidade: Grave
• Nível WCAG A

Por que isso importa

Um link dentro de um botão, ou um botão dentro de um link, dá ao navegador dois alvos no mesmo lugar. Leitores de tela anunciam só um deles, e qual será é imprevisível.

Como corrigir

1. Coloque os controles lado a lado em vez de um dentro do outro.
2. Se o cartão inteiro deve ser clicável, use um único link esticado por CSS sobre o cartão.
3. Verifique se os seus controles personalizados não têm descendentes ainda focáveis nativamente.

Na marcação

<button>
  Details <a href="/terms">terms</a>
</button>

<button>Details</button>
<a href="/terms">terms</a>

A exigência por trás disso

Esta regra é uma das formas de falhar nos seguintes critérios de sucesso das WCAG 2.2. O W3C, que publica a norma, explica cada um deles:

• 4.1.2 Nome, função e valor (abre em nova aba) — Nível WCAG A

Para aprofundar

Deque University sobre nested-interactive (abre em nova aba)

A Deque mantém o axe-core, o motor de código aberto que o nosso scanner executa. A página deles documenta a regra como o motor a implementa.

Verificações automáticas encontram falhas que o navegador consegue comprovar. Elas não julgam se uma legenda está correta, se um texto alternativo é útil, nem se a página pode ser operada de ponta a ponta pelo teclado — isso exige uma pessoa.