Hub

Wcag Compliance Hub

9 min de lectura
Ver contenido

Hub de Cumplimiento WCAG 2.2: Guía Completa de Accesibilidad Web

Introducción

La accesibilidad web asegura que los sitios web y aplicaciones puedan ser utilizados por todos, incluyendo personas con discapacidades. Las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2 son el estándar internacional para accesibilidad web, proporcionando un marco completo para hacer el contenido web perceptible, operable, comprensible y robusto.

Más allá de la responsabilidad ética, el cumplimiento de WCAG es cada vez más un requisito legal en muchas jurisdicciones y proporciona beneficios significativos de SEO—los sitios web accesibles tienden a posicionar mejor porque tienen mejor estructura, contenido más claro y mejor experiencia de usuario para todos los visitantes.

Esta página hub reúne todos los recursos para lograr y mantener el cumplimiento de WCAG 2.2.

Por Qué Importa el Cumplimiento de WCAG

El Caso de Negocio

Impacto de la Accesibilidad:
┌─────────────────────────────────────────────────────────┐
│ 15% de la población mundial tiene alguna discapacidad  │
│ Más de 1 billón de personas se benefician              │
│ $8 trillones en poder adquisitivo anual                │
│ 71% de usuarios discapacitados abandonan sitios        │
└─────────────────────────────────────────────────────────┘

Beneficios Clave

Beneficio Impacto
Cumplimiento Legal Evitar demandas y penalidades regulatorias
Mayor Audiencia Alcanzar 15%+ más usuarios potenciales
Mejor SEO Los motores de búsqueda favorecen sitios accesibles
Mejor UX Beneficia a todos los usuarios
Reputación de Marca Demuestra responsabilidad corporativa

Requisitos Legales

  • ADA (EEUU): Ley de Americanos con Discapacidades
  • Section 508 (EEUU): Requisitos federales de accesibilidad
  • EU Accessibility Act: Directiva de la Unión Europea
  • Ley 20.422 (Chile): Ley de Igualdad de Oportunidades
  • EN 301 549 (UE): Estándar europeo de accesibilidad

Estructura de WCAG 2.2

Los Cuatro Principios (POUR)

WCAG se construye alrededor de cuatro principios fundamentales:

PERCEPTIBLE
├── Los usuarios deben poder percibir la información
├── El contenido debe ser presentable de formas accesibles
└── Ejemplos: Texto alternativo, subtítulos, contraste

OPERABLE
├── Los usuarios deben poder operar la interfaz
├── La navegación debe ser accesible por todos los métodos
└── Ejemplos: Acceso por teclado, sin límites de tiempo

COMPRENSIBLE
├── Los usuarios deben entender la información e interfaz
├── El contenido debe ser legible y predecible
└── Ejemplos: Etiquetas claras, identificación de errores

ROBUSTO
├── El contenido debe ser robusto para varias tecnologías
├── Debe funcionar con tecnologías de asistencia
└── Ejemplos: HTML válido, compatibilidad ARIA

Niveles de Conformidad

WCAG tiene tres niveles de conformidad:

Nivel Significado Requisitos
Nivel A Accesibilidad mínima Requisitos esenciales
Nivel AA Accesibilidad aceptable Estándar para mayoría de leyes
Nivel AAA Accesibilidad óptima Estándar más alto

Recomendación: Apuntar a Nivel AA como estándar para la mayoría de sitios web—equilibra accesibilidad con implementación práctica.

Criterios de Éxito por Principio

Principio 1: Perceptible (29 criterios)

Criterios clave:

  • 1.1.1 Contenido No Textual (A): Texto alternativo para imágenes
  • 1.3.1 Información y Relaciones (A): Estructura semántica
  • 1.4.3 Contraste Mínimo (AA): Contraste de texto 4.5:1
  • 1.4.11 Contraste No Textual (AA): Contraste UI 3:1
  • 1.4.13 Contenido en Hover/Focus (AA): Overlays descartables

