Accesibilidad EAA — Widget y Correcciones WCAG (dfaccessibility)

DF Accessibility pone su tienda PrestaShop en conformidad con la ley europea de accesibilidad (EAA — Directiva (UE) 2019/882) combinando tres bloques: un widget de accesibilidad para sus visitantes, un motor de correcciones WCAG automáticas aplicadas en cada carga de página, y un generador multilingüe de declaración de accesibilidad legal.

Instalación

1. En su back office de PrestaShop, abra Módulos > Gestor de módulos.
2. Haga clic en Subir un módulo y suelte el archivo dfaccessibility.zip.
3. Haga clic en Configurar al terminar la instalación.

El módulo se registra en tres hooks (displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag) y crea una única tabla de estadísticas. Tras la instalación, el widget está activo en el front office con los ajustes por defecto y todas las correcciones automáticas están habilitadas, excepto la corrección de contraste.

Configuración

Widget de accesibilidad

• Activar el widget — muestra el botón flotante en todas las páginas del front office.
• Posición del botón — abajo a la derecha o abajo a la izquierda.
• Color de acento — usado para el botón, las opciones activas del panel y el contorno de foco impuesto. Elija un color con suficiente contraste sobre blanco (el azul por defecto #2563EB cumple el ratio AA).
• Ocultar el botón en móvil — oculta el botón flotante por debajo de 768px. Las preferencias ya guardadas por el visitante siguen aplicándose.

Correcciones automáticas

Cada corrección se activa individualmente. Se ejecutan en el navegador del visitante al cargar la página: los archivos de su tema nunca se modifican y la desinstalación restaura el estado original de forma idéntica.

• Textos alternativos ausentes — vea las heurísticas detalladas más abajo.
• Campos de formulario sin etiqueta — añade un aria-label derivado del placeholder o del nombre del campo.
• Enlaces que abren nueva ventana — añade rel=noopener y un aviso audible para lectores de pantalla.
• Iframes sin título — añade un atributo title derivado del dominio de origen.
• Landmarks ARIA — añade los roles banner y contentinfo y un aria-label de navegación cuando faltan.
• Enlace de salto — inyecta un enlace «Ir al contenido principal» revelado al primer Tab.
• Contorno de foco visible — impone un contorno al foco de teclado (criterio WCAG 2.4.7).
• Corrección automática del contraste — desactivada por defecto, vea la sección dedicada.

Estadísticas

Cuando la recolección está activada, el navegador envía contadores anónimos por tipo de corrección tras aplicar las correcciones (vía sendBeacon). Los contadores se agregan por día y por tienda — sin cookies, sin identificadores, sin datos personales.

El widget del lado del visitante

El botón flotante abre un panel que ofrece:

• Tamaño del texto — 5 niveles de 100% a 135%.
• Alto contraste — modo inteligente que blanquea los fondos sólidos preservando las imágenes (vea más abajo).
• Tipografía legible — cambia a una pila Verdana/Arial.
• Aumentar el espaciado — interlineado 1.8, espaciado de letras y palabras aumentado (criterio WCAG 1.4.12).
• Resaltar enlaces — fondo amarillo y subrayado sistemático.
• Cursor grande — cursor ampliado de alto contraste.
• Guía de lectura — barra horizontal que sigue el ratón.
• Detener animaciones — neutraliza animaciones y transiciones CSS (criterio WCAG 2.3.3).
• Ocultar imágenes — oculta imágenes, vídeos e imágenes de fondo.
• Restablecer todos los ajustes — vuelta al estado original.

El panel es totalmente operable por teclado: trampa de foco, cierre con Escape, estados aria-pressed en cada opción. Las preferencias se guardan únicamente en el localStorage del navegador y se reaplican antes del primer renderizado en las páginas siguientes — sin parpadeo visual, sin datos enviados a sus servidores.

El alto contraste inteligente

A diferencia de los widgets clásicos que fuerzan un fondo blanco en todos los elementos (haciendo desaparecer sliders y banners), este modo analiza el DOM al activarse:

• los fondos de color sólido opacos se blanquean;
• los elementos con imagen de fondo se preservan: sus textos reciben una placa blanca semiopaca que garantiza la legibilidad sobre el visual;
• los textos pasan a negro, los enlaces a azul oscuro subrayado, los controles interactivos reciben un borde negro de 2px.

La desactivación retira todos los estilos aplicados y restaura el tema de forma idéntica.

Las correcciones automáticas en detalle

Textos alternativos (WCAG 1.1.1)

Para cada imagen sin atributo alt, el módulo aplica en orden:

1. si la imagen está dentro de un enlace que ya lleva texto: alt vacío (imagen decorativa);
2. si no, la leyenda figcaption o el atributo title;
3. si no, el título del producto de la miniatura circundante;
4. como último recurso, el nombre de archivo limpiado (guiones reemplazados, secuencias de dígitos eliminadas) cuando el resultado es significativo.

Formularios (WCAG 1.3.1, 4.1.2)

Los campos sin label asociado, sin aria-label ni title reciben un aria-label derivado del placeholder o, en su defecto, del nombre del campo humanizado.

Enlaces e iframes (WCAG 3.2.5, 4.1.2)

Los enlaces target=_blank reciben rel=noopener y un aria-label completado con la mención «se abre en una nueva ventana». Los iframes sin título reciben un title que menciona el dominio incrustado.

Estructura y navegación (WCAG 1.3.1, 2.4.1, 2.4.7)

Roles ARIA añadidos cuando el tema no los declara, enlace de salto inyectado al inicio de la página, y contorno de foco impuesto en todos los elementos interactivos vía :focus-visible.

Corrección automática del contraste (WCAG 1.4.3)

El motor recorre los textos visibles, calcula la luminancia relativa del texto y de su fondo efectivo, y luego oscurece o aclara progresivamente los colores cuyo ratio es inferior a 4,5. El análisis está limitado a 1500 elementos y se ejecuta vía requestIdleCallback durante los tiempos muertos del navegador.

Declaración de accesibilidad EAA

Publicar una declaración de accesibilidad es una obligación formal de la directiva. Desde la configuración del módulo, haga clic en Generar la página de declaración: se crea una página CMS en cada idioma activo de su tienda (plantillas FR, EN, ES, DE, IT incluidas, inglés como respaldo para otros idiomas), con:

• el estado de conformidad respecto a la Directiva (UE) 2019/882 y la norma EN 301 549;
• la lista de funcionalidades de accesibilidad disponibles;
• el canal de comunicación que apunta a su formulario de contacto;
• el procedimiento de reclamación ante la autoridad nacional competente.

El enlace a la declaración aparece automáticamente al pie del panel del widget. Tras una actualización del módulo o un cambio de nombre de la tienda, haga clic en Actualizar la página de declaración para refrescar la página existente sin cambiar su URL.

Estadísticas y prueba de diligencia

La tabla de la página de configuración muestra, sobre los últimos 30 días y por tipo, el número de correcciones aplicadas: textos alternativos, etiquetas de formularios, enlaces externos, títulos de iframes, landmarks ARIA, enlaces de salto y correcciones de contraste. En caso de inspección o reclamación, estos contadores documentan las medidas técnicas implementadas. El botón Restablecer estadísticas purga los contadores de la tienda actual.

En multitienda, las estadísticas y la declaración se gestionan por contexto de tienda.

Buenas prácticas y límites

El módulo corrige los fallos técnicos más frecuentes, pero algunos criterios WCAG son de naturaleza editorial y siguen en sus manos:

• jerarquía lógica de títulos h1-h6 en sus contenidos CMS y fichas de producto;
• calidad editorial de los textos alternativos de sus imágenes clave;
• subtitulado de sus vídeos;
• claridad de las etiquetas de sus botones y enlaces.

Solución de problemas

• El botón no aparece — compruebe que el widget está activado, que el hook displayBeforeBodyClosingTag no está desactivado por su tema, y vacíe la caché de PrestaShop (Parámetros avanzados > Rendimiento).
• Las preferencias no persisten — el visitante probablemente navega en modo privado o su navegador bloquea el localStorage; el widget sigue siendo utilizable, solo se pierde la persistencia.
• El alto contraste deja una zona incoherente — algunos elementos inyectados dinámicamente tras la carga (widgets de terceros) escapan a la pasada de análisis. Desactive y reactive el modo, o informe del caso al soporte con la URL afectada.
• No llegan estadísticas — compruebe que la recolección está activada y que ningún bloqueador del lado del servidor filtra las peticiones al controlador track del módulo.

Desinstalación

La desinstalación elimina la tabla de estadísticas y las claves de configuración. La página CMS de declaración de accesibilidad se conserva intencionadamente (sigue siendo una obligación legal): elimínela manualmente si no desea conservarla.