Pasar al contenido principal

Cómo corregir las imágenes sin atributo alt en Drupal sin necesidad desarrollo

Los atributos alt vacíos o incorrectos perjudican tanto la accesibilidad como el SEO. Suelen aparecer tanto en las migraciones de contenido como en operaciones diaras de edición de contenido, si el campo alt se ha marcado como opcional, ya sea por un error de configuración o por requisito explítico del proyecto, o cuando una imagen debería ser decorativa y no llevar texto alt.

Image Alt Fallback es un módulo contrib de Drupal que rellena automáticamente los atributos alt ausentes según reglas configurables, como el título de la entidad padre o marcar la imagen como decorativa, por tipo de contenido y campo, sin necesidad de desarrollo. Este artículo explica por qué el problema importa para cumplir con la WCAG y el SEO, cuándo recurrir al módulo, y los detalles de configuración necesarios para ponerlo en marcha.

La falta de atributo alt perjudica accesibilidad y SEO

Los atributos alt vacíos perjudican tanto la accesibilidad como el SEO, y el coste es medible. Google Lighthouse marca el error en ambas auditorías: hasta 6 puntos menos en la puntuación de Accessibility y 8 puntos menos en la de SEO.

El impacto en los usuarios reales puede ser peor que la puntuación. Los lectores de pantalla ignoran por completo una imagen sin texto alt, así que las personas ciegas ni siquiera saben que hay una imagen, lo que hace la experiencia confusa y disruptiva. Además, se incumple el Success Criterion 1.1.1 de las WCAG, Non-text Content, el requisito básico.

Esa es la razón por la que tuvimos hacer algo cuando un proyecto de migración dejó miles de imágenes sin atributo alt.

Una migración de Drupal dejó alrededor de 12.000 imágenes con un texto alternativo erróneo o vacío

Una migración de Drupal 9 a Drupal 11 para un proyecto multidioma de noticias deportivas reveló alrededor de 12 000 imágenes con atributos alt vacíos o incorrectos, detectados mediante la herramienta Screaming Frog. Algunas imágenes no tenían ningún atributo alt, mientras que otras tenían texto alternativo en el idioma incorrecto; en la versión /es del sitio aparecía texto alternativo en inglés.

El siguiente paso obvio era buscar un patrón. ¿Estaba el problema ligado a un tipo de contenido concreto, como Artículos? ¿Se debía el texto en el idioma equivocado a contenido Media sin traducir? Responder a estas preguntas resultó sorprendentemente difícil: Drupal no ofrece ningún mecanismo por defecto, ninguna vista ni ningún informe, para identificar imágenes con atributos alt problemáticos.

El motivo estaba en el origen de la migración. En el sitio Drupal 9, algunas imágenes nunca habían tenido un atributo alt, y la migración arrastró ese vacío directamente a la nueva arquitectura.

Aquí es donde entra en juego Image Alt Fallback.

Image Alt Fallback rellena el texto alt ausente automáticamente, sin desarrollo

Image Alt Fallback actúa solo sobre las imágenes que no tienen texto alt definido. El texto alt existente nunca se toca.

Configuration form for Image Alt Fallback
Formulario de configuración de Image Alt Fallback, mostrando distintas opciones.

El punto de partida es un comportamiento global por defecto configurable: fijar el alt fallback como el título de la entidad padre o marcar la imagen como decorativa. Sobre ese valor por defecto se añade la configuración por campo. Por ejemplo, field_image en el tipo de contenido Artículo puede usar como alt el título de la entidad padre (es decir, el título de ese artículo), field_gallery puede seguir el comportamiento global, y field_image en el vocabulario de la taxonomía Frutas y verduras puede marcarse como decorativo. El módulo detecta actualmente dos tipos de entidad: nodos y taxonomías.

A nivel técnico, el módulo actúa en un callback post_render. No hay cambios en base de datos ni en plantillas Twig, solo instalación y configuración.

El módulo también incluye una vista que nos ayuda a identificar y dar una soluciona al problema. Lista todos los elementos media con filtros por estado del alt (vacío o no vacío) y por tipo, de modo que las imágenes con alts problemáticos salen a la luz sin necesidad de ayuda técnica.

Image Alt Fallback helper view
Vista helper que ayuda a identificar Medias sin atributo alt definido.

Cuándo usar Image Alt Fallback

La solución ideal a largo plazo es almacenar texto alt significativo directamente en la propia entidad File o Media. Las versiones recientes de Drupal hacen que el atributo alt sea obligatorio por defecto, pero versiones anteriores de Drupal u otros sistemas de origen pueden no imponerlo, así que las migraciones pueden arrastrar ese vacío heredado al nuevo sitio.

También aparecen alt vacíos fuera de las migraciones. El campo alt puede configurarse como opcional, a veces por un error de configuración, a veces como requisito explícito del proyecto, de modo que con el tiempo se va publicando contenido sin texto alt. En otros casos la imagen es puramente decorativa, y el tratamiento correcto es marcarla como decorativa en lugar de forzar un texto alt significativo sobre ella.

El módulo debe tratarse como una red de seguridad, no como una solución permanente. Cubre estos vacíos automáticamente mientras el contenido en sí se corrige en origen.

Conclusión

La ausencia de atributos alts tiene un coste real y medible en las auditorías de Accessibility y SEO, y aparecen a gran escala en proyectos reales, como muestra el caso de la migración de 12 000 imágenes. Image Alt Fallback cierra ese vacío automáticamente, con reglas configurables por tipo de contenido y campo, y sin necesidad de desarrollo para configurarlo o usarlo. Se gana su lugar como red de seguridad para vacíos heredados y limitaciones de tiempo, mientras que el texto alt significativo almacenado en origen sigue siendo el objetivo.

Visita la página del módulo para los detalles de instalación y configuración: https://www.drupal.org/project/image_alt_fallback

  • Alejandro Cabarcos

    Drupal developer
Las respuestas se generan automáticamente mediante IA y pueden no ser precisas.