Pharos
Navegar componentes
← Componentes

VisuallyHidden

MiscExemplo
Renderiza conteúdo na árvore de acessibilidade enquanto o oculta visualmente. Use para nomes acessíveis em controles somente com ícone, regiões de anúncio aria-live e contexto complementar para leitores de tela. Deliberadamente não tem props de estilo; o ponto é permanecer invisível.
Importação
import {VisuallyHidden} from '@pharos-ds/core/VisuallyHidden';

Exemplos

Área interativa

Rótulo visível: Excluir incidente #4821O nome completo da ação fica disponível para leitores de tela via VisuallyHidden, mas apenas "Excluir" é exibido visualmente (simulando um controle só com ícone).
Código
import {VisuallyHidden} from '@pharos-ds/core/VisuallyHidden';

<VisuallyHidden />

Boas práticas

  • Faça: Use para dar nomes acessíveis a botões e controles somente com ícone que leitores de tela anunciam.
  • Faça: Renderize como elemento block (as="div") com aria-live para anunciar atualizações dinâmicas como drag-and-drop ou contagens de resultados.
  • Evite: Use para ocultar conteúdo de todos; ele permanece na árvore de acessibilidade; use renderização condicional ou `hidden` para remover conteúdo completamente.
  • Evite: Coloque controles interativos dentro dele; o conteúdo não é visível e não pode receber input de pointer.

Props

PropTipoPadrãoDescrição
childrenReactNode—Conteúdo exposto a tecnologias assistivas enquanto oculto da vista.
asElementType'span'Tag HTML a renderizar. Use um elemento block para live regions.
Pacote: @pharos-ds/core · Import: @pharos-ds/core/VisuallyHidden
VisuallyHidden · Pharos