HTML Elegir texto alternativo


Ejemplo

Alt-text es utilizado por lectores de pantalla para usuarios con discapacidades visuales y por motores de búsqueda. Por lo tanto, es importante escribir un buen texto alternativo para sus imágenes.

El texto debe verse correcto incluso si reemplaza la imagen con su atributo alt. Por ejemplo:

<!-- Incorrect -->
<img src="anonymous.png" alt="Anonymous user avatar"/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit icon"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete icon"/></a>

Sin las imágenes, esto se vería así:

Usuario anónimo avatar Un usuario anónimo escribió:

Lorem ipsum dolor sed.
Editar icono / Eliminar icono

Para corregir esto:

  • Eliminar el texto alternativo para el avatar. Esta imagen agrega información para los usuarios videntes (un icono fácilmente identificable para mostrar que el usuario es anónimo) pero esta información ya está disponible en el texto. 1
  • Elimine el "icono" del texto alternativo de los iconos. Saber que esto sería un ícono si estuviera allí no ayuda a transmitir su propósito real.
<!-- Correct -->
<img src="anonymous.png" alt=""/> An anonymous user wrote:
<blockquote>Lorem ipsum dolor sed.</blockquote>
<a href="https://google.com/"><img src="edit.png" alt="Edit"/></a> /
<a href="https://google.com/"><img src="delete.png" alt="Delete"/></a>

Un usuario anónimo escribió:

Lorem ipsum dolor sed.
Editar / Eliminar

Notas al pie

1 Hay una diferencia semántica entre incluir un atributo alt vacío y excluirlo por completo. Un atributo alt vacío indica que la imagen no es una parte clave del contenido (como es cierto en este caso, es solo una imagen aditiva que no es necesaria para comprender el resto) y, por lo tanto, puede omitirse de la representación. Sin embargo, la falta de un atributo alt indica que la imagen es una parte clave del contenido y que simplemente no hay un equivalente textual disponible para la representación.