Conteúdo gerado acessível

Recursos da Web: Conteúdo Texto alternativo para conteúdo gerado
  • NÃO use content para transmitir textos significativos (rótulos, estado, instruções). Mantenha-os no DOM (WCAG F87). O argumento de texto alternativo é uma redução de danos para casos em que a decoração carrega significado acidentalmente, não uma licença.
  • Use o argumento de texto alternativo de content para fornecer texto alternativo para leitores de tela. Por exemplo, content: url(cloud.svg) / "Save";
  • Use content: "text" / ""; para evitar que textos puramente decorativos sejam anunciados para leitores de tela.
  • NÃO use um argumento de texto alternativo vazio para imagens, porque elas já são de apresentação por padrão. Por exemplo, isto está errado: content: url(cloud.svg) / "";.
  • NÃO use o argumento de texto alternativo para descrever emojis, a menos que a descrição seja diferente do nome oficial do emoji. Por exemplo, não use content: "🎉" / "celebration";, mas content: "🎉" / "Yay!"; está correto.

SOMENTE use o argumento de texto alternativo quando o texto for diferente do valor principal e ainda não estiver presente no DOM. Por exemplo, isto está errado:

HTML:

<button class="save">Save</button>

CSS:

button.save::before {
  content: url(cloud.svg) / "Save";
}

Um leitor de tela leria isso como "Salvar salvar".