Cómo exportar URL de imágenes y texto alternativo para una auditoría de accesibilidad
Un método práctico para convertir el rastreo de imágenes de un sitio web en una hoja de trabajo de accesibilidad que un revisor humano puede utilizar.
Una auditoría de accesibilidad necesita más que un recuento de los atributos alt faltantes. Algunas imágenes deben tener descripciones, otras deben tener texto alternativo vacío porque son decorativas y algunas necesitan revisar el enlace o el título que las rodea antes de que alguien pueda decidir.
Exportar las URL de las imágenes y los valores alt actuales crea una hoja de trabajo útil, pero es solo el paso de descubrimiento. Un humano debe evaluar el propósito de la imagen en cada página.
El momento es especialmente útil durante un rediseño o una migración: el texto débil se puede corregir antes de que se instale en el nuevo CMS.
El texto alternativo pertenece a una ocurrencia
El mismo archivo puede aparecer en diferentes contextos. Una fotografía del orador puede identificar a la persona en la página de un evento. La misma fotografía al lado de un nombre visible en una tarjeta de autor puede ser decorativa. Una descripción universal adjunta al archivo puede estar equivocada en uno de esos lugares.
Exporte una fila por aparición con la URL de la página y el contexto DOM. Aún puedes vincular ocurrencias a un ID de activo compartido más adelante.
Que coleccionar
Los campos útiles incluyen:
| campo | Por qué es importante |
|---|---|
| URL de la página | Identifica el contexto y la propiedad. |
| URL de la imagen | Ayuda a agrupar archivos y verificar la carga. |
| Valor alternativo actual | Muestra qué tecnología de asistencia puede recibir |
| Estado del atributo alternativo | Faltante, vacío o lleno |
| Título o título cercano | Ayuda a interpretar el propósito |
| Enlace principal | Determina si la imagen es una etiqueta interactiva. |
| Dimensiones naturales | Ayuda a separar el contenido de los píxeles de seguimiento |
| Selector o rol DOM | Identifica plantillas y patrones repetidos. |
| Revisar decisión | Informativo, decorativo, funcional o complejo. |
| Texto propuesto | Reemplazo aprobado por humanos |
Mantenga el "atributo faltante" distinto de alt="". Alt vacío puede ser correcto para una imagen decorativa. Un atributo faltante puede hacer que algunas tecnologías de asistencia anuncien el nombre del archivo o la URL.
Recoge imágenes de la página renderizada.
Utilice un rastreo con reconocimiento de renderizado porque JavaScript, la carga diferida y las plantillas del lado del cliente pueden agregar imágenes después de la respuesta original. Desplácese por páginas largas y active pestañas o galerías legítimas según su alcance.
El extractor de URL de imágenes ExtractPics puede ayudar a enumerar fuentes de imágenes públicas. Combine ese resultado con la extracción DOM de valores alt y contexto de página. Los fondos CSS no son elementos <img> y no tienen atributos alt, así que audite su significado por separado.
Para ver contenido diferido que falta, lee cómo extraer imágenes cargadas de forma diferida.
Una útil exportación del lado del navegador para su propia página
En las Herramientas de desarrollo de una página que usted controla, un pequeño script puede recopilar campos básicos:
const rows = [...document.images].map((img, index) => ({
index,
src: img.currentSrc || img.src,
alt: img.getAttribute("alt"),
hasAltAttribute: img.hasAttribute("alt"),
width: img.naturalWidth,
height: img.naturalHeight,
linked: Boolean(img.closest("a")),
figureCaption: img.closest("figure")
?.querySelector("figcaption")?.textContent?.trim() || ""
}));
console.table(rows);
Esta es una ayuda de inventario, no un veredicto de accesibilidad. Omite el contexto semántico, los fondos CSS, el contenido del lienzo, los detalles SVG y las imágenes en estados descargados.
Para un sitio completo, integre campos equivalentes en su rastreador autorizado y exporte un CSV o una tabla de base de datos.
Clasificar el propósito de la imagen.
Informativo
La imagen comunica información que aún no está disponible en el texto cercano. El texto alternativo debe transmitir el significado relevante, no todos los detalles visibles.
Decorativo
La imagen agrega estilo visual sin contenido significativo. Utilice texto alternativo vacío en un <img> para que se ignore, o implemente el objeto visual en CSS cuando sea apropiado.
Funcional
La imagen está dentro de un enlace o botón. Su nombre accesible debe describir la acción o el destino, no sólo su apariencia. "Buscar" es mejor que "lupa" cuando el ícono envía una búsqueda.
complejo
Los gráficos, diagramas e infografías pueden necesitar un resumen alternativo conciso además de una explicación detallada cercana o una tabla de datos. Rellenar cada valor en un atributo alternativo crea una mala experiencia.
Imagen de texto
Si una imagen contiene texto esencial, proporcione la misma información en el texto de la página real. Los logotipos pueden utilizar el nombre de la organización; Evite repetir innecesariamente la copia visible cercana.
La guía de decisiones alternativas del W3C WAI es una referencia útil para estas categorías.
Señale problemas probables, no fallos automáticos
Cree indicadores de revisión para:
- Falta el atributo alt
- Texto similar a un nombre de archivo, como
IMG_2048.jpg - Valores genéricos como "imagen" o "foto"
- Descripciones muy largas
- Texto idéntico repetido en imágenes no relacionadas
- Copia de marketing repleta de palabras clave
- Separadores decorativos con descripciones.
- Imágenes vinculadas con nombres accesibles vacíos
- Gráficos sin explicación cercana.
- Información importante presente solo en una imagen.
La automatización puede identificar patrones sospechosos. No puede ver la intención del autor ni decidir qué detalles visuales son importantes para el lector.
Revise atentamente las imágenes vinculadas
Si una imagen es el único contenido dentro de un enlace, su texto alternativo normalmente aporta el nombre accesible del enlace. Describe el destino o acción.
<a href="/downloads/report.pdf">
<img src="report-cover.jpg" alt="Download the annual accessibility report">
</a>
Si el texto del enlace visible ya proporciona el nombre, una imagen decorativa dentro del mismo enlace puede usar alt vacío para evitar repeticiones.
Pruebe el nombre accesible calculado con herramientas de accesibilidad del navegador en lugar de leer el HTML de forma aislada.
Consideraciones sobre SVG e íconos
Los SVG en línea no están incluidos en document.images. Audite si son decorativos, están etiquetados con marcas accesibles o forman parte de un control con nombre.
Las fuentes de iconos y las máscaras CSS también requieren revisión a nivel de control. Un icono visible con texto ligado sin formato o sin un nombre de botón accesible es un problema de interfaz, aunque la hoja de trabajo de la imagen no contenga ninguna fila para ello.
Utilice la guía de iconos web y SVG para inventariar esos sistemas.
fondos CSS
Los fondos CSS no tienen atributo alt. Si el fondo es decorativo, está bien. Si incluye contenido, proporcione texto equivalente en HTML o utilice un patrón de imagen semántica apropiado.
Un fondo de héroe con un título superpuesto puede ser decorativo cuando el título comunica el mensaje. Un diagrama de fondo que contiene instrucciones únicas no lo es.
La guía de extracción de fondo CSS muestra cómo descubrir estos archivos para su revisión manual.
Escribe texto alternativo útil
Un buen texto alternativo es conciso y está vinculado a un propósito.
Débil:
image of product
Mejor en la página de un producto:
Walnut desk with two drawers, shown from the front
Débil:
beautiful stunning mountain image travel landscape
Mejor en una guía de ruta:
Trail junction below the east ridge, with the lake path on the left
No comience cada descripción con "imagen de". Los lectores de pantalla ya exponen el elemento como una imagen. Mencione el medio cuando sea importante, como "diagrama", "mapa" o "captura de pantalla".
Evite la interpretación fabricada
No infieras características sensibles, emociones, identidades o ubicaciones que no estén confirmadas. Utilice hechos visibles y relevantes y el contexto editorial circundante.
Para los gráficos, confíe en los datos reales y en las conclusiones aprobadas por el autor. Para imágenes de productos, utilice registros de catálogo en lugar de adivinar materiales o colores a partir de una vista previa comprimida.
Organizar el flujo de trabajo de revisión
Asigne filas por propietario de la página o equipo de contenido. Incluya columnas para el revisor, la decisión, el texto propuesto, la aprobación y el estado de implementación.
Priorizar:
- Páginas de destino de alto tráfico
- Imágenes y controles funcionales.
- Productos y páginas de conversión
- Diagramas complejos y capturas de pantalla instructivas.
- Componentes de plantilla repetidos
- Contenido archivado de cola larga
Arreglar la plantilla de tarjeta de autor compartida puede mejorar cientos de ocurrencias a la vez.
Validar implementación
Después de las actualizaciones:
- Vuelva a rastrear el sitio renderizado.
- Compare estados faltantes, vacíos y poblados.
- Pruebe páginas representativas con navegación por teclado.
- Inspeccione el árbol de accesibilidad.
- Utilice al menos un lector de pantalla para flujos importantes.
- Confirme que las imágenes cargadas de forma diferida mantengan sus atributos alternativos.
- Verifique que los editores de CMS no puedan eliminar accidentalmente la semántica requerida.
Las pruebas automatizadas pueden detectar atributos faltantes y algunos errores en los nombres. Las pruebas manuales siguen siendo necesarias.
Incluir la auditoría en el control de calidad de la migración.
Mantenga la hoja de trabajo alternativa aprobada junto a la asignación de activos. Después de la migración, únase por página, función e ID de activo estable en lugar de solo por nombre de archivo.
La lista de verificación de migración de imágenes de sitios web muestra cómo conciliar archivos de imágenes, metadatos y comportamiento responsivo.
Privacidad y seguridad
Una exportación puede incluir URL de imágenes firmadas, rutas de páginas privadas, avatares de usuarios y tokens de consulta. Guárdelo de forma segura, redacte secretos y evite enviar manifiestos de producción a herramientas públicas.
Audite el contenido que posee o al que está autorizado a acceder. El trabajo de accesibilidad no requiere saltarse los controles de acceso privados.
La hoja de cálculo inicia la revisión.
La exportación es una clasificación, no la auditoría en sí. Puede mostrarle atributos faltantes, texto repetitivo repetido y nombres de archivos sospechosos. No puede decidir si una fotografía agrega información en esta página en particular.
Proporcione a los revisores la URL de la página, el texto cercano, el contexto del enlace y la imagen renderizada, no solo dos columnas de la hoja de cálculo. Luego pruebe la página modificada con las herramientas y la tecnología de asistencia que admite su equipo. Llenar cada celda vacía es fácil; Dar a cada suceso el tratamiento adecuado requiere criterio.