En las lecciones anteriores hemos visto que casi todas las leyes de accesibilidad del mundo remiten a un mismo estándar técnico: WCAG. Ha llegado el momento de abrirlo y entender cómo está construido por dentro. En esta lección conocerás qué es WCAG y quién lo publica, su estructura jerárquica (los 4 principios POUR → pautas → criterios de conformidad → técnicas), los tres niveles de conformidad A / AA / AAA y por qué AA es el objetivo habitual, las diferencias entre las versiones 2.0, 2.1 y 2.2 (y qué será WCAG 3.0), y cómo leer la nomenclatura de un criterio como el famoso "1.1.1". Con esto cerramos el módulo introductorio: tendrás el mapa mental completo para adentrarte en los detalles a partir del módulo siguiente.
Contenido
- Qué es WCAG y quién lo publica
- La estructura jerárquica: principios → pautas → criterios → técnicas
- Los niveles de conformidad A, AA y AAA
- Versiones de WCAG: 2.0, 2.1, 2.2 y el futuro 3.0
- Cómo leer un criterio de conformidad (nomenclatura 1.1.1)
- Qué es WCAG y quién lo publica
WCAG son las siglas de Web Content Accessibility Guidelines ("Pautas de Accesibilidad para el Contenido Web"). Es el estándar internacional que define, de forma concreta y verificable, qué debe cumplir un contenido web para ser accesible.
Lo publica el W3C (World Wide Web Consortium), el organismo que estandariza la web, a través de su iniciativa WAI (Web Accessibility Initiative). Que sea un estándar del W3C —y no de un fabricante— es lo que le da autoridad universal y explica por qué las leyes lo adoptan como referencia (lo vimos en la lección 01-03).
La idea central de WCAG es transformar un concepto abstracto ("que sea accesible") en una lista de requisitos comprobables (los criterios de conformidad). Así, la accesibilidad deja de ser una opinión y pasa a poder auditarse: o cumples un criterio o no lo cumples.
- La estructura jerárquica: principios → pautas → criterios → técnicas
WCAG se organiza como un árbol de cuatro niveles. Comprender esta jerarquía es lo más importante de la lección, porque es el "esqueleto" sobre el que se cuelga todo lo demás.
graph TD
A["4 Principios (POUR)"] --> B["Pautas (Guidelines)"]
B --> C["Criterios de Conformidad (Success Criteria)"]
C --> D["Técnicas (Techniques)"]
A -. "Perceptible · Operable · Comprensible · Robusto" .- A1[" "]
B -. "Objetivos generales, p. ej. Alternativas textuales" .- B1[" "]
C -. "Requisitos verificables con nivel A/AA/AAA (1.1.1)" .- C1[" "]
D -. "Cómo cumplirlos: HTML, ARIA, CSS..." .- D1[" "]
Nivel a nivel:
- Principios (4). Son los cimientos, resumidos en el acrónimo POUR: Perceptible, Operable, Understandable (Comprensible) y Robust (Robusto). Todo criterio pertenece a uno de ellos. En esta lección los usamos solo como marco estructural; se desarrollan en profundidad en el módulo 3.
- Pautas (Guidelines). Bajo cada principio hay pautas: objetivos generales, no verificables por sí mismos. Ejemplo: bajo Perceptible está la pauta 1.1 "Alternativas textuales".
- Criterios de Conformidad (Success Criteria). Es el corazón práctico de WCAG: requisitos concretos y comprobables, cada uno con un nivel (A, AA o AAA). Cuando alguien dice "el sitio cumple WCAG AA", se refiere a que satisface todos los criterios de nivel A y AA. Ejemplo: el criterio 1.1.1 "Contenido no textual".
- Técnicas (Techniques). Son ejemplos orientativos de cómo cumplir un criterio (usar
alt, aplicar un rol ARIA, etc.). No son obligatorias: puedes cumplir un criterio con otra técnica. Son consejos de implementación, y las veremos aplicadas en los módulos 4 y 5.
Un matiz clave para principiantes: lo que auditas y lo que la ley exige son los criterios, no las técnicas. Las técnicas te dicen "una forma de conseguirlo"; el criterio te dice "qué hay que conseguir".
- Los niveles de conformidad A, AA y AAA
Cada criterio de conformidad está etiquetado con uno de tres niveles, que expresan cuán exigente e imprescindible es. Son acumulativos: AA incluye todo A, y AAA incluye todo A y AA.
| Nivel | Qué representa | Ejemplos ilustrativos de exigencia | ¿Objetivo típico? |
|---|---|---|---|
| A | Mínimo imprescindible. Sin esto, hay grupos que directamente no pueden usar el contenido. | Que las imágenes tengan alternativa textual; que todo funcione con teclado. | Insuficiente por sí solo. |
| AA | Nivel de accesibilidad razonable y esperado. Elimina barreras importantes sin exigir lo extremo. | Contraste de texto suficiente (p. ej. ratio 4.5:1); subtítulos en vídeos pregrabados. | Sí: es el objetivo estándar. |
| AAA | Nivel más alto. Deseable, pero a menudo no alcanzable para todo un sitio. | Contraste reforzado (7:1); lengua de signos para todo el vídeo pregrabado. | Solo para partes o sitios muy especializados. |
¿Por qué AA es el objetivo habitual?
Por dos razones que ya has visto asomar en la lección 01-03:
- Es lo que exige la ley. Prácticamente todas las normativas (EN 301 549, EAA, RD 1112/2018, Section 508…) piden nivel AA.
- Es el equilibrio sensato. El nivel A deja fuera a demasiada gente; el AAA es tan estricto que el propio W3C reconoce que "no se recomienda exigirlo como política general para sitios enteros" (algunos criterios AAA son incompatibles con ciertos tipos de contenido). AA es el punto en el que se elimina la gran mayoría de barreras con un esfuerzo asumible.
Para Cursalia, por tanto, la meta que fijaremos en todo el curso es WCAG 2.1 nivel AA, aspirando puntualmente a criterios AAA donde sea fácil y aporte valor (por ejemplo, más contraste del mínimo en la paleta de marca).
- Versiones de WCAG: 2.0, 2.1, 2.2 y el futuro 3.0
WCAG ha ido evolucionando. Lo tranquilizador es que las versiones 2.x son retrocompatibles: cada nueva versión añade criterios, no elimina los anteriores. Si cumples 2.2, cumples 2.1 y 2.0.
| Versión | Año (aprox.) | Qué aportó a grandes rasgos |
|---|---|---|
| WCAG 2.0 | 2008 | La base moderna: introdujo los principios POUR y el modelo de criterios A/AA/AAA. Sigue siendo el núcleo. |
| WCAG 2.1 | 2018 | Añadió criterios para móvil/táctil, baja visión y discapacidades cognitivas (p. ej. orientación de pantalla, tamaño de objetivos táctiles, contenido al recibir foco/hover). Es la versión que exige la mayoría de leyes hoy. |
| WCAG 2.2 | 2023 | Añadió más criterios de foco visible mínimo, objetivos táctiles, ayuda consistente y autenticación accesible. Superconjunto de 2.1. |
| WCAG 3.0 | Futuro (borrador) | Reescritura de fondo: nuevo modelo de puntuación (no solo "cumple/no cumple"), otra nomenclatura. Aún en desarrollo, no usable para conformidad. |
Como referencia práctica: hoy, apunta a WCAG 2.1 AA (lo que piden las leyes vigentes) y, si puedes, incorpora las novedades de 2.2. WCAG 3.0 es el futuro y todavía no debe usarse como objetivo de cumplimiento; hablaremos de él y de otras tendencias en el módulo 7.
- Cómo leer un criterio de conformidad (nomenclatura 1.1.1)
Los criterios se identifican con tres números separados por puntos, y ese código es un "GPS" dentro de la jerarquía. Tomemos el más famoso, el 1.1.1 "Contenido no textual":
Criterio 1.1.1 → Contenido no textual (Nivel A)
│ │ │
│ │ └── Criterio nº 1 dentro de la pauta
│ └──── Pauta nº 1 dentro del principio
└────── Principio nº 1 (1 = Perceptible)Es decir:
- El primer número es el principio: 1 = Perceptible, 2 = Operable, 3 = Comprensible, 4 = Robusto.
- El segundo número es la pauta dentro de ese principio (1.1 = "Alternativas textuales").
- El tercer número es el criterio concreto dentro de esa pauta.
- Aparte, cada criterio lleva su nivel (A / AA / AAA).
Algunos ejemplos que te encontrarás una y otra vez a lo largo del curso, para que la nomenclatura te resulte familiar:
| Criterio | Nombre | Principio | Nivel |
|---|---|---|---|
| 1.1.1 | Contenido no textual (texto alternativo) | 1 · Perceptible | A |
| 1.4.3 | Contraste (mínimo) | 1 · Perceptible | AA |
| 2.1.1 | Teclado | 2 · Operable | A |
| 2.4.7 | Foco visible | 2 · Operable | AA |
| 3.3.2 | Etiquetas o instrucciones (formularios) | 3 · Comprensible | A |
| 4.1.2 | Nombre, función, valor (ARIA) | 4 · Robusto | A |
Con solo mirar el número ya sabes de qué "familia" es un requisito. Por ejemplo, cuando en el módulo 4 auditemos el formulario de matrícula de Cursalia y hablemos del criterio 3.3.2, el "3" te dirá al instante que es una cuestión de comprensión (etiquetas e instrucciones claras), no de percepción ni de robustez.
Errores Comunes y Consejos
- Confundir criterios con técnicas. Lo obligatorio y auditable son los criterios; las técnicas son solo una forma de cumplirlos. No estás atado a una técnica concreta.
- Aspirar a AAA para todo el sitio. Suele ser inalcanzable y no lo pide casi ninguna ley. El objetivo es AA; usa AAA de forma puntual y voluntaria.
- Pensar que las versiones se sustituyen. No: 2.1 y 2.2 añaden criterios sobre 2.0. Cumplir la más nueva implica cumplir las anteriores.
- Usar WCAG 3.0 como objetivo hoy. Todavía es un borrador; no sirve para declarar conformidad.
- Consejo: memoriza que el primer dígito del criterio = principio POUR (1-P, 2-O, 3-U, 4-R). Es la forma más rápida de orientarte al leer un informe de accesibilidad (que aprenderás a interpretar en el módulo 6).
Ejercicios
Ejercicio 1. Ordena de mayor a menor jerarquía estos cuatro elementos de WCAG y define cada uno en una frase: criterio de conformidad, principio, técnica, pauta.
Ejercicio 2. Dado el criterio 2.1.1 "Teclado" (Nivel A), responde: (a) ¿a qué principio POUR pertenece? (b) ¿qué significa su nivel A? (c) ¿por qué crees que el requisito "que todo funcione con teclado" es de nivel A y no AAA?
Ejercicio 3. El equipo de Cursalia dice: "Vamos a certificar toda la plataforma en WCAG 3.0 AAA para ir sobre seguro". Señala dos problemas de esa afirmación.
Soluciones
Solución 1. De mayor a menor: Principio (uno de los 4 cimientos POUR) → Pauta (objetivo general no verificable dentro de un principio) → Criterio de conformidad (requisito concreto y comprobable, con nivel A/AA/AAA) → Técnica (forma orientativa y no obligatoria de cumplir un criterio).
Solución 2. (a) Pertenece al principio 2 · Operable (lo indica el primer dígito). (b) Nivel A = requisito mínimo imprescindible; sin él, hay usuarios que directamente no pueden usar el contenido. (c) Porque quien no puede usar el ratón (por discapacidad motriz) quedaría completamente excluido si algo solo funciona con clic: es una barrera total, no un refinamiento, y por eso se sitúa en el nivel más básico (A).
Solución 3. Dos problemas: (1) WCAG 3.0 aún es un borrador y no puede usarse para declarar conformidad; la referencia vigente es WCAG 2.1 (o 2.2) AA. (2) El nivel AAA no se recomienda como objetivo para un sitio entero (el propio W3C lo desaconseja) y suele ser inalcanzable; lo exigible y sensato es AA.
Conclusión
Hemos abierto WCAG y comprendido su anatomía: es el estándar del W3C/WAI que convierte "ser accesible" en criterios verificables, organizados en una jerarquía de 4 principios POUR → pautas → criterios → técnicas. Sabemos que existen tres niveles (A, AA, AAA) y por qué AA es el objetivo habitual —el que fijamos para Cursalia—, distinguimos las versiones 2.0/2.1/2.2 (con 3.0 en el horizonte) y ya sabemos leer la nomenclatura de un criterio como 1.1.1, cuyo primer dígito nos revela a qué principio pertenece.
Con esto cerramos el Módulo 1: Introducción a la Accesibilidad Web. Ya tienes el mapa completo: qué es la accesibilidad, por qué importa, qué leyes la exigen y cómo se estructura el estándar que las sustenta. Sin embargo, para aplicar bien WCAG hace falta un paso previo imprescindible: entender a las personas para las que diseñamos. En el Módulo 2: Comprensión de Discapacidades y Tecnologías de Asistencia conoceremos los tipos de discapacidad, las tecnologías de asistencia (como los lectores de pantalla) y cómo las personas con discapacidad usan realmente la web. Ese conocimiento dará sentido y propósito a cada criterio técnico que implementemos después.
Curso de Accesibilidad Web
Módulo 1: Introducción a la Accesibilidad Web
- ¿Qué es la Accesibilidad Web?
- Importancia de la Accesibilidad Web
- Visión General de las Leyes y Normas de Accesibilidad
- Introducción a WCAG
Módulo 2: Comprensión de Discapacidades y Tecnologías de Asistencia
- Tipos de Discapacidades
- Visión General de Tecnologías de Asistencia
- Cómo las Personas con Discapacidades Usan la Web
Módulo 3: Principios del Diseño Accesible
- Perceptible: Hacer el Contenido Disponible a los Sentidos
- Operable: Interfaz de Usuario y Navegación
- Comprensible: Información y Operación
- Robusto: Compatibilidad con Tecnologías Actuales y Futuras
Módulo 4: Implementación de Accesibilidad en HTML y CSS
- HTML Semántico
- Formularios Accesibles
- Uso de Roles y Propiedades ARIA
- Contraste de Color y Redimensionamiento de Texto
Módulo 5: Accesibilidad en JavaScript y Multimedia
- Creación de Widgets de JavaScript Accesibles
- Accesibilidad del Teclado
- Contenido de Video y Audio Accesible
- Proporcionar Alternativas de Texto para Imágenes
Módulo 6: Pruebas y Evaluación de la Accesibilidad
- Técnicas de Pruebas Manuales
- Herramientas de Pruebas Automatizadas
- Pruebas de Usuario con Tecnologías de Asistencia
- Interpretación de Informes de Accesibilidad
