Diseño web e IA
Accesibilidad web: qué exige la WCAG y cómo cumplirla paso a paso
Los 4 principios, la ley explicada sin jerga (con la exención de microempresas que una IA se saltó), una lista de 8 pasos y el test que pasamos a Notablia con Chrome.
La WCAG son las pautas internacionales del W3C que dicen cómo hacer una web accesible, y su nivel AA es el que piden las leyes. En la Unión Europea, la Ley Europea de Accesibilidad obliga desde el 28 de junio de 2025 a muchas webs que venden a consumidores, aunque deja fuera a las microempresas que prestan servicios.
Hemos revisado la ley española, las pautas del W3C y lo que responden ChatGPT, Perplexity y Gemini a una tienda online pequeña. Una de las tres se olvidó de la exención de microempresas. Y pasamos un test propio con Chrome a nuestra web, que tiene un 100 en accesibilidad en Lighthouse.
Aquí tienes qué es la WCAG, a quién obliga de verdad, 8 pasos para cumplir la WCAG 2.2 AA con herramientas gratis y lo que encontramos al probarlo en Notablia.
En esta guía
Qué es la WCAG y por qué importa en tu web
La WCAG es el estándar que define cuándo una web es accesible, con criterios que se pueden comprobar uno a uno.
Las WCAG (Web Content Accessibility Guidelines o Pautas de Accesibilidad para el Contenido Web) son un estándar del W3C con criterios comprobables para que personas con discapacidad visual, auditiva, motora o cognitiva puedan usar una web. Cada criterio tiene un nivel (A, AA o AAA) y las leyes suelen exigir el AA.
Lo que no es: no es una ley, aunque muchas leyes la citan. No es un plugin que se instala en cinco minutos. Y no es solo para personas ciegas. La accesibilidad web es parte del buen diseño web, igual que la velocidad o la claridad.
¿Qué diferencia hay entre WCAG 2.1 y WCAG 2.2?
La WCAG 2.2 incluye todo lo de la WCAG 2.1 y añade 9 criterios nuevos. La WCAG 2.2 se publicó el 5 de octubre de 2023. Según el resumen oficial del W3C sobre sus novedades, entre los criterios nuevos están el tamaño mínimo de los objetivos (24 por 24 píxeles CSS), que el foco no quede tapado y una autenticación sin acertijos. También elimina el criterio 4.1.1, ya obsoleto.
Los 4 principios de las pautas WCAG con ejemplos para tu negocio
Las pautas WCAG se ordenan en 4 principios: tu web tiene que ser perceptible, operable, comprensible y robusta.
| Principio | Qué significa | Ejemplo en una web de pyme |
|---|---|---|
| Perceptible | Todo se puede ver, oír o leer de otra forma | Texto alternativo en las fotos de producto y subtítulos en los vídeos |
| Operable | Todo funciona sin ratón | El menú y el carrito se usan solo con el teclado |
| Comprensible | Se entiende y se comporta como esperas | Los errores del formulario dicen qué falla y cómo arreglarlo |
| Robusto | Funciona con lectores de pantalla y otros programas | Botones de verdad en el HTML, no imágenes con un clic |
Cada principio se baja a criterios concretos con su nivel. Si te preguntas por la wcag aa, la tienes explicada en las preguntas frecuentes.
Ley Europea de Accesibilidad: a quién obliga la WCAG en España
La Ley Europea de Accesibilidad obliga a cumplir la WCAG a muchos servicios digitales para consumidores, con una exención clave para microempresas.
| Quién | Norma | Qué exige |
|---|---|---|
| Tiendas online y otros servicios a consumidores | Ley 11/2023 (Ley Europea de Accesibilidad), desde el 28 de junio de 2025 | Requisitos de accesibilidad; en la práctica, la norma técnica UNE-EN 301 549, basada en la WCAG |
| Microempresas que prestan servicios | Ley 11/2023, artículo 3.3 | Exentas de esos requisitos |
| Administraciones y sector público | Real Decreto 1112/2018 | Norma UNE-EN 301 549 (WCAG AA) y declaración de accesibilidad publicada |
Según el texto consolidado de la Ley 11/2023 en el BOE, los servicios de comercio electrónico entran en su ámbito (artículo 2) y las microempresas que presten servicios quedan exentas (artículo 3.3). Se considera microempresa la que tiene menos de 10 personas empleadas y no más de 2 millones de euros de facturación o de balance anual. Si estás cerca del límite o tienes dudas, consulta a un profesional: esta guía no es asesoramiento legal.
¿Qué es la declaración de accesibilidad?
Es una página donde explicas qué nivel de la WCAG cumples, qué partes todavía no y cómo pueden avisarte de un problema. Para el sector público es obligatoria por el Real Decreto 1112/2018. Para una empresa privada es una buena práctica que da confianza y te obliga a revisar la web cada cierto tiempo.
¿Y si vendo a Estados Unidos o Brasil?
Allí también hay obligaciones. En Estados Unidos, la ADA se aplica a los negocios abiertos al público y la WCAG es la referencia habitual. En Brasil, la Lei Brasileira de Inclusão obliga a los sitios de empresas con sede o representación en el país.
UNE-EN 301 549: qué es y qué cambia con la nueva versión
La EN 301 549 es la norma europea de requisitos de accesibilidad para productos y servicios digitales, y en España se publica como UNE-EN 301 549. Es la referencia técnica en la que se apoya la ley. Su capítulo web toma los criterios de la WCAG: la versión 3.2.1 remite a la WCAG 2.1 de nivel A y AA.
El 2 de septiembre de 2026 se publicó la versión 4.1.1, que sube esos requisitos web a la WCAG 2.2 de nivel A y AA. Ojo con el matiz: hasta que la Unión Europea la cite en su Diario Oficial, no da todavía la presunción de conformidad legal. Deque, una firma especializada en accesibilidad, calcula que esa cita llegará hacia finales de noviembre de 2026.
¿Qué haces tú? Tres cosas:
- Apunta a la WCAG 2.2 AA, como en los 8 pasos de abajo. Con eso cubres el capítulo web de las dos versiones.
- Revisa lo que no es web. La norma también cubre documentos descargables, como los PDF, y software. La WCAG 2.2 AA es necesaria, pero no suficiente.
- Mira qué norma cita tu declaración de accesibilidad y actualízala cuando la nueva sea la de referencia.
Cómo cumplir la WCAG 2.2 AA en tu web: 8 pasos con herramientas gratis
Para cumplir la WCAG 2.2 AA, combina un test de accesibilidad web automático con pruebas a mano en las páginas que más importan.
-
Elige las páginas clave
Portada, una ficha de producto o servicio, el carrito o el formulario de contacto y la página de pago. Ahí es donde una barrera te cuesta ventas.
-
Pasa un test automático
Abre Chrome, pulsa F12, entra en la pestaña Lighthouse y lanza el análisis con la categoría Accesibilidad. Compleméntalo con la extensión WAVE. Apunta los errores, pero no te quedes ahí.
-
Recorre la web solo con el teclado
Tab para avanzar, Mayúsculas y Tab para volver, Intro para pulsar. Tienes que ver siempre dónde estás (el foco) y poder llegar a todo, también al menú y al carrito.
-
Revisa el contraste de color
Texto normal, 4,5:1 como mínimo; texto grande e iconos, 3:1. Si tu color de marca no llega, crea una versión más oscura solo para texto.
-
Añade texto alternativo a las imágenes que informan
Fotos de producto, gráficos e iconos con función. Las decorativas, con alt vacío. Tienes el método en nuestra guía de texto alternativo.
-
Etiqueta formularios y errores
Cada campo con su etiqueta visible y cada error con un mensaje que diga qué falla. Nada de solo poner el borde en rojo.
-
Comprueba tamaño, zoom y móvil
Botones de 24 por 24 píxeles como mínimo o bien separados, y la web usable con el zoom al 200 % y en una pantalla de 320 píxeles de ancho.
-
Publica tu declaración de accesibilidad
Qué cumples, qué no, cuándo lo revisaste y un correo para avisar de barreras. Revísala cada 6 meses o con cada rediseño.
Si tu web está en un gestor de contenidos, revisa también la plantilla: muchos fallos vienen del tema, no de tus textos. Lo explicamos en qué es un CMS y cuál elegir. Y si vas a hacer una web nueva, pide la accesibilidad desde el principio, también si vas a crear tu página web con IA.
Actúa como auditor de accesibilidad. Te pego el HTML de esta sección de mi web: [pega el HTML]. Revísalo contra la WCAG 2.2 nivel AA y dame una tabla con: criterio que falla, por qué, cómo arreglarlo y el código corregido. No inventes problemas: si algo no se puede comprobar solo con el HTML, dímelo.
Escribe la declaración de accesibilidad de mi web [URL] en lenguaje claro: nivel que buscamos (WCAG 2.2 AA), partes que aún no cumplen [lista], fecha de la última revisión, cómo pueden avisarnos de una barrera y en qué plazo respondemos.
Lector de pantalla: cómo probar tu web con NVDA, VoiceOver o TalkBack
Un lector de pantalla lee en voz alta lo que hay en la pantalla, y probar tu web con uno destapa más fallos que cualquier herramienta automática. En la encuesta de WebAIM a usuarios de lectores, hecha en julio y agosto de 2026, el 55 % usaba JAWS como lector principal en ordenador y el 32,9 %, NVDA. En el móvil, el 72,2 % usaba VoiceOver y el 29,5 %, TalkBack (cada persona podía marcar más de uno).
| Lector | Dónde funciona | Coste |
|---|---|---|
| NVDA | Windows | Gratis |
| VoiceOver | Mac e iPhone | Ya viene en el aparato |
| TalkBack | Android | Ya viene en el aparato |
Una prueba de 10 minutos con NVDA: abre tu portada y, en modo navegación, pulsa H para saltar de título en título, K de enlace en enlace y F de campo en campo. Si los títulos no cuentan la página, si un enlace dice solo «Leer más» o si un campo no dice qué hay que escribir, ya tienes trabajo. En el móvil, activa VoiceOver o TalkBack en Ajustes, dentro de Accesibilidad.
JAWS es de pago, así que solo compensa probarlo si sabes que tu público lo usa.
Test de accesibilidad web: lo que encontramos en Notablia
Nuestro test de accesibilidad web confirmó lo básico, pero encontró fallos que un 100 en Lighthouse no enseña.
¿Sirven los widgets o plugins de accesibilidad?
Un widget que añade botones para agrandar la letra o cambiar colores no arregla el código que hay debajo: si un botón no tiene nombre o el formulario no tiene etiquetas, sigue igual. Puede ser un extra, nunca la solución.
Accesibilidad web y colores: cómo medir el contraste de tu paleta
La accesibilidad web empieza muchas veces por los colores: mide el contraste de cada color de marca sobre su fondo antes de usarlo en texto.
| Color de Notablia | Sobre blanco | ¿Vale para texto normal? |
|---|---|---|
| Tinta #14161C | 18,08:1 | Sí |
| Índigo #3D3AE0 | 7,29:1 | Sí |
| Violeta #7C3AED | 5,70:1 | Sí |
| Coral #FF5A36 | 3,10:1 | No: solo texto grande o decoración |
| Coral para texto #D93A16 | 4,60:1 | Sí, por eso existe |
Lo calculamos con la fórmula de luminancia de la WCAG. Haz lo mismo con tu marca en nuestro generador de paletas de colores.
Preguntas frecuentes sobre la WCAG y la accesibilidad web
¿Qué es WCAG 3?
WCAG 3 es la próxima generación de las pautas de accesibilidad del W3C, con una estructura y un sistema de puntuación nuevos. A fecha de octubre de 2026 sigue en desarrollo, así que la versión que debes usar como referencia es la WCAG 2.2, y la que citan muchas leyes es la 2.1 nivel AA. No esperes a ella para arreglar tu web: lo que cumples hoy con la 2.2 te seguirá sirviendo.
¿Qué significa a11y?
A11y es la forma abreviada de escribir accessibility en inglés: la a inicial, las 11 letras del medio y la y final. Se usa mucho en equipos de desarrollo, en GitHub y en redes, porque es corta y fácil de etiquetar. Cuando veas a11y en una herramienta, un curso o una oferta de trabajo, habla de accesibilidad digital. Es jerga técnica: en un texto para clientes, mejor escribir accesibilidad.
¿Qué es WAI-ARIA?
WAI-ARIA es una especificación del W3C que añade al HTML atributos para explicar a los lectores de pantalla qué es y en qué estado está un componente, por ejemplo un menú desplegable o una pestaña. Sirve para lo que el HTML normal no cubre. La primera regla de los propios autores es no usarla si existe un elemento HTML nativo que haga lo mismo: un botón de verdad es mejor que un div con role=button. Mal usada, empeora la accesibilidad en lugar de mejorarla.
¿Qué es la accesibilidad web?
La accesibilidad web es que cualquier persona pueda usar una web, también quien no ve, no oye, no puede usar el ratón o tiene dificultades para entender textos complejos. No solo ayuda a personas con discapacidad: también a quien usa el móvil a pleno sol, a personas mayores, a quien tiene un brazo escayolado o una conexión lenta. En la práctica se mide con la WCAG, y una web accesible suele ser también más rápida, más clara y mejor entendida por Google.
¿Qué es el contraste de color?
El contraste de color es la diferencia de luminosidad entre el texto y su fondo, y la WCAG lo mide con una proporción que va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). Para cumplir el nivel AA, el texto normal necesita al menos 4,5:1 y el texto grande, 3:1. No depende del tono, sino de lo claro u oscuro que es: un rojo intenso puede fallar sobre blanco y un azul oscuro, aprobar con nota.
¿Qué significa WCAG AA?
WCAG AA es el nivel intermedio de conformidad de las pautas, y el que exigen la mayoría de leyes y normas técnicas. Cada criterio de la WCAG tiene un nivel: A es lo mínimo imprescindible, AA añade lo que elimina las barreras más comunes (como el contraste de 4,5:1 o los subtítulos en directo) y AAA es el máximo, que casi nadie aplica a una web entera. Cumplir AA significa cumplir todos los criterios A y AA. Es el objetivo razonable para cualquier empresa.