Contenido generado accesible

Funciones web: Contenido Texto alternativo para el contenido generado
  • NO uses content para transmitir texto significativo (etiquetas, estado, instrucciones); mantenlo en el DOM (WCAG F87). El argumento del texto alternativo es la reducción de daños para los casos en los que la decoración tiene un significado accidental, no una licencia.
  • Usa el argumento de texto alternativo de content para proporcionar texto alternativo para los lectores de pantalla. P.ej., content: url(cloud.svg) / "Save";
  • Usa content: "text" / ""; para evitar que se anuncie texto puramente decorativo a los lectores de pantalla.
  • NO uses un argumento de texto alternativo vacío para las imágenes, ya que son de presentación de forma predeterminada. Por ejemplo, esto es incorrecto: content: url(cloud.svg) / "";.
  • NO uses el argumento de texto alternativo para describir emojis, a menos que la descripción difiera del nombre oficial del emoji. Por ejemplo, no uses content: "🎉" / "celebration";, pero content: "🎉" / "Yay!"; está bien.

SOLO usa el argumento de texto alternativo cuando el texto sea diferente del valor principal y no esté presente en el DOM. Por ejemplo, esto es incorrecto:

HTML:

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

CSS:

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

Un lector de pantalla lo leería como "Guardar guardar".