WCAG 2.1

Definición Técnica

WCAG 2.1 (Web Content Accessibility Guidelines 2.1) es un estándar internacional de accesibilidad web publicado por el W3C (World Wide Web Consortium) en junio de 2018. Es una extensión de WCAG 2.0 que mantiene todos los criterios de la versión 2.0 y añade 17 nuevos criterios de éxito para abordar necesidades de accesibilidad en dispositivos móviles, personas con baja visión y discapacidades cognitivas.

Estructura de WCAG 2.1

Principios Fundamentales (POUR)

WCAG 2.1 se organiza en cuatro principios:

1. Perceptible: La información debe ser presentada de manera que los usuarios puedan percibirla
2. Operable: Los componentes de la interfaz deben ser operables
3. Comprensible: La información y el funcionamiento deben ser comprensibles
4. Robusto: El contenido debe ser lo suficientemente robusto para ser interpretado por diferentes agentes de usuario

Niveles de Conformidad

• Nivel A: Requisitos mínimos, esenciales para accesibilidad básica
• Nivel AA: Requisitos recomendados, estándar para la mayoría de sitios web
• Nivel AAA: Requisitos óptimos, más estrictos y difíciles de cumplir completamente

Criterios de Éxito

WCAG 2.1 contiene 78 criterios de éxito en total (61 de WCAG 2.0 + 17 nuevos):

Nuevos Criterios en WCAG 2.1

Nivel A:

• 1.3.4 Orientación (nuevo)
• 1.4.10 Reflow (nuevo)
• 1.4.11 Contraste no textual (nuevo)
• 1.4.12 Espaciado de texto (nuevo)
• 1.4.13 Contenido al pasar el cursor o al enfocar (nuevo)
• 2.1.4 Atajos de teclado de caracteres (nuevo)
• 2.5.1 Gestos de puntero (nuevo)
• 2.5.2 Cancelación de puntero (nuevo)
• 2.5.3 Etiqueta en el nombre (nuevo)
• 2.5.4 Activación por movimiento (nuevo)

Nivel AA:

• 2.4.11 Focus no oscurecido (nuevo)
• 2.4.12 Foco no oculto (nuevo)
• 2.5.5 Tamaño de objetivo (nuevo)
• 2.5.6 Mecanismos de entrada concurrentes (nuevo)
• 4.1.3 Mensajes de estado (nuevo)

Mejoras Respecto a WCAG 2.0

Dispositivos Móviles

• Orientación: No restringir la orientación del dispositivo
• Tamaño de objetivo: Áreas táctiles mínimas de 44x44px
• Gestos: Alternativas para gestos complejos

Baja Visión

• Reflow: Contenido adaptable sin scroll horizontal hasta 320px
• Espaciado de texto: Permitir ajustes de espaciado
• Contraste no textual: Ratios mínimos para iconos y elementos UI

Discapacidad Cognitiva

• Mensajes de estado: Identificación clara de cambios
• Contenido al pasar el cursor: No ocultar información importante
• Tiempo límite: Opciones para extender o desactivar

Implementación Práctica

Ejemplo: Criterio 1.4.10 Reflow

/* ✅ Correcto: Contenido que se adapta sin scroll horizontal */
.container {
  max-width: 100%;
  overflow-x: auto; /* Solo si es necesario */
}

/* ❌ Incorrecto: Ancho fijo que causa scroll horizontal */
.container {
  width: 1200px; /* Fijo, no se adapta */
}

Ejemplo: Criterio 2.5.5 Tamaño de objetivo

<!-- ✅ Correcto: Botón con tamaño mínimo 44x44px -->
<button style="min-width: 44px; min-height: 44px; padding: 12px;">
  Enviar
</button>

<!-- ❌ Incorrecto: Botón muy pequeño -->
<button style="width: 20px; height: 20px;">
  ×
</button>

Relación con Legislación

WCAG 2.1 Nivel AA es el estándar requerido por:

• Ley Europea de Accesibilidad (EAA): Obligatoria desde 2025
• EN 301 549: Estándar europeo basado en WCAG 2.1
• Section 508: Actualizado para requerir WCAG 2.1 AA
• Directiva Europea de Accesibilidad Web: WCAG 2.1 Nivel AA

Errores Comunes

1. Asumir que WCAG 2.0 es suficiente: WCAG 2.1 es la versión actual
2. Ignorar los nuevos criterios móviles: Críticos para accesibilidad moderna
3. No probar en dispositivos reales: Los nuevos criterios requieren testing móvil
4. Confundir niveles: AA es el estándar recomendado, no A

Herramientas de Validación

• axe DevTools: Valida criterios WCAG 2.1
• WAVE: Evaluador basado en WCAG 2.1
• Lighthouse: Auditoría incluyendo WCAG 2.1
• Pa11y: Testing automatizado WCAG 2.1

Referencias

• WCAG 2.1 Guidelines
• What's New in WCAG 2.1
• WCAG 2.1 Support Materials

Términos Relacionados

• WCAG 2.0
• WCAG 2.2
• Principios POUR
• Conformidad
• Nivel AA
• Criterio de éxito