Principio 2: Operable (29 criterios)

Criterios clave:

  • 2.1.1 Teclado (A): Toda funcionalidad vía teclado
  • 2.4.1 Saltar Bloques (A): Enlaces para saltar navegación
  • 2.4.4 Propósito del Enlace (A): Texto de enlace descriptivo
  • 2.4.7 Foco Visible (AA): Indicadores de foco visibles
  • 2.5.5 Tamaño del Objetivo (AAA): Mínimo táctil 44×44px

Principio 3: Comprensible (17 criterios)

Criterios clave:

  • 3.1.1 Idioma de la Página (A): Atributo HTML lang
  • 3.2.1 Al Recibir Foco (A): Sin cambios inesperados
  • 3.3.1 Identificación de Errores (A): Mensajes de error claros
  • 3.3.2 Etiquetas o Instrucciones (A): Etiquetas de formulario

Principio 4: Robusto (3 criterios)

Criterios clave:

  • 4.1.1 Análisis (A): HTML válido (obsoleto en 2.2)
  • 4.1.2 Nombre, Rol, Valor (A): Componentes accesibles
  • 4.1.3 Mensajes de Estado (AA): Anunciar cambios de estado

Hoja de Ruta de Implementación

Fase 1: Victorias Rápidas (Semana 1-2)

Enfócate en correcciones de alto impacto y bajo esfuerzo:

  1. Agregar texto alternativo a todas las imágenes

    <img src="producto.jpg" alt="Zapatillas running azules, talla 42">

  2. Corregir problemas de contraste de color

    • Texto: mínimo 4.5:1
    • Texto grande: mínimo 3:1

  3. Agregar atributo HTML lang

    <html lang="es">

  4. Asegurar etiquetas de formulario

    <label for="email">Correo Electrónico</label>
<input type="email" id="email" name="email">

  5. Agregar enlace de salto

    <a href="#main" class="skip-link">Saltar al contenido principal</a>

Fase 2: Mejoras Estructurales (Semana 3-4)

  1. Implementar HTML semántico

    <header>...</header>
<nav>...</nav>
<main>
  <article>
    <h1>...</h1>
    <section>...</section>
  </article>
</main>
<footer>...</footer>

  2. Corregir jerarquía de encabezados

    • Un H1 por página
    • Encabezados secuenciales (sin saltar niveles)

  3. Agregar landmarks ARIA

    <nav aria-label="Navegación principal">...</nav>
<main aria-label="Contenido principal">...</main>

  4. Implementar gestión de foco

    :focus {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}

Fase 3: Elementos Interactivos (Semana 5-6)

  1. Navegación por teclado

    • Todos los elementos interactivos enfocables
    • Orden de tab lógico
    • Sin trampas de teclado

  2. Accesibilidad de formularios

    • Identificación de errores
    • Indicadores de campos requeridos
    • Mensajes de validación de entrada

  3. Componentes personalizados

    • Roles ARIA apropiados
    • Soporte de teclado
    • Gestión de foco

Fase 4: Media y Avanzado (Semana 7-8)

  1. Subtítulos de video

    <video>
  <track kind="captions" src="subtitulos.vtt" srclang="es">
</video>

  2. Transcripciones de audio

  3. Imágenes complejas

    • Gráficos con tablas de datos
    • Infografías con descripciones

  4. Consideraciones de movimiento

    @media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

Pruebas de Cumplimiento WCAG

Herramientas de Pruebas Automatizadas

Herramienta Tipo Mejor Para
axe DevTools Extensión de navegador Escaneos rápidos
WAVE Extensión de navegador Feedback visual
Lighthouse Chrome DevTools Rendimiento + a11y
Pa11y Herramienta CLI Integración CI/CD
axe-core Paquete npm Testing automatizado

Lista de Verificación Manual

Pruebas de Teclado:

  • [ ] Navegar toda la página con Tab
  • [ ] Usar Enter/Espacio para activar
  • [ ] Escape para cerrar modales
  • [ ] Sin trampas de foco

