Guía de estilos

Imágenes

Las imágenes solamente pueden ser usadas cuando hay una necesidad real de los usuarios y no solo por decoración. 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.

Relación de aspecto

Vista previa de noticia y campaña


border-radius: 2px
border-radius: 2px;
border-color: gobpe-color("grey-4");
border-style: solid;
border-width: 1px;

Imágen principal de noticia o campaña

border-color: gobpe-color("grey-4");
border-style: solid;
border-width: 1px;

Miniatura en noticia

border-color: gobpe-color("grey-4");
border-style: solid;
border-width: 1px;

Vista previa de informes y publicaciones

border-color: gobpe-color("grey-4");
border-style: solid;

Fotos de funcionarios

border-radius: 50%;

Fotos de portada

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 imágen no cargue correctamente, este texto alternativo es visible para los usuarios.

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

  • Decir la información que la imagen contiene
  • Describe el contenido y la función de la imagen
  • Es específico, significativo y conciso.
  • Usa 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 adición que no se encuentre en la página.

Ejemplo de texto alternativo

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

Algunas imágenes no necesitan descripción. Utilizar alt="" cuando la imagen:

  • 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.

Para decidir si una imagen debe tener texto alternativo o no, puedes utilizar la herramienta Web Accessibility initiative alt decision tree. Recuerda evitar imágenes que tienen texto, especialmente en formato PNG o JPG, ya que la imagen puede volverse ilegible si el usuario hace zoom en la página. Si la imagen debe contener texto, asegúrate de utilizar SVG para que pueda seguir siendo legible sin importar el zoom. En estos casos, el texto alternativo debe ser igual al que se muestra en la imagen.