Texto Focável

Saiba como estamos usando inteligência artificial para esta regra!

O Que Verificamos

Todos os elementos que contêm texto devem ser focáveis por tecnologias assistivas como o VoiceOver. Os elementos de texto devem ser marcados como elementos de acessibilidade, para que os usuários do VoiceOver possam navegar e ler o texto na tela.

Exemplo Falho ❌

O price and description text are not marked as accessibility elements

VoiceOver pula de "Fones de Ouvido Premium" diretamente para "Adicionar ao Carrinho" -
o preço e a descrição nunca são anunciados

Usuários de leitores de tela perdem informações essenciais do produto exibidas na tela

Exemplo Bem-sucedido ✅

Todos os elementos de texto são marked as accessibility elements e acessíveis pelo VoiceOver

VoiceOver navega por todos os quatro elementos em sequência: título, preço, descrição e botão

Usuários de leitores de tela recebem a informação completa do produto em uma ordem de leitura lógica

Visão Geral

• Esta regra tem um impacto crítico para os usuários
• Os elementos de texto devem ser marcados como elementos de acessibilidade para que o VoiceOver possa lê-los
• No UIKit, defina isAccessibilityElement = true no elemento de texto para torná-lo focável
• No SwiftUI e React Native, os elementos de texto são acessíveis por padrão — não os esconda da tecnologia assistiva

Impacto para os Usuários

As pessoas com cegueira ou visão reduzida são as mais impactadas. Quando um elemento de texto não é marcado como um elemento de acessibilidade, o VoiceOver não pode focar nele. Como resultado, os usuários de leitores de tela perderão informações exibidas na tela, o que pode causar confusão ou impedir o acesso a conteúdos importantes.

Confirmar Problema de Texto Focável

1. Ative o VoiceOver
2. Tente focar no elemento de texto
3. Uma das seguintes situações ocorrerá:
   • Inacessível: Elemento de texto não será focável pelo VoiceOver
   • Acessível: Elemento de texto é focado e lido pelo VoiceOver

Corrigir Problemas

Para resolver um problema de Texto Focável, certifique-se de que o elemento de texto está marcado como um elemento de acessibilidade para que o VoiceOver possa alcançá-lo e anunciá-lo. Se o texto faz parte de um elemento pai focável (como um botão ou controle rotulado), o nome acessível do pai deve incluir o texto. Neste caso, o elemento de texto em si não precisa ser focável individualmente.

UIKit

Para corrigir no Storyboard:

1. Navegue até o elemento de texto.
2. Confirme que o Painel do Inspetor está visível.
3. Selecione o Inspetor de Identidade.
4. Em Acessibilidade, selecione a caixa de seleção "Habilitado".

Para corrigir no código, torne o elemento de texto focável pelo VoiceOver:

label.isAccessibilityElement = true

SwiftUI

No SwiftUI, os elementos de texto são acessíveis por padrão. Confirme que o texto é significativo e fornece contexto, e não o oculte usando o modificador de visualização accessibility hidden.

React Native

No React Native, os elementos de texto são acessíveis por padrão. Confirme que o texto é significativo e fornece contexto. Não desative a acessibilidade usando a propriedade accessible={false} diretamente no elemento de texto, ou a propriedade accessibilityElementsHidden=true em um elemento pai.

Flutter

No Flutter, os elementos Text estão incluídos na árvore de acessibilidade por padrão. Confirme que o texto é significativo e fornece contexto. Não exclua texto visível da árvore de acessibilidade ao envolvê-lo em ExcludeSemantics ou Semantics(excludeSemantics: true).

Posso Ignorar Esta Regra?

Texto Focável possui um Impacto Crítico para os usuários, e recomendamos fortemente corrigir essas questões. Em casos onde o texto está contido dentro de um elemento pai que já é focável pelo VoiceOver e já inclui o texto em seu nome acessível - como um rótulo de botão ou o texto descritivo de um controle - pode ser aceitável deixar o elemento de texto em si não focável. Saiba mais sobre ignorar regras.

Recursos

Páginas de Curso da Deque University

• 1.3.2 Sequência Significativa (A)

Nota: O acesso completo aos recursos da Deque University requer uma assinatura.

Outros Recursos

• Diretrizes de Acessibilidade para Conteúdo Web (WCAG) 2.0, Recomendação W3C
  • Critério de Sucesso 1.3.2 - Sequência Significativa
• Documentos de Compreensão WCAG 2.0
  • Compreendendo 1.3.2 A - Sequência Significativa