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: nonevisibility: hiddenhiddenattribute
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.