Guía de estilos

Imágenes

Las imágenes solo pueden ser usadas cuando hay una necesidad real de los usuarios; no son para decoración. La razón de esto es porque las imágenes hacen que la carga de la página sea más lenta y, por lo tanto, los usuarios con poca conectividad no podrán tener una buena experiencia.

Imagen principal de páginas

Caso de uso en página

Imagen cuadrada

Imagen interna en cards

Caso de uso en página

Imagen interna en card alternativo

Caso de uso en página

Miniaturas de imagen

Versión 1

Versión 2

Caso de uso en página

Texto alternativo

Para que los lectores de pantalla puedan describir a sus usuarios qué es lo que se muestra en cada imagen, es necesario agregar texto alternativo o "alt text". En caso una imagen no cargue correctamente, este texto alternativo es visible para los usuarios.

Todas las imágenes que no son decorativas deben tener un texto alternativo con la siguientes características:

• Decir la información que la imagen contiene.
• Describir el contenido y la función de la imagen.
• Ser específico, significativo y conciso.
• Usar puntuación normal, incluyendo comas y puntos, para que el texto sea fácil de leer y entender.

Estas características no deben ser incluidas:

• No debe tener el nombre del fotógrafo o el creador de la imagen.
• No debe empezar el texto con "Imagen de" o "Fotografía de".
• No debe repetir información de la página.
• No debe incluir información adicional que no se encuentre en la página.

Otras recomendaciones:

• Evita imágenes con texto, especialmente en formato PNG o JPG, ya que pueden volverse ilegibles si el usuario hace zoom en la página.
• Si la imagen debe contener texto, asegúrate de utilizar SVG para que siga siendo legible sin importar el zoom. En estos casos, el texto alternativo debe ser igual al que se muestra en la imagen.

Ejemplo de texto alternativo

<img alt="Niños" src="/images/img_ninos.jpg" />
Expandir

Existen algunas excepciones para que las imágenes no lleven descripción. Esto se da cuando:

• Es decorativa y no incluye contenido importante.
• Es un ícono con una etiqueta de nombre, ya que se repetiría la información.
• Está siendo usada en un enlace y no es necesaria para entenderlo.

Si estás indeciso sobre si una imagen debe tener texto alternativo o no, puedes utilizar la herramienta Web Accessibility initiative alt decision tree.