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 del home de Gob.pe

Esta imagen se utilizará en el espacio definido como banner principal del home de la plataforma, por ser la mas representativa tendrá una dimensión mayor a todas las imágenes utilizadas.

Imagen para página de campaña

Imagen usada como portada en la sección campañas y eventos.

Imagen para página de catálogo

Imagen para página de noticia en home

Si bien esta imagen corresponde a la cargada en la noticia original, se adecúa a este nuevo tamaño para el home de la entidad.

Imagen para página interna de noticia

Imagen para página de campaña en home

Si bien esta imagen corresponde a la cargada en la campaña original, se adecúa a este nuevo tamaño para el home de la entidad.

Imagen del Directorio de funcionarios

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

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.