VisuallyHidden
Texto oculto, que o leitor de tela lê mas a tela não mostra. Use para dar o contexto que quem enxerga tira do layout, como a qual fatura um link "Editar" pertence, ou para anunciar uma mudança.
Instalação
Configure o Camaleo uma vez (Instalação) e importe o componente. Ele não tem estado, então renderiza no servidor.
import { VisuallyHidden } from "@camaleo/react";Anatomia
Um <span> reduzido a 1 × 1 px e recortado. Ele continua na página e na árvore de acessibilidade, então leitores de tela e ferramentas de tradução ainda recebem o texto.
Por que não display: none ou hidden?
display: none, visibility: hidden e o atributo hidden tiram o elemento da árvore de acessibilidade junto com a tela: ninguém recebe o texto. aria-hidden="true" faz o contrário do que você quer aqui: continua na tela e o leitor de tela pula. O VisuallyHidden é o único jeito de deixar um texto só para a tecnologia assistiva.
Exemplos
Cada exemplo é um arquivo real que você pode copiar. Ligue um leitor de tela (VoiceOver, NVDA ou TalkBack) para ouvir o texto escondido, ou abra a árvore de acessibilidade nas ferramentas de desenvolvedor do navegador.
| Técnica | Na tela | Leitor de tela |
|---|---|---|
VisuallyHidden | Não | Sim |
display: none | Não | Não |
atributo hidden | Não | Não |
aria-hidden="true" | Sim | Não |
Quatro jeitos de esconder
Só o VisuallyHidden tira o texto da tela e mantém para o leitor de tela. display: none e hidden escondem de todo mundo; aria-hidden esconde só do leitor de tela.
aria-label ou texto escondido
Num IconButton, o aria-label basta. Quando parte do nome aparece na tela, acrescente o resto como texto escondido: é texto de verdade, então a tradução do navegador também traduz.
Anunciando uma mudança
Adicione ao carrinho. O número muda na tela, e um role="status" escondido, renderizado vazio desde o início, conta a quem usa leitor de tela o que aconteceu.
Link para pular
Clique na dica e aperte Tab. O SkipLink fica no topo da página e aparece por cima dela no foco: use-o para pular para o conteúdo principal.
Aparece no foco
Clique na dica e aperte Tab. Com focusable, o link "Pular para os resultados" aparece no lugar enquanto tem foco, e o Enter pula os filtros. Sem ele, o texto continua escondido mesmo com foco.
| Cliente | Valor | Situação |
|---|---|---|
| Padaria Estrela | R$ 2.060,00 | Paga |
| Café Aurora | R$ 932,00 | Em aberto |
| Mercado Bom Preço | R$ 6.200,00 | Vencida |
Legenda de tabela
Quando o layout já deixa claro para que serve a tabela, uma <caption> escondida ainda dá nome a ela, e à área de rolagem no celular.
Um rótulo que não aparece
Uma caixa de busca sozinha ao lado de um botão de busca pode esconder o rótulo. Ele ainda precisa ser um <label> de verdade; o placeholder some assim que a pessoa digita.
Símbolos em palavras
"★ 4,8 (312)" não diz nada em voz alta. Esconda os símbolos com aria-hidden e dê ao leitor de tela a frase inteira.
Em contexto
Texto escondido está em toda interface bem feita. São pedaços inteiros de interface para copiar, no estilo que você escolheu.
| Recurso | Grátis | Pro |
|---|---|---|
| Faturas por mês | 10 | Ilimitadas |
| Lembretes de pagamento | ||
| Conciliação bancária | ||
| Suporte por telefone |
Boas práticas
Na tela, "Editar" está na linha certa. Numa lista de links, "Editar fatura nº 4821" continua fazendo sentido.
Quem lista os links no leitor de tela ouve "Editar, Editar, Editar" e não sabe qual é qual.
Todo mundo ganha com um rótulo: pessoas com dificuldade de memória ou atenção, e quem confere o que digitou.
Com os campos preenchidos, nada na tela diz qual é qual.
Props
"status" (educado) ou "alert" (urgente) para anunciar mudanças. Renderize vazio primeiro e depois coloque o texto.Todos os atributos de um <span> passam adiante, como id (para apontar um aria-describedby para ele) ou aria-live.
Styling hooks
Não há o que estilizar: os estilos que escondem são inline, então nenhuma folha de estilo os desfaz sem querer. Com focusable eles vêm da folha de estilo, porque estilos inline não reagem ao foco.
Atributos
Tokens que ele lê
Acessibilidade
- O texto continua na árvore de acessibilidade: ele entra no nome acessível do link ou botão em volta.
- Sem focusable ele continua escondido no foco. Para pular para o conteúdo principal use o SkipLink; para um link que aparece no lugar, como "Pular para os resultados", use focusable.
- Para mensagens ao vivo, o elemento com role="status" precisa estar na página antes de o texto mudar, ou o leitor de tela não anuncia.
- Texto escondido é para o contexto que quem enxerga tira do layout. Se todo mundo precisa dele, mostre.