Imagen

Cómo utilizar este componente

Las imágenes son herramientas poderosas que respaldan la narración de historias y siempre deben relacionarse con el texto que las acompaña. Utilice el componente Imagen para agregar contexto, llamar la atención o representar visualmente su información.

Especificaciones de la imagen

Prepare imágenes con estas especificaciones antes de cargarlas en el Administrador de activos digitales (DAM).

Tipos de archivos compatibles:

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

No se admiten otros formatos, incluido JPG

Convenciones de nomenclatura de archivos:

• Todo en minúsculas
• Sin espacios 
• Usar guiones para separar palabras
• Utilice palabras clave para el SEO y la visibilidad de DAM, evite los términos genéricos

Campos obligatorios de metadatos de texto alternativo:

• Título del documento
• Descripción
  Consulte la sección de accesibilidad a continuación para obtener pautas adicionales.

Tamaños de imagen admitidos:

• 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 cita extraída: 900x900px
• Imágenes horizontales: 900x600px
  Se utiliza para: componente de tarjeta vertical, componente de contenido destacado
• Retratos de liderazgo: 600x750px

Ten en cuenta el impacto visual y la accesibilidad para el público a la hora de añadir imágenes. 

• Las imágenes intentarán cambiar de tamaño 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 se pueden distribuir dentro del cuerpo de la página.

Características de la imagen

• Uso: Las imágenes de TxDOT.gov solo se pueden utilizar si se han subido y publicado en el Gestor de Activos Digitales (DAM).
• Texto alternativo: Las imágenes deben tener un texto alternativo descriptivo para ayudar a los lectores con discapacidad visual.

Propiedades de diseño de imagen

• Lightbox: Abre la imagen en una ventana modal con un tamaño de 900x600px, superponiendo la página actual.
• Nueva pestaña: Abre la imagen en una nueva pestaña del navegador cuando se hace clic en ella.
• No se puede hacer clic: hace que la imagen no se pueda interactuar.

Contenido de la imagen

• Imágenes decorativas: si se selecciona "La imagen es decorativa", la tecnología de asistencia ignorará la imagen y no requerirá texto alternativo.
  
• Subtítulo: Se puede proporcionar un subtítulo si se desea. Asegúrese de que sea conciso y describa la imagen o proporcione una llamada a la acción (por ejemplo, "haga 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: Utilice la opción "Abrir cuadro de diálogo de selección" a la derecha del campo URL y navegue hasta la página deseada.
• Enlaces externos: Marque la casilla "Abrir en una ventana nueva" si la imagen enlaza con un sitio externo.

Descripción de los metadatos:

• Utilice un texto alternativo descriptivo para las imágenes para ayudar a los lectores con discapacidad visual, a menos que la imagen no agregue información adicional al contenido de la página, y luego márquela como decorativa.
• Marque las imágenes decorativas correctamente en la pestaña Metadatos para que la tecnología de asistencia las ignore.
• Evite frases redundantes como "imagen de" o "imagen de", ya que los lectores de pantalla ya indican la presencia de una imagen.
• Proporcionar información relevante que mejore la comprensión del contenido.
• Procura que el texto alternativo no tenga más de 125 caracteres.

Título de los metadatos:

• Asegúrese de que el título agregue valor y no repita la descripción.
• Mantenga el título conciso e informativo.
• Recuerde que el atributo title aparece como información sobre herramientas cuando un usuario pasa el cursor sobre una imagen.

Contraste de color:

• Trate de evitar el texto en las imágenes, sin embargo, si esto es inevitable, asegúrese de que las imágenes con texto o detalles importantes tengan suficiente contraste de color para que los usuarios con discapacidades visuales las distingan.

Imágenes escalables:

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

Lista de verificación del coordinador web

• Prepare las imágenes de acuerdo con las especificaciones y guárdelas en formato PNG o SVG con los DPI y las dimensiones adecuados.
  
• Agregue y verifique los metadatos de texto alternativo para cada imagen.
• Guarde las imágenes utilizando la convención de nomenclatura especificada.
• Cargue imágenes en el Administrador de activos digitales (DAM).
• Coloque la imagen en el área de contenido adecuada.
• Configure los ajustes de la imagen (por ejemplo, lightbox, nueva pestaña, no se puede hacer clic) según sea necesario.
• Marque la imagen como decorativa si no transmite información adicional.
• Proporcione un pie de foto si es necesario, asegurándose de que sea conciso y descriptivo.
• Agregue un enlace a la imagen si es necesario, asegurando una configuración adecuada para la navegación interna o externa.