Quais são as diferentes maneiras de esconder conteúdo visualmente (e torná-lo disponível apenas para leitores de tela)?

Essas técnicas estão relacionadas à acessibilidade (a11y).

Tamanho pequeno/zero

width: 1px; height: 1px e uma combinação do uso do clip do CSS para fazer com que o elemento ocupe (quase nenhum) espaço na tela.

Usar a largura: 0; altura; 0 não é recomendado porque os motores de busca podem penalizar isso, pensando que tem uma intenção maliciosa, como encher de palavras-chave (keyword stuffing).

Posicionamento absoluto

position: absolute; left: -99999px posicionará um elemento fora da tela. No entanto, de acordo com o artigo da WebAIM:

Elementos navegáveis, como links e controles de formulário, não devem ser escondidos fora da tela. Eles ainda seriam navegáveis por usuários de teclado com visão, mas não seriam visíveis para eles, a menos que sejam estilizados para se tornarem visíveis quando receberem foco do teclado.

Use isso apenas quando seus conteúdos contiverem apenas texto.

Indentação de texto

text-indent: -9999px. Isso só funciona em texto dentro dos elementos block. Semelhante à técnica de posicionamento absoluto mencionada acima, os elementos focalizáveis com esse estilo ainda poderão ser focalizados, causando confusão para os usuários com visão que usam a navegação por teclado.

Formas incorretas

As seguintes maneiras estão incorretas porque escondem o conteúdo do usuário E dos leitores de tela, o que é incorreto se o objetivo é expor apenas aos leitores de tela.

• display: none
• visibility: hidden
• hidden attribute

Técnicas no mundo real

Idealmente, é recomendado combinar as abordagens acima para garantir que funcione corretamente em todos os navegadores.

Em vez de implementar sua própria maneira de remover um elemento da árvore de renderização e da árvore de acessibilidade (a11y), recomenda-se usar uma das seguintes abordagens de frameworks CSS maduros, que foram testadas em muitos sites.

Tailwind CSS

.sr-only {
  posição: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: oculto;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

Bootstrap CSS

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

Referências

• CSS em Ação - Conteúdo invisível apenas para usuários do Leitor de tela