Pruebas con Lector de Pantalla:

  • [ ] Probar con NVDA (Windows)
  • [ ] Probar con VoiceOver (Mac/iOS)
  • [ ] Probar con TalkBack (Android)

Pruebas Visuales:

  • [ ] Zoom al 200%
  • [ ] Probar modo alto contraste
  • [ ] Verificar con simuladores de daltonismo

Ejemplo de Código de Pruebas

// Usando axe-core para testing automatizado
const { AxeBuilder } = require('@axe-core/playwright');

test('no debe tener violaciones de accesibilidad', async ({ page }) => {
  await page.goto('/');

  const results = await new AxeBuilder({ page })
    .withTags(['wcag2a', 'wcag2aa', 'wcag22aa'])
    .analyze();

  expect(results.violations).toEqual([]);
});

Violaciones Comunes de WCAG

Top 10 Problemas Más Comunes

  1. Falta texto alternativo (1.1.1)

    • 58% de imágenes carecen de alt text apropiado

  2. Bajo contraste de color (1.4.3)

    • Texto gris claro sobre fondos blancos

  3. Falta etiquetas de formulario (1.3.1, 3.3.2)

    • Texto placeholder no es una etiqueta

  4. Falta idioma del documento (3.1.1)

    • Sin <html lang="es">

  5. Enlaces vacíos (2.4.4)

    • Enlaces sin texto o aria-label

  6. Falta indicadores de foco (2.4.7)

    • outline: none sin alternativa

  7. Estructura de encabezados incorrecta (1.3.1)

    • Saltar niveles de encabezado

  8. Inaccesible por teclado (2.1.1)

    • Controles personalizados no enfocables

  9. Falta enlaces de salto (2.4.1)

    • Sin forma de saltar navegación

  10. Enlaces no descriptivos (2.4.4)

    • “Haz clic aquí” o “Leer más”

Correcciones Rápidas

<!-- Mal: Sin alt -->
<img src="foto.jpg">

<!-- Bien: Alt descriptivo -->
<img src="foto.jpg" alt="Reunión de equipo en sala de conferencias">

<!-- Mal: Placeholder como etiqueta -->
<input placeholder="Email">

<!-- Bien: Etiqueta apropiada -->
<label for="email">Correo Electrónico</label>
<input type="email" id="email">

<!-- Mal: Enlace no descriptivo -->
<a href="/informe.pdf">Haz clic aquí</a>

<!-- Bien: Enlace descriptivo -->
<a href="/informe.pdf">Descargar Informe Financiero Q4 (PDF)</a>

Nuevos Criterios de Éxito de WCAG 2.2

WCAG 2.2 (publicado 2023) agrega 9 nuevos criterios de éxito:

Nivel A (Nuevos)

  • 2.4.11 Foco No Oscurecido (Mínimo): Elemento enfocado debe ser al menos parcialmente visible
  • 3.2.6 Ayuda Consistente: Mecanismos de ayuda en ubicación consistente
  • 3.3.7 Entrada Redundante: No requerir reingreso de misma información

Nivel AA (Nuevos)

  • 2.4.12 Foco No Oscurecido (Mejorado): Elemento enfocado completamente visible
  • 2.4.13 Apariencia del Foco: Requisitos mejorados de indicador de foco
  • 2.5.7 Movimientos de Arrastre: Alternativa a drag-and-drop
  • 2.5.8 Tamaño del Objetivo (Mínimo): Mínimo táctil 24×24px
  • 3.3.8 Autenticación Accesible (Mínimo): Login sin test de función cognitiva

Nivel AAA (Nuevo)

  • 3.3.9 Autenticación Accesible (Mejorado): Sin reconocimiento de objetos/imágenes requerido

Recursos por Tema

Perceptible (Principio WCAG 1)

Color y Contraste (7.1)

Imágenes y Texto Alternativo (7.2)

Imágenes de Texto (7.14)

