PrimitivesEstável

VisuallyHidden

Relatório de paridade: docs/atoms.md

Wrapper que esconde o conteúdo visualmente mas o mantém no DOM para leitores de tela (position: absolute; clip-path: inset(50%) — a técnica "sr-only"). as span (padrão) / div / p / label.

Quando usar

  • Dar um nome acessível completo a um link/botão cujo texto visível é curto ("Ver mais →" + " sobre o relatório de agosto").
  • Anunciar uma mudança de contexto que só é óbvia visualmente. Rótulo de um campo sem label visível.
  • Esconder de todo mundo (visual e leitores) → hidden / display: none. Esconder só de leitores → aria-hidden.

Exemplos

Nome completo de um link
sobre o relatório de agosto
o leitor de tela lê "Ver mais sobre o relatório de agosto, link"; na tela, só "Ver mais →".
<a href="/relatorios/agosto">
  <span aria-hidden>Ver mais</span>
  <Icon icon={ArrowRight} size="sm" />
  <VisuallyHidden> sobre o relatório de agosto</VisuallyHidden>
</a>
Inline no texto

O texto (este trecho só é lido por leitores de tela) ao redor continua visível. Inspecione o DOM para ver o span oculto.

<p>
  O texto <VisuallyHidden>(só é lido por leitores de tela)</VisuallyHidden> ao redor continua visível.
</p>

Props

PropTipopadrãoDescrição
as"span" | "div" | "p" | "label"—Elemento renderizado. Default `"span"`.

Acessibilidade

  • O conteúdo continua na árvore de acessibilidade e na ordem de leitura — então escreva um texto que faça sentido lido em voz alta, na posição em que está.
  • Não coloque elementos focáveis dentro (um link escondido assim vira uma armadilha de foco invisível).