En Solucionex seguimos comprometidos con crear experiencias digitales accesibles para todos los usuarios. Hoy te presentamos un caso práctico de mejora en accesibilidad web aplicado sobre una instalación de PrestaShop, donde hemos optimizado la plantilla base para cumplir con las pautas WCAG 2.1.
📊 Resultados del informe de accesibilidad (Wave y PageSpeed)
Tras analizar la versión original del tema clásico de PrestaShop con la herramienta Wave, los resultados iniciales fueron los siguientes:
| Métrica | Valor inicial |
|---|---|
| ❌ Errores | 1 |
| ⚠️ Alertas | 30 |
| 🔴 Errores de contraste | 106 |
| ✅ Accesibilidad PageSpeed | 91 |
Después de aplicar las correcciones, el nuevo informe muestra una mejora total:
| Métrica | Valor final |
|---|---|
| ✅ Errores | 0 |
| ⚠️ Alertas | 20 |
| 🔴 Errores de contraste | 0 |
| ✅ Accesibilidad PageSpeed | 100 |
- Rendimiento: 97
- Accesibilidad: 100
- Buenas prácticas: 100
- SEO: 85
🔍 Principales correcciones realizadas
P0 – Crítico (impacto alto, corrección simple)
- 1.4.3 Contraste mínimo: se ajustaron los colores de texto gris (#6c757d) para cumplir la relación 4.5:1.
- 1.4.11 Contraste de componentes: se rediseñaron botones secundarios y elementos interactivos (hover/focus).
- 2.4.7 Foco visible: se mejoró la visibilidad del foco en todos los elementos navegables con teclado.
P1 – Alta prioridad
- 1.1.1 Texto alternativo: se revisaron los atributos
alten imágenes decorativas y banners con texto incrustado.
🧩 Nuevo tema: classic-accessibility
Se ha desarrollado un tema hijo llamado classic-accessibility, basado en la plantilla por defecto de PrestaShop, pero con accesibilidad aumentada:
- Contrastes optimizados.
- Foco visible y consistente.
- Mejora de etiquetas ARIA.
- Corrección de textos alternativos en módulos nativos.
⚙️ Si utilizas módulos como Banner o Slider, recuerda incluir siempre la descripción de la imagen para garantizar un atributo alt adecuado.
📦 Descarga la plantilla accesible
Puedes descargar la plantilla classic-accessibility desde nuestro repositorio oficial en GitHub:
👉 Enlace al repositorio GitHub
🔗 Recursos adicionales para mantener la accesibilidad al 100%
Si deseas maquetar nuevos componentes en tu tienda PrestaShop y mantener la accesibilidad al máximo nivel, en el blog de Solucionex encontrarás otros artículos donde explicamos cómo crear:
- Sliders accesibles con Boostrap o Tailwind
- Menús accesibles con Bootstrap o Tailwind
- Breadcrumbs accesibles con Boostrap o Tailwind (próximamente)
- Galerías accesibles con Boostrap o Tailwind (próximamente)
- Acordeones accesibles con Boostrap o Tailwind (próximamente)
- Tablas accesibles con Boostrap o Tailwind (próximamente)
- Alertas accesibles con Boostrap o Tailwind (próximamente)
- Tabs accesibles con Boostrap o Tailwind (próximamente)
- Formularios accesibles con Boostrap o Tailwind (próximamente)
- Modales accesibles con Boostrap o Tailwind (próximamente)
Estos recursos te ayudarán a extender el diseño de tu tienda sin perder el estándar de accesibilidad web al 100%.
🚀 Conclusión
Con pequeñas mejoras de diseño y marcado, hemos logrado que una tienda PrestaShop estándar alcance una accesibilidad del 100% según PageSpeed y sin errores en Wave.
Esto demuestra que la accesibilidad web no solo mejora la experiencia del usuario, sino también el rendimiento y el SEO de la tienda.