Redimensionar Texto (7.13)

Operable (Principio WCAG 2)

Navegación por Teclado (7.5)

Indicadores de Foco (7.6)

Enlaces de Salto (7.7)

Objetivos Táctiles (7.8)

Propósito de Enlaces (7.9)

Navegación Consistente (7.15)

Comprensible (Principio WCAG 3)

Atributos de Idioma (7.12)

Formularios y Etiquetas (7.3)

Identificación de Errores (7.11)

Robusto (Principio WCAG 4)

Cumplimiento ARIA (7.4)

HTML Semántico (7.10)

Hubs Relacionados

Plantilla de Declaración de Accesibilidad

<h1>Declaración de Accesibilidad</h1>

<p>[Nombre de Empresa] está comprometido con asegurar la accesibilidad
digital para personas con discapacidades. Mejoramos continuamente la
experiencia de usuario para todos y aplicamos estándares de accesibilidad
relevantes.</p>

<h2>Estado de Conformidad</h2>
<p>Este sitio web cumple con WCAG 2.2 Nivel AA. Probamos regularmente
nuestro sitio usando herramientas automatizadas y testing manual.</p>

<h2>Comentarios</h2>
<p>Agradecemos tus comentarios sobre accesibilidad. Contáctanos:</p>
<ul>
  <li>Email: [email protected]</li>
  <li>Teléfono: +56 X XXXX XXXX</li>
</ul>

<h2>Especificaciones Técnicas</h2>
<p>Este sitio utiliza HTML, CSS, JavaScript y WAI-ARIA.</p>

<p>Última actualización: [Fecha]</p>

Monitoreo y Mantenimiento

Tareas Continuas

  1. Escaneos automatizados: Ejecutar axe-core en pipeline CI/CD
  2. Feedback de usuarios: Proporcionar contacto de accesibilidad
  3. Auditorías regulares: Testing manual trimestral
  4. Capacitación: Educar al equipo de desarrollo
  5. Documentación: Mantener declaración de accesibilidad

Métricas de Accesibilidad

Métricas a Rastrear:
├── Número de violaciones WCAG (por severidad)
├── Cobertura de tests automatizados
├── Feedback/quejas de usuarios
├── Compatibilidad con lectores de pantalla
└── Tasa de completación de navegación por teclado

Referencia Rápida

Verificaciones Esenciales

Verificación WCAG Nivel Prueba Rápida
Texto alt 1.1.1 A Revisar todas las imágenes
Contraste 1.4.3 AA Usar verificador de contraste
Etiquetas 1.3.1 A Inspeccionar inputs
Lang 3.1.1 A Revisar <html lang>
Teclado 2.1.1 A Navegar con Tab
Foco 2.4.7 AA Tab y observar foco
Encabezados 1.3.1 A Verificar jerarquía

Bookmarklets Útiles

// Resaltar imágenes sin alt
javascript:(function(){document.querySelectorAll('img:not([alt])').forEach(img=>img.style.border='5px solid red')})();

// Mostrar esquema de encabezados
javascript:(function(){document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach((h,i)=>h.style.outline='2px solid hsl('+i*60+',100%,50%)')})();

Referencias

  1. W3C - Especificación WCAG 2.2
  2. WebAIM - Checklist WCAG 2
  3. W3C - Entendiendo WCAG 2.2
  4. W3C - Iniciativa de Accesibilidad Web
  5. A11Y Project - Checklist
  6. Deque - axe DevTools
  7. US Access Board - Section 508

Artículos relacionados

En la misma categoría

Hub

Accessible Components Hub

Construir componentes web accesibles requiere entender tanto los aspectos visuales como programáticos de las interfaces de usuario

Introducción

Color Contrast Explained

El contraste de color es la diferencia en luminancia entre el primer plano (texto) y los colores de fondo

Otros temas

Hub

Basic Seo Fundamentals Hub

Todo sitio web exitoso se construye sobre una base sólida de fundamentos SEO