¿Te preocupa que la web pública o el comercio online no cumpla la normativa y tenga sanciones, exclusión de usuarios o pérdida de ventas? Esta guía ofrece soluciones prácticas y probadas para dominar la Accesibilidad web (WCAG) para webs públicas y comercios: checklist descargable, auditoría paso a paso, remediación por componentes, ejemplos de código y estimaciones de coste para España.
Puntos clave: lo que debes saber en 1 minuto
- Cumplimiento legal: Las administraciones públicas y muchos comercios deben cumplir criterios WCAG y normativa española como el Real Decreto 1112/2018 para declaraciones de accesibilidad.
- Auditoría mixta: Las pruebas automáticas detectan ~30-40% de los fallos; las pruebas manuales y con lector de pantalla son imprescindibles para AA/AAA.
- Remediación por prioridad: Empezar por navegación y formularios, luego por contenidos dinámicos (carrito, modales) y finalmente por microinteracciones.
- Coste estimado: Adaptaciones básicas para un comercio medio en España suelen oscilar entre €1.500 y €8.000, según complejidad y plataforma.
- Recursos prácticos: Plantillas de declaración de accesibilidad, snippets ARIA y checklist por componente para aplicar de forma inmediata.
Por qué muchas webs públicas y comercios no son accesibles
- Falta de conocimiento técnico sobre criterios WCAG aplicables a contenidos dinámicos y e-commerce.
- Dependencia excesiva de herramientas automáticas, sin pruebas con teclado ni lectores de pantalla.
- Plantillas o temas comerciales que no siguen buenas prácticas (etiquetado semántico, roles ARIA correctos).
- Contenido multimedia sin alternativas textuales o transcripciones y contrastes insuficientes.
- Flujos de compra y formularios complejos sin validación accesible ni anuncio de errores.
Diferencia entre WCAG y la normativa española sobre accesibilidad web
- Las WCAG (W3C) son pautas técnicas internacionales para la accesibilidad. Ver: W3C WCAG.
- La normativa española adapta e incorpora criterios WCAG y obliga a declaraciones formales: RD 1112/2018 regula la accesibilidad de sitios web y aplicaciones móviles del sector público.
- La UNE-EN 301 549 integra requisitos técnicos europeos aplicables a contratación pública: UNE-EN 301 549.
- Resumen práctico: WCAG = pautas técnicas; RD/UNE = marco legal y requisitos administrativos que exigen cumplimiento, declaración y revisión.
Auditoría de accesibilidad web paso a paso para webs públicas y comercios
Paso 1: definición del alcance y objetivos
- Identificar áreas críticas: portada, navegación, buscador, fichas de producto, proceso de compra, formularios, PDF/descargables y mapas.
- Establecer nivel objetivo: AA suele ser obligatorio para muchos organismos y recomendable para comercios.
Paso 2: análisis automático inicial
- Ejecutar escaneo con al menos dos herramientas: Axe, WAVE o Siteimprove.
- Exportar reportes y priorizar errores por impacto en usabilidad.
Paso 3: pruebas manuales y con asistentes
- Pruebas de teclado: navegar sin ratón, comprobar foco visible y flujo lógico.
- Lector de pantalla: pruebas con NVDA (Windows) y VoiceOver (macOS/iOS) para flujos clave (registro, carrito, pago).
- Revisión por agentes reales con discapacidades cuando sea posible.
- Clasificar problemas por prioridad (P1 urgente, P2 importante, P3 deseable).
- Estimar tiempos y costes por componente.
Paso 5: implementación y control de calidad
- Desplegar correcciones en entorno staging.
- Volver a auditar con pruebas automatizadas y manuales.
- Actualizar declaración de accesibilidad y registrar evidencias.
Paso 6: mantenimiento y gobernanza
- Integrar pruebas de accesibilidad en CI/CD y revisiones de diseño.
- Formar a equipos de contenido y desarrollo en pautas WCAG.
Guía simple de accesibilidad web (WCAG) para principiantes
- Usar HTML semántico: etiquetas
- Asegurar contraste mínimo 4.5:1 (texto normal) y 3:1 para texto grande.
- Proveer alternativas textuales: alt en imágenes, transcripciones y subtítulos en vídeo.
- Validar foco y orden de tabulación, utilizar tabindex solo cuando sea necesario.
- Declarar roles ARIA solo para mejorar cuando el HTML no sea suficiente.
Cómo resolver errores WCAG comunes en webs públicas y comercios
Errores frecuentes y solución práctica
- Imagen sin alt: añadir atributo alt descriptivo o alt="" si es decorativa.
- Formulario sin etiquetas vinculadas: asociar
- Mensajes de error no anunciados: usar aria-live="assertive" en contenedores de alertas.
- Contraste insuficiente: revisar color y tipografía; disponer versión con contraste alto.
- Elementos interactivos no focalizables: usar
- Ejemplo:
<div role="alert" aria-live="assertive">Por favor, complete el campo correo.</div>
Pruebas reproducibles (checklist mínimo)
- Navegar todo el proceso de compra con teclado.
- Realizar la compra simulada con lector de pantalla activado.
- Verificar todos los PDFs con OCR y marcadores accesibles.
- Ejecutar al menos 2 escaneos automáticos y documentar falsos positivos.
Mejores alternativas de software y herramientas de accesibilidad para comercios
- Herramientas de análisis: Deque Axe (axe), WAVE (WAVE), Siteimprove (Siteimprove).
- Plugins y plataformas: Shopify tiene apps de accesibilidad pero se recomienda auditoría manual; WooCommerce depende del tema y requiere revisión profunda.
- Soluciones de widget: existen widgets que mejoran la percepción (contraste, tamaños), pero no sustituyen el cumplimiento y pueden dar falsa sensación de conformidad.
- Plataformas de testing: BrowserStack + NVDA/VoiceOver para pruebas cross-browser y mobile.
Tabla comparativa: pruebas automáticas vs manuales (resumen rápido)
| Tipo de prueba |
Detecta |
Limitaciones |
| Pruebas automáticas |
Etiquetas faltantes, contrastes, estructura DOM |
Falsos positivos; no evalúa comprensión ni flujo dinámico |
| Pruebas manuales |
Flujos, experiencia con lector de pantalla y teclado |
Requiere tiempo y experiencia humana |
Estimación de precio para adaptación web WCAG en España
- Sitio informativo simple (página institucional): €800 - €2.500. Incluye análisis, correcciones de y declaración.
- Comercio electrónico medio (catálogo 500-2.000 productos): €1.500 - €8.000. Incluye auditoría completa, corrección de flujo de compra, PDFs y formación.
- Proyectos complejos con integración SaaS o aplicaciones web ricas: €8.000 - €25.000+, según alcance, integración de terceros y requisitos AA/AAA.
Factores que influyen en precio: número de plantillas, uso de frameworks JS (React/Vue), gestión de contenido (CMS), accesibilidad de recursos multimedia, necesidad de rediseño UX, certificaciones y pruebas de usuarios.
Checklist accionable y plantillas rápidas (lo esencial)
- Declaración de accesibilidad publicada en la web.
- Informe de auditoría con capturas y pasos reproducibles.
- Política de mantenimiento accesible y responsables asignados.
- Plantilla de informe de errores: componente, URL, criterio WCAG, propuesta de solución, prioridad, tiempo estimado.
Checklist rápido: adaptar una tienda online
1️⃣ Navegación
- Menú accesible por teclado
- Foco visible
2️⃣ Fichas de producto
- Alt descriptivo en imágenes
- Información no dependiente solo del color
3️⃣ Formularios
- Labels vinculadas
- Mensajes de error anunciados
4️⃣ Pasarela de pago
- Pruebas con lector de pantalla
- Foco en diálogos y modales
Ventajas, riesgos y errores comunes
Beneficios / cuándo aplicar ✅
- Mejora la conversión al reducir fricción en la compra.
- Evita sanciones y mejora reputación pública.
- Aumenta alcance a más clientes y usuarios.
Errores que debe evitar / riesgos ⚠️
- Depender únicamente de un widget de accesibilidad.
- No documentar pruebas ni actualizar la declaración oficial.
- Ignorar contenido subida por usuarios (fotos sin alt, comentarios multimedia).
Preguntas frecuentes
¿Qué criterios WCAG son obligatorios para una web pública?
La obligación legal en España se alinea con WCAG 2.1 nivel AA para la mayoría de contenidos; revisar el RD 1112/2018 para detalles de declaración.
¿Cuánto tiempo tarda una auditoría completa?
Depende del tamaño: una web institucional simple 3-7 días; un ecommerce mediano 2-4 semanas incluyendo pruebas manuales y rectificaciones.
Son complementarios para la usabilidad, pero no sustituyen la conformidad técnica con WCAG.
¿Necesita un comercio adaptarse también en móviles?
Sí. La accesibilidad móvil es parte integral; WCAG aplica a todos los dispositivos y se deben probar lectores y gestos táctiles.
¿Cómo justificar el coste ante dirección o ayuntamiento?
Presentar ROI: reducción de abandono de carrito, ampliación de audiencia y mitigación de riesgos legales con estimaciones comparativas.
¿Se pueden adaptar plantillas de CMS rápidamente?
Algunas adaptaciones son rápidas (mejorar etiquetas, contrastes), pero a menudo requiere revisar plantillas, componentes JS y pruebas de terceros.
Mínimo AA. Para organismos públicos AA es lo estándar; AAA se recomienda solo para contenidos especiales por coste y complejidad.
Tu próximo paso:
- Realizar un análisis rápido con una herramienta automática y pruebas de teclado en las páginas clave.
- Priorizar 10 fallos críticos y ejecutar correcciones en staging con evidencia de pruebas.
- Publicar declaración de accesibilidad y programar auditorías trimestrales.