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 cuyas opciones elige usted, un motor de correcciones WCAG automáticas aplicadas en cada página y un generador de declaración de accesibilidad legal en 8 idiomas.

Instalación y actualizació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 los hooks displayHeader, actionFrontControllerSetMedia, displayBeforeBodyClosingTag y displayFooter (este último sirve de respaldo para los temas que no llaman al anterior) y crea una tabla de estadísticas. Tras la instalación, el widget está activo con todas sus opciones y todas las correcciones automáticas están habilitadas, excepto la corrección de contraste.

Para actualizar, suba simplemente el nuevo ZIP sobre el módulo instalado, sin desinstalarlo: los scripts de actualización añaden los nuevos ajustes y conservan su configuración.

Configuración

Widget de accesibilidad

• Activar el widget: muestra el botón flotante en el front office. Desactivar el widget también deja de aplicar las preferencias ya guardadas por los visitantes.
• Posición del botón: abajo a la derecha o abajo a la izquierda.
• Color de acento: se usa 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.
• Ocultar el botón en el carrito y el checkout: retira el botón de las páginas del carrito y del pedido, incluidos los módulos de checkout en una página que conservan el nombre de página order.
• Opciones mostradas en el widget: una casilla por opción (tamaño del texto, alto contraste, fuente legible, espaciado, resaltado de enlaces, cursor grande, guía de lectura, detención de animaciones, ocultación de imágenes). Si no hay ninguna opción marcada, el botón flotante se oculta.

Correcciones automáticas

Cada corrección se activa individualmente. Se ejecutan en el navegador del visitante al cargar la página y en el contenido añadido después: los archivos de su tema nunca se modifican.

• Textos alternativos ausentes: vea el detalle 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: inserta un enlace «Ir al contenido principal» que aparece al pulsar Tab por primera vez.
• 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 recopilación está activada, cada navegador suma las correcciones aplicadas y las envía como máximo una vez por minuto, al cerrar o abandonar la página. 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 con las opciones que usted ha marcado:

• Tamaño del texto: 5 niveles del 100 al 150 %.
• Alto contraste: modo inteligente detallado más abajo.
• Fuente legible: cambia a una pila Verdana, Tahoma, Arial.
• Aumentar el espaciado: letras 0,12 em, palabras 0,16 em, interlineado 1,6 y 2 em entre párrafos, los valores de prueba del criterio WCAG 1.4.12.
• Resaltar enlaces: fondo amarillo y subrayado sistemático.
• Cursor grande: flecha ampliada y mano ampliada sobre enlaces y botones.
• Guía de lectura: barra horizontal que sigue al ratón.
• Detener animaciones: neutraliza animaciones y transiciones CSS, pausa los vídeos en reproducción automática y los carruseles Bootstrap, Swiper, Slick y Owl (criterios WCAG 2.2.2 y 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 utilizable con el 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 vuelven a aplicar antes de la primera visualización de las páginas siguientes, sin parpadeo ni datos enviados a sus servidores.

Las fuentes de iconos (Material Icons del tema Classic, Font Awesome) quedan excluidas de la fuente legible y del espaciado, para que los iconos nunca se conviertan en texto.

Tamaño del texto

El módulo amplía el tamaño raíz de la página a partir del valor definido por su tema, lo que agranda todos los textos en rem y em, incluidos los temas con raíz al 62,5 %. Los textos dimensionados en píxeles, que no siguen la raíz, se amplían uno a uno. Cada texto se amplía una sola vez, sea cual sea su unidad.

El alto contraste inteligente

Los widgets clásicos fuerzan un fondo blanco y una opacidad completa en todos los elementos, lo que hace desaparecer las imágenes de los sliders y reaparecer diapositivas ocultas, menús plegados y fondos de modales. Aquí el módulo analiza toda la página, por lotes para no bloquearla:

• los fondos lisos y los degradados pasan a blanco;
• los elementos con imagen de fondo, y las leyendas superpuestas a una imagen de slider, se conservan: sus textos reciben una placa blanca semiopaca;
• los textos pasan a negro, los enlaces a azul oscuro subrayado (amarillo al pasar el ratón), los botones y campos reciben fondo blanco y borde negro de 2px;
• nada de lo que el tema oculta vuelve a aparecer.

Los colores forzados solo se aplican cuando termina el análisis, para evitar texto negro sobre fondo oscuro durante la carga. Al desactivarlo se restauran los estilos originales, incluidos los estilos inline de un constructor de páginas.

En móvil

Por debajo de 768px, el botón pasa a 44px (el tamaño de objetivo táctil del criterio WCAG 2.5.5) y se coloca a 14px de los bordes. El panel ocupa el ancho de la pantalla, hasta 320px.

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. imagen oculta a las tecnologías de apoyo, píxel de seguimiento o imagen 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, si es significativo.

Si ninguna de estas fuentes es fiable, la imagen no se modifica, en lugar de ocultarla por error a los lectores de pantalla con un alt vacío.

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.

Enlaces e iframes (WCAG 3.2.5, 4.1.2)

Los enlaces target=_blank reciben rel=noopener y un aria-label completado con «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 insertado al principio de la página, contorno de foco impuesto mediante :focus-visible. En el tema Classic, donde la etiqueta <main> también envuelve la cabecera y el pie, el enlace de salto apunta a la columna de contenido #content-wrapper. Si su tema ya incluye un enlace de salto, el módulo no añade otro.

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

El motor calcula la luminancia relativa de cada texto y de su fondo real, y oscurece o aclara progresivamente los colores por debajo del ratio exigido: 4,5, o 3 para texto grande (24px, o 18,66px en negrita). Se ejecuta en los tiempos muertos del navegador.

Los textos sobre una imagen, un degradado, un fondo semitransparente o dentro de un slider se omiten: su fondo real no puede calcularse y la corrección podría hacerlos menos legibles. Los textos desactivados también se omiten.

Contenido cargado después de la página

Las correcciones también se aplican al contenido insertado tras la carga: listados de los filtros por facetas, vista rápida, modal de añadir al carrito, scroll infinito. El alto contraste y el tamaño del texto se aplican ahí de la misma forma.

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 de su tienda (plantillas FR, EN, ES, DE, IT, NL, PL y PT 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 funciones de accesibilidad disponibles;
• el canal de comunicación que apunta a su formulario de contacto, en el idioma de la página;
• 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, solo si la página existe y está activa. 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: una confirmación le avisa de que sus cambios manuales se sustituirán y la página se actualiza sin cambiar su URL.

Estadísticas y prueba de diligencia

La tabla de la página de configuración muestra, en 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 borra 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 a 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 hay al menos una opción marcada, que no está en una página donde se oculta (móvil, carrito, checkout), y vacíe la caché de PrestaShop (Parámetros avanzados > Rendimiento).
• Una opción ha desaparecido para un visitante: se desmarcó en la configuración, lo que también retira la preferencia guardada.
• 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.
• Una zona sigue oscura en alto contraste: un elemento cambia de fondo más tarde mediante un script (por ejemplo, una cabecera fija que se oscurece al desplazarse). Desactive y reactive el modo, o informe del caso al soporte con la URL afectada.
• La instalación o actualización falla: suba la última versión del ZIP sobre el módulo, sin desinstalar. Las versiones anteriores a la 1.2.1 podían fallar con «Undefined array key DFACCESS_WIDGET_OPTIONS».
• No llegan estadísticas: compruebe que la recopilación está activada y que ningún cortafuegos filtra las peticiones al controlador track del módulo. Los contadores llegan por lotes, con un posible retraso de unos minutos.

Desinstalación

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