VisuallyHidden
Texto que não aparece na tela, mas o leitor de tela lê. Completa o que a posição na página já diz para quem enxerga.
Nesta página
Playground
Ver como
Fundo
<label class="feitio-stack" data-gap="2" style="inline-size: min(100%, 20rem)"><span class="feitio-visually-hidden">Filtrar</span><input class="feitio-input" type="search" placeholder="…"></label>Quando usar
- Para dar o contexto que o olho pega pela posição: "Editar backup semanal" num botão "Editar" dentro de uma linha de tabela.
Quando não usar
- Para esconder algo de todo mundo: use o atributo
hidden. - Para texto que todos deveriam ler: se ajuda o leitor de tela, quase sempre ajuda todo mundo. Mostre.
Exemplos
Backup semanal
O nome completo de uma ação
Quem vê, entende pela linha; o leitor de tela ouve "Editar backup semanal".
Mostrar código
<button type="button" class="feitio-button" data-size="small">
Editar<span class="feitio-visually-hidden"> backup semanal</span>
</button>Bons e maus padrões
Faça assim
"Editar" com o nome da linha escondido.
O contexto que falta só ao leitor de tela.
Não faça
"Salve antes de sair" escondido, só para o leitor de tela.
Um aviso que só o leitor de tela recebe: quem enxerga também precisava dele.
Atributos
| Atributo | Valores | Para quê |
|---|---|---|
class="feitio-visually-hidden" | obrigatório | Some da tela e continua para o leitor de tela. |