Contactar

Diseño web y marketing
Diseño web y marketing
  • Inicio
  • Blog
  • Diseño web
  • Negocio y clientes
  • Noticias
  • Noticias de marketing digital
  • Publicidad y tráfico
  • Redes sociales y contenidos
  • SEO
  • Webs automáticas
  • Nosotros
  • Contactar
Buscar
  • Inicio
  • Blog
  • Diseño web
  • Negocio y clientes
  • Noticias
  • Noticias de marketing digital
  • Publicidad y tráfico
  • Redes sociales y contenidos
  • SEO
  • Webs automáticas
  • Nosotros
  • Contactar

Accesibilidad web (WCAG) para webs públicas y comercios

Actualizado en March 2026

Ejemplo visual de accesibilidad web wcag

¿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.

Índice

    Anuncio

    Puntos clave: lo que debes saber en 1 minuto

    • Cumplimiento legal: Las webs y aplicaciones del sector público deben cumplir los requisitos de accesibilidad y publicar una declaración de accesibilidad conforme a la normativa aplicable al sector público. Los servicios de comercio electrónico están sujetos a requisitos de accesibilidad conforme al Real Decreto 193/2023, con las excepciones legalmente previstas para determinados prestadores.
    • 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.
    Accesibilidad web (WCAG) para webs públicas y comercios

    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.

    Anuncio

    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 distingue entre el sector público y los servicios privados: la normativa de accesibilidad del sector público regula los sitios web, las aplicaciones móviles, la declaración de accesibilidad y el mecanismo de comunicación; el Real Decreto 193/2023 establece requisitos de accesibilidad para productos y servicios, incluido el comercio electrónico.
    • 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.

    Paso 4: elaboración de informe y plan de remediación

    • 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.

    Anuncio

    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

    Snippet ARIA útil (ejemplo de alerta de formulario)

    • 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

    Anuncio

    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 de remediación

    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

    Anuncio

    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 útiles los widgets de accesibilidad?

    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.

    ¿Qué nivel de conformidad debe buscar un comercio?

    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:

    1. Realizar un análisis rápido con una herramienta automática y pruebas de teclado en las páginas clave.
    2. Priorizar 10 fallos críticos y ejecutar correcciones en staging con evidencia de pruebas.
    3. Publicar declaración de accesibilidad y programar auditorías trimestrales.
    RESUMIR CON IA: Extrae lo importante

    Comparte este artículo:

    𝕏 X (Twitter) f Facebook in LinkedIn 🔥 Reddit 🐘 Mastodon 🦋 Bluesky 💬 WhatsApp 📱 Telegram 📧 Email
    • Accesibilidad WCAG en webs de servicios: evita sanciones
    • Web accesible para personas con discapacidad: guía España
    • Migración y SEO técnico a Shopify: guía práctica 2026
    • Cómo rentabilizar blogs de afiliados de tecnología locales
    Jesús Barrios

    Jesús Barrios

    Con más de 10 años de experiencia trabajando en diseño web y marketing digital, este autor ha ayudado a negocios y proyectos online a crecer, captar clientes y generar ingresos de forma sostenible. Su trabajo diario abarca desde la creación de páginas web optimizadas hasta estrategias de SEO, publicidad, redes sociales y automatización de sitios web. En Diseño web y marketing, comparte conocimientos prácticos, enfoques probados y soluciones reales basadas en la experiencia directa, con el objetivo de ayudar a emprendedores y empresas a mejorar su visibilidad online y convertir el tráfico en resultados.

    Publicado: 18 de ene. de 2026
    Actualizado: 24 de jul. de 2026
    Por Jesús Barrios

    En Redes sociales y contenidos.

    tags: Accesibilidad web (WCAG) para webs públicas y comercios accesibilidad web WCAG 2.1 2.2 auditoría accesibilidad adaptación ecommerce normativa accesibilidad España

    Aviso legal | Política de privacidad | Política de cookies
    Archivo de artículos

    Contactar

    Síguenos en LinkedIn

    © Diseño web y marketing. Todos los derechos reservados.