role=’text’ não deve ter descendentes focalizáveis

O atributo role="text" é uma solução alternativa para um comportamento específico do leitor de ecrã. Quando um nó de texto é dividido por marcação inline — por exemplo, <h1>Bom dia, <span>amigo</span></h1> — o VoiceOver no macOS e iOS pode anunciar isto como duas frases separadas em vez de o ler como uma string contínua. Envolver o conteúdo num elemento com role="text" diz ao leitor de ecrã para tratar tudo no interior como um único nó de texto, o que produz uma experiência de leitura mais suave.

No entanto, role="text" tem um efeito secundário importante: substitui o papel semântico do elemento contentor e todos os seus descendentes. Cada elemento filho é efetivamente tratado como texto simples. Isto significa que se algum descendente for focalizável — como um <a>, <button>, ou <input> — o leitor de ecrã já não o pode reconhecer pelo que é. O elemento permanece na ordem de tabulação porque o navegador ainda o considera focalizável, mas o VoiceOver não anunciará o seu nome, papel, ou valor. O resultado é uma paragem de tabulação “fantasma”: o utilizador prime Tab, o foco move-se para um elemento, mas nada é anunciado. Isto é um problema sério para utilizadores cegos e utilizadores apenas de teclado que dependem de anúncios de foco para navegar e interagir com uma página.

Quem é afetado

• Utilizadores cegos que usam leitores de ecrã como o VoiceOver não conseguem identificar elementos focalizáveis presos dentro de um contentor role="text". Encontram paragens de tabulação vazias sem qualquer anúncio.
• Utilizadores apenas de teclado experienciam comportamento de foco confuso — a tabulação aterra em elementos que não fornecem informação sobre o que são ou o que fazem.
• Utilizadores com baixa visão que usam leitores de ecrã em combinação com ampliação podem também ser impactados.

Normas relacionadas

Esta regra é classificada como uma Boa Prática da Deque. Embora não mapeie diretamente para um critério de sucesso WCAG específico, relaciona-se estreitamente com:

• WCAG 4.1.2 (Nome, Papel, Valor): Todos os componentes da interface do utilizador devem ter um nome acessível e papel que podem ser determinados programaticamente. Um elemento focalizável dentro de role="text" perde o seu papel e pode perder o seu nome acessível.
• WCAG 2.4.7 (Foco Visível): Os utilizadores devem conseguir entender onde está o foco. Uma paragem de tabulação vazia sem anúncio do leitor de ecrã prejudica isto.
• WCAG 2.1.1 (Teclado): Toda a funcionalidade deve ser operável através de teclado. Se um utilizador não consegue identificar um elemento focalizável, efetivamente não o pode usar.

Como corrigir

1. Mova elementos focalizáveis para fora do contentor role="text" para que mantenham os seus papéis semânticos e sejam adequadamente anunciados.
2. Apenas envolva conteúdo não interativo com role="text". Use-o exclusivamente para o seu propósito pretendido: unir nós de texto divididos numa única frase para leitores de ecrã.
3. Remova role="text" inteiramente se o conteúdo inclui elementos interativos e não consegue reestruturar a marcação. É melhor ter o VoiceOver a anunciar texto em frases separadas do que criar elementos interativos inacessíveis.

Exemplos

Incorreto: link focalizável dentro de role="text"

O link está dentro do contentor role="text", então o VoiceOver trata-o como texto simples. O utilizador pode usar Tab para o link, mas nada é anunciado.

<p role="text">
  Para mais detalhes, visite
  <a href="/about">a nossa página sobre</a>.
</p>

Incorreto: botão focalizável dentro de role="text"

<div role="text">
  A sua sessão está prestes a expirar.
  <button>Prolongar sessão</button>
</div>

Correto: role="text" envolve apenas conteúdo não interativo

O role="text" é aplicado a um <span> que não contém elementos focalizáveis, enquanto o link fica fora dele.

<p>
  <span role="text">Bom dia, <span>amigo</span></span>.
  Visite <a href="/dashboard">o seu painel</a> para começar.
</p>

Correto: role="text" num cabeçalho com nós de texto divididos

Este é o caso de uso principal para role="text" — garantir que o VoiceOver lê um cabeçalho como uma única frase em vez de fragmentos separados.

<h1>
  <span role="text">Olá <br/>Mundo</span>
</h1>

Correto: reestruturado para evitar o problema inteiramente

Se não consegue separar conteúdo interativo e não interativo, remova role="text" completamente.

<p>
  Para mais detalhes, visite
  <a href="/about">a nossa página sobre</a>.
</p>

O princípio chave é direto: role="text" destina-se à apresentação de texto estático apenas. Nunca coloque links, botões, inputs, ou qualquer outro elemento focalizável dentro dele.

Learn more:

Deque Reference

Deque University - How To Fix

→