Imagen

Cómo usar este componente

Las imágenes son herramientas poderosas que apoyan la narración y siempre deben estar relacionadas con el texto que la acompaña. Utiliza el componente Imagen para añadir contexto, llamar la atención o representar visualmente tu información.

Especificaciones de imagen

Prepara imágenes con estas especificaciones antes de cargarlas en el Gestor de Activos Digitales (DAM).

Tipos de archivo soportados:

• PNG (resolución de 72 PPI)
• SVG

No se soportan otros formatos, incluido JPG

Convenciones de nombres de archivos:

• Todas minúsculas
• Sin espacios
• Utiliza guiones para separar palabras
• Utiliza palabras clave para SEO y descubribilidad de DAM, evita términos genéricos

Campos requeridos de metadatos de texto alternativo:

• Título del documento
• Descripción
  Consulte la sección de accesibilidad más abajo para más directrices.

Tamaños de imagen soportados:

• Banner de página web de nivel 1: 2560x1070px
• Banner de página web de nivel 2: 1920x921px
• Banner de página web de nivel 3: 1000x500px
• Imágenes de citas: 900x900px
• Imágenes de paisaje: 900x600px
  Utilizado para: componente de tarjeta vertical, componente de contenido destacado
• Retratos de liderazgo: 600x750px

Considera el impacto visual y la accesibilidad para el público al añadir imágenes.

• Las imágenes intentarán redimensionarse al área de contenido en la que se colocan.
• Las imágenes decorativas suelen mostrarse en la parte superior de las páginas.
• Las imágenes informativas pueden distribuirse dentro del cuerpo de la página.

Características de la imagen

• Uso: Las imágenes en TxDOT.gov solo pueden usarse si han sido subidas y publicadas en el Digital Asset Manager (DAM).
• Texto alternativo: Las imágenes deben tener texto alternativo descriptivo para ayudar a los lectores con discapacidad visual.

Propiedades de disposición de imágenes

• Lightbox: Abre la imagen en una ventana modal con un tamaño de 900x600px, superponiéndose a la página actual.
• Nueva pestaña: Se abre la imagen en una pestaña nueva del navegador al hacer clic.
• No se puede hacer clic: Hace que la imagen no sea interactiva.

Contenido de la imagen

• Imágenes decorativas: Si se selecciona "La imagen es decorativa", la imagen será ignorada por la tecnología de asistencia y no requerirá texto alternativo.
  
• Pie de foto: Se puede proporcionar un pie de foto si se desea. Asegúrate de que sea concisa y que describa la imagen o ofrezca una llamada a la acción (por ejemplo, "haz clic para ver una imagen más grande").
• Enlace: Se puede adjuntar un enlace opcional a la imagen. Si se utiliza, dirige al usuario a otro recurso dentro de TxDOT.gov o a un sitio externo.
• Enlaces internos: Utiliza la opción "Abrir cuadro de selección" a la derecha del campo URL y navega hasta la página deseada.
• Enlaces externos: Marca la casilla "Abrir en una ventana nueva" si la imagen enlaza con un sitio externo.

Descripción de los metadatos:

• Utiliza texto descriptivo alternativo para las imágenes que ayude a los lectores con discapacidad visual, a menos que la imagen no aporte información adicional al contenido de la página, y entonces máccalo como decorativo.
• Marca las imágenes decorativas adecuadamente en la pestaña de Metadatos para que la tecnología de asistencia las ignore.
• Evita frases redundantes como "imagen de" o "imagen de", ya que los lectores de pantalla ya indican la presencia de una imagen.
• Proporciona información relevante que mejore la comprensión del contenido.
• Procura que el texto alternativo no supere los 125 caracteres.

Título de metadatos:

• Asegúrate de que el título aporte valor y no repita la descripción.
• Mantén el título conciso e informativo.
• Recuerda, el atributo título aparece como una descripción emergente cuando un usuario se queda sobre una imagen.

Contraste de colores:

• Intenta evitar el texto en las imágenes, pero si esto es inevitable, asegúrate de que las imágenes con texto o detalles importantes tengan suficiente contraste de color para ser distinguibles por usuarios con discapacidades visuales.

Imágenes escalables:

Utiliza SVGs para iconos y gráficos sencillos porque escalan sin perder calidad y son accesibles para lectores de pantalla cuando se implementan correctamente.

Lista de verificación para coordinador web

• Prepara las imágenes según las especificaciones y guárdalas en formato PNG o SVG con el DPI y dimensiones adecuados.
  
• Añade y verifica los metadatos de texto alternativo para cada imagen.
• Guarda las imágenes usando la convención de nombres especificada.
• Sube imágenes al Gestor de Activos Digitales (DAM).
• Coloca la imagen en el área de contenido correspondiente.
• Configura los ajustes de imagen (por ejemplo, lightbox, nueva pestaña, no clicable) según sea necesario.
• Marca la imagen como decorativa si no transmite información adicional.
• Proporciona un pie de foto si es necesario, asegurándote de que sea conciso y descriptivo.
• Añade un enlace a la imagen si es necesario, asegurando una configuración adecuada para la navegación interna o externa.