Principios WCAG

Introducción a WCAG y niveles de conformidad

Las Pautas de Accesibilidad para el Contenido Web (Web Content Accessibility Guidelines o WCAG) constituyen el estándar internacional que define cómo hacer el contenido web más accesible para personas con discapacidades. Estas pautas son desarrolladas por el World Wide Web Consortium (W3C) a través de su iniciativa de accesibilidad web, la WAI (Web Accessibility Initiative).

¿Qué son las WCAG?

Las WCAG son un conjunto de recomendaciones técnicas diseñadas para mejorar la accesibilidad del contenido web. Estas pautas no solo benefician a personas con discapacidades, sino que mejoran la usabilidad para todos los usuarios, incluidos los adultos mayores y quienes acceden desde dispositivos con limitaciones.

Las WCAG están organizadas en principios, pautas, criterios de conformidad y técnicas:

• Los principios son los fundamentos de la accesibilidad web (Perceptible, Operable, Comprensible y Robusto).
• Las pautas proporcionan los objetivos básicos que los desarrolladores deben lograr.
• Los criterios de conformidad son reglas comprobables que determinan si un contenido cumple con las WCAG.
• Las técnicas ofrecen métodos específicos para implementar los criterios.

Evolución de las WCAG

Las WCAG han evolucionado a lo largo del tiempo para adaptarse a las nuevas tecnologías:

• WCAG 1.0 (1999): Primera versión oficial.
• WCAG 2.0 (2008): Introdujo los cuatro principios fundamentales y los niveles de conformidad.
• WCAG 2.1 (2018): Añadió criterios adicionales para dispositivos móviles, personas con baja visión y discapacidades cognitivas.
• WCAG 2.2 (2023): Incorporó mejoras adicionales enfocadas en usuarios de dispositivos móviles y personas con discapacidades cognitivas.

Niveles de conformidad WCAG

Las WCAG establecen tres niveles de conformidad, que representan diferentes grados de accesibilidad:

Nivel A (básico)

El nivel A aborda las barreras más críticas que impiden el acceso a la información. Cumplir con este nivel es el mínimo aceptable, aunque no garantiza que el sitio sea completamente accesible para todos los usuarios.

Ejemplo de criterio de nivel A:

<!-- Mal: Imagen sin texto alternativo -->
<img src="logo.png">

<!-- Bien: Imagen con texto alternativo -->
<img src="logo.png" alt="Logo de la empresa XYZ">

Este ejemplo muestra cómo proporcionar alternativas textuales para contenido no textual (criterio 1.1.1), un requisito fundamental de nivel A.

Nivel AA (intermedio)

El nivel AA aborda barreras significativas y es el nivel que la mayoría de las organizaciones deberían aspirar a cumplir. Muchas regulaciones gubernamentales y políticas corporativas exigen el cumplimiento del nivel AA.

Ejemplo de criterio de nivel AA:

<!-- Mal: Contraste insuficiente -->
<p style="color: #777777; background-color: #EEEEEE;">Este texto tiene poco contraste</p>

<!-- Bien: Contraste adecuado -->
<p style="color: #595959; background-color: #FFFFFF;">Este texto cumple con la relación de contraste mínima de 4.5:1</p>

Este ejemplo ilustra el criterio 1.4.3 sobre contraste mínimo, que requiere una relación de contraste de al menos 4.5:1 para texto normal.

Nivel AAA (avanzado)

El nivel AAA representa el máximo nivel de accesibilidad y aborda barreras más sutiles. Aunque es deseable, no siempre es posible cumplir con todos los criterios de nivel AAA para todos los tipos de contenido.

Ejemplo de criterio de nivel AAA:

<!-- Implementación de nivel AAA para contraste mejorado -->
<p style="color: #000000; background-color: #FFFFFF;">Este texto cumple con la relación de contraste mejorada de 7:1</p>

<!-- Proporcionar definiciones para palabras inusuales -->
<p>El paciente presenta <span title="Inflamación del hígado">hepatitis</span> aguda.</p>

El primer ejemplo muestra un contraste mejorado (criterio 1.4.6) y el segundo ilustra cómo proporcionar definiciones para términos especializados (criterio 3.1.3).

Declaración de conformidad

Para declarar conformidad con las WCAG, un sitio web debe cumplir con todos los criterios de un nivel específico (y los niveles inferiores). La declaración debe incluir:

• La versión de las WCAG (por ejemplo, WCAG 2.1)
• El nivel de conformidad alcanzado (A, AA o AAA)
• El alcance de la conformidad (páginas específicas o sitio completo)
• La fecha de la evaluación

Ejemplo de una declaración de conformidad en el código:

<footer>
  <div class="accessibility-statement">
    <p>Este sitio web cumple con las <a href="https://www.w3.org/TR/WCAG21/">WCAG 2.1</a> 
    nivel AA. Última evaluación: 15 de mayo de 2023.</p>
  </div>
</footer>

Implementación práctica de WCAG

Para implementar las WCAG en un proyecto web, se recomienda seguir estos pasos:

1. Familiarizarse con los principios y pautas WCAG
2. Establecer un nivel de conformidad objetivo (generalmente AA)
3. Integrar la accesibilidad desde el inicio del desarrollo
4. Evaluar regularmente el cumplimiento mediante herramientas automáticas y pruebas manuales
5. Documentar las decisiones de accesibilidad y mantener un registro de conformidad

Beneficios legales y comerciales

Cumplir con las WCAG no solo es una cuestión ética, sino que también ofrece ventajas prácticas:

• Cumplimiento legal: Muchos países han adoptado las WCAG como base para sus leyes de accesibilidad digital.
• Mayor audiencia: Un sitio accesible puede ser utilizado por más personas.
• Mejor SEO: Muchas prácticas de accesibilidad también mejoran el posicionamiento en buscadores.
• Experiencia de usuario mejorada: Las técnicas de accesibilidad suelen beneficiar a todos los usuarios.

Ejemplo práctico de implementación

Veamos un ejemplo de una estructura HTML básica que implementa varios criterios WCAG:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página accesible de ejemplo</title>
  <!-- Asegurar que los estilos permiten zoom y respetan preferencias de usuario -->
  <style>
    body {
      font-family: Arial, sans-serif;
      line-height: 1.5;
      color: #333;
      background-color: #fff;
    }
    a:focus {
      outline: 3px solid #4a90e2;
    }
  </style>
</head>
<body>
  <header>
    <!-- Estructura jerárquica de encabezados -->
    <h1>Título principal de la página</h1>
    <nav aria-label="Navegación principal">
      <ul>
        <li><a href="#seccion1">Sección 1</a></li>
        <li><a href="#seccion2">Sección 2</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section id="seccion1">
      <h2>Sección 1</h2>
      <p>Este es un texto de ejemplo con <abbr title="Web Content Accessibility Guidelines">WCAG</abbr>.</p>
      
      <!-- Formulario accesible -->
      <form>
        <div>
          <label for="nombre">Nombre:</label>
          <input type="text" id="nombre" name="nombre" aria-required="true">
        </div>
        <button type="submit">Enviar</button>
      </form>
    </section>
    
    <section id="seccion2">
      <h2>Sección 2</h2>
      <!-- Tabla accesible -->
      <table aria-describedby="tabla-descripcion">
        <caption>Datos de usuarios</caption>
        <thead>
          <tr>
            <th scope="col">Nombre</th>
            <th scope="col">Edad</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Ana</td>
            <td>28</td>
          </tr>
        </tbody>
      </table>
      <p id="tabla-descripcion">Esta tabla muestra información demográfica básica.</p>
    </section>
  </main>
  
  <footer>
    <p>&copy; 2023 - Sitio de ejemplo</p>
  </footer>
</body>
</html>

Este ejemplo implementa varios criterios de accesibilidad, incluyendo:

• Declaración del idioma (criterio 3.1.1, nivel A)
• Estructura jerárquica de encabezados (criterio 1.3.1, nivel A)
• Etiquetas para elementos de formulario (criterio 3.3.2, nivel A)
• Indicadores visuales de foco (criterio 2.4.7, nivel AA)
• Texto alternativo para abreviaturas (criterio 3.1.4, nivel AAA)

Recursos oficiales

Para profundizar en las WCAG, estos son algunos recursos oficiales:

• Sitio oficial de WCAG
• Guía de referencia rápida WCAG
• Técnicas para WCAG 2

Las WCAG proporcionan un marco sólido para crear contenido web accesible. Comprender sus niveles de conformidad es el primer paso para desarrollar sitios web que puedan ser utilizados por la mayor cantidad posible de personas, independientemente de sus capacidades o discapacidades.

Los cuatro principios: Perceptible, Operable, Comprensible, Robusto

Los cuatro principios fundamentales de las WCAG constituyen la base sobre la que se construye toda la estructura de accesibilidad web. Estos principios, conocidos por el acrónimo POUR (Perceptible, Operable, Utilizable y Robusto), establecen las características esenciales que debe tener cualquier contenido web para ser considerado accesible.

Principio 1: Perceptible

El contenido debe ser presentado de manera que los usuarios puedan percibirlo a través de al menos uno de sus sentidos. Esto significa que la información no puede depender exclusivamente de un único canal sensorial.

Pautas clave de perceptibilidad:

• Alternativas textuales: Todo contenido no textual debe tener una alternativa textual que cumpla el mismo propósito.

<!-- Imagen con alternativa textual adecuada -->
<img src="grafico-ventas.png" alt="Gráfico que muestra un incremento del 25% en ventas durante 2023">

<!-- Contenido puramente decorativo -->
<img src="linea-decorativa.png" alt="" role="presentation">

• Alternativas para multimedia: Los videos deben incluir subtítulos y audiodescripción, mientras que los audios necesitan transcripciones.

<video controls>
  <source src="tutorial.mp4" type="video/mp4">
  <track kind="captions" src="subtitulos.vtt" srclang="es" label="Español">
  <track kind="descriptions" src="audiodescripcion.vtt" srclang="es">
  <p>Tu navegador no soporta video HTML5. Aquí tienes un <a href="tutorial.mp4">enlace al video</a>.</p>
</video>

• Adaptabilidad: El contenido debe poder presentarse de diferentes formas sin perder información ni estructura.

<!-- Estructura semántica que permite adaptabilidad -->
<article>
  <h1>Título principal</h1>
  <p>Introducción al artículo...</p>
  
  <section>
    <h2>Primera sección</h2>
    <p>Contenido de la primera sección...</p>
  </section>
</article>

• Distinguible: Debe ser fácil para los usuarios ver y oír el contenido, incluyendo la separación entre primer plano y fondo.

<!-- Uso de suficiente contraste -->
<style>
  .texto-accesible {
    color: #222; /* Texto oscuro */
    background-color: #fff; /* Fondo claro */
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Principio 2: Operable

La interfaz de usuario y la navegación deben poder ser utilizadas por cualquier persona. Esto significa que la interacción no puede depender exclusivamente del ratón o de cualquier otro dispositivo específico.

Pautas clave de operabilidad:

• Accesible por teclado: Toda la funcionalidad debe estar disponible mediante teclado.

<!-- Asegurar que los elementos interactivos son accesibles por teclado -->
<button type="button" tabindex="0" onclick="mostrarMenu()">Abrir menú</button>

<!-- Evitar trampas de teclado -->
<div role="dialog" aria-modal="true" aria-labelledby="titulo-dialogo">
  <h2 id="titulo-dialogo">Configuración</h2>
  <!-- Contenido del diálogo -->
  <button onclick="cerrarDialogo()">Cerrar</button>
</div>

• Tiempo suficiente: Proporcionar a los usuarios el tiempo suficiente para leer y usar el contenido.

<!-- Permitir al usuario controlar límites de tiempo -->
<div role="alert" id="sesion-alerta">
  <p>Su sesión expirará en <span id="tiempo-restante">5:00</span> minutos.</p>
  <button onclick="extenderSesion()">Extender sesión</button>
</div>

• Convulsiones y reacciones físicas: No diseñar contenido que pueda causar convulsiones o reacciones físicas.

<!-- Evitar destellos que puedan causar convulsiones -->
<style>
  .animacion-segura {
    animation: fade 2s ease-in-out;
    animation-iteration-count: 1; /* Evitar repeticiones rápidas */
  }
  
  @keyframes fade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
</style>

• Navegable: Proporcionar formas de ayudar a los usuarios a navegar, encontrar contenido y determinar dónde se encuentran.

<body>
  <a href="#contenido-principal" class="saltar-navegacion">Saltar al contenido principal</a>
  
  <header>
    <nav aria-label="Principal">
      <ul>
        <li><a href="/" aria-current="page">Inicio</a></li>
        <li><a href="/productos">Productos</a></li>
        <li><a href="/contacto">Contacto</a></li>
      </ul>
    </nav>
  </header>
  
  <main id="contenido-principal">
    <h1>Título de la página</h1>
    <!-- Contenido principal -->
  </main>
</body>

Principio 3: Comprensible

La información y el funcionamiento de la interfaz de usuario deben ser comprensibles para todos los usuarios.

Pautas clave de comprensibilidad:

• Legible: El texto debe ser legible y comprensible.

<!-- Especificar el idioma de la página -->
<html lang="es">
  
<!-- Especificar cambios de idioma dentro del contenido -->
<p>El término en inglés <span lang="en">responsive design</span> se refiere al diseño adaptable.</p>

• Predecible: Las páginas web deben aparecer y operar de manera predecible.

<!-- Mantener navegación consistente -->
<nav aria-label="Principal">
  <ul>
    <!-- La estructura de navegación se mantiene igual en todas las páginas -->
    <li><a href="/">Inicio</a></li>
    <li><a href="/productos">Productos</a></li>
    <li><a href="/contacto">Contacto</a></li>
  </ul>
</nav>

<!-- Avisar de cambios de contexto -->
<a href="documento.pdf" download aria-describedby="descarga-info">Descargar documento</a>
<p id="descarga-info">Se abrirá una ventana de descarga</p>

• Asistencia a la entrada: Ayudar a los usuarios a evitar y corregir errores.

<!-- Proporcionar etiquetas claras -->
<label for="fecha-nacimiento">Fecha de nacimiento (DD/MM/AAAA):</label>
<input type="date" id="fecha-nacimiento" required>

<!-- Proporcionar mensajes de error específicos -->
<form novalidate>
  <label for="email">Correo electrónico:</label>
  <input type="email" id="email" required aria-describedby="email-error">
  <p id="email-error" class="error-mensaje" aria-live="polite"></p>
  
  <script>
    document.querySelector('form').addEventListener('submit', function(e) {
      const email = document.getElementById('email');
      const errorMsg = document.getElementById('email-error');
      
      if (!email.validity.valid) {
        e.preventDefault();
        if (email.validity.valueMissing) {
          errorMsg.textContent = 'Por favor, introduzca su correo electrónico.';
        } else if (email.validity.typeMismatch) {
          errorMsg.textContent = 'El formato del correo electrónico no es válido.';
        }
      }
    });
  </script>
</form>

Principio 4: Robusto

El contenido debe ser suficientemente robusto para funcionar con diversas tecnologías actuales y futuras, incluyendo tecnologías de asistencia.

Pautas clave de robustez:

• Compatible: Maximizar la compatibilidad con las aplicaciones de usuario actuales y futuras, incluyendo tecnologías de asistencia.

<!-- Usar HTML válido -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página accesible</title>
</head>
<body>
  <!-- Contenido con marcado semántico correcto -->
</body>
</html>

<!-- Usar ARIA cuando sea necesario -->
<div role="tablist">
  <button id="tab1" role="tab" aria-selected="true" aria-controls="panel1">Pestaña 1</button>
  <button id="tab2" role="tab" aria-selected="false" aria-controls="panel2">Pestaña 2</button>
</div>

<div id="panel1" role="tabpanel" aria-labelledby="tab1">
  Contenido de la pestaña 1
</div>
<div id="panel2" role="tabpanel" aria-labelledby="tab2" hidden>
  Contenido de la pestaña 2
</div>

• Nombre, función, valor: Para todos los componentes de la interfaz de usuario, el nombre y la función pueden ser determinados por software.

<!-- Proporcionar nombres accesibles a elementos personalizados -->
<div role="button" tabindex="0" aria-label="Cerrar ventana" onclick="cerrarVentana()">
  <svg aria-hidden="true" width="24" height="24">
    <!-- Icono de X -->
  </svg>
</div>

<!-- Asegurar que los estados se comunican correctamente -->
<button aria-pressed="false" onclick="toggleFavorito(this)">
  Añadir a favoritos
</button>

Implementación práctica de los cuatro principios

Para implementar efectivamente estos principios, es útil considerar un enfoque estructurado:

1. Auditoría inicial: Evaluar el contenido existente contra cada principio.
2. Priorización: Abordar primero los problemas de nivel A, luego AA.
3. Implementación progresiva: Integrar mejoras de accesibilidad en el flujo de trabajo de desarrollo.
4. Pruebas con usuarios reales: Incluir personas con discapacidades en las pruebas.

Ejemplo de implementación combinada:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Formulario de contacto accesible</title>
  <style>
    /* Estilos que aseguran suficiente contraste y legibilidad */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.5;
      color: #333;
      background-color: #fff;
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
    }
    
    /* Indicadores visuales de foco */
    :focus {
      outline: 3px solid #4a90e2;
      outline-offset: 2px;
    }
    
    /* Estilos para mensajes de error */
    .error {
      color: #d32f2f;
      background-color: #ffebee;
      padding: 8px;
      border-left: 4px solid #d32f2f;
      margin-top: 4px;
    }
    
    /* Asegurar que los elementos de formulario son suficientemente grandes */
    input, select, textarea, button {
      font-size: 1rem;
      padding: 8px;
      margin: 8px 0;
      width: 100%;
      box-sizing: border-box;
    }
    
    /* Estilo para el botón de envío */
    button[type="submit"] {
      background-color: #0056b3;
      color: white;
      border: none;
      padding: 12px;
      cursor: pointer;
    }
    
    /* Estado de hover y focus para el botón */
    button[type="submit"]:hover,
    button[type="submit"]:focus {
      background-color: #003d82;
    }
    
    /* Grupo de formulario */
    .form-group {
      margin-bottom: 20px;
    }
    
    /* Etiquetas de formulario */
    label {
      display: block;
      font-weight: bold;
      margin-bottom: 4px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Formulario de contacto</h1>
    <p>Complete el formulario para ponerse en contacto con nosotros.</p>
  </header>
  
  <main>
    <!-- Formulario que implementa los cuatro principios -->
    <form id="contacto-form" novalidate>
      <div class="form-group">
        <label for="nombre">Nombre completo:</label>
        <input 
          type="text" 
          id="nombre" 
          name="nombre" 
          required 
          aria-required="true"
          aria-describedby="nombre-error">
        <div id="nombre-error" class="error" aria-live="polite" hidden></div>
      </div>
      
      <div class="form-group">
        <label for="email">Correo electrónico:</label>
        <input 
          type="email" 
          id="email" 
          name="email" 
          required 
          aria-required="true"
          aria-describedby="email-error">
        <div id="email-error" class="error" aria-live="polite" hidden></div>
      </div>
      
      <div class="form-group">
        <label for="asunto">Asunto:</label>
        <select 
          id="asunto" 
          name="asunto" 
          required 
          aria-required="true">
          <option value="">Seleccione un asunto</option>
          <option value="consulta">Consulta general</option>
          <option value="soporte">Soporte técnico</option>
          <option value="ventas">Ventas</option>
        </select>
      </div>
      
      <div class="form-group">
        <label for="mensaje">Mensaje:</label>
        <textarea 
          id="mensaje" 
          name="mensaje" 
          rows="5" 
          required 
          aria-required="true"
          aria-describedby="mensaje-error"></textarea>
        <div id="mensaje-error" class="error" aria-live="polite" hidden></div>
      </div>
      
      <div class="form-group">
        <button type="submit">Enviar mensaje</button>
      </div>
    </form>
  </main>
  
  <script>
    // JavaScript para validación accesible
    document.getElementById('contacto-form').addEventListener('submit', function(event) {
      let formValido = true;
      
      // Validar nombre
      const nombreInput = document.getElementById('nombre');
      const nombreError = document.getElementById('nombre-error');
      
      if (!nombreInput.value.trim()) {
        event.preventDefault();
        formValido = false;
        nombreError.textContent = 'Por favor, introduzca su nombre completo.';
        nombreError.hidden = false;
        nombreInput.setAttribute('aria-invalid', 'true');
      } else {
        nombreError.hidden = true;
        nombreInput.setAttribute('aria-invalid', 'false');
      }
      
      // Validar email (simplificado)
      const emailInput = document.getElementById('email');
      const emailError = document.getElementById('email-error');
      
      if (!emailInput.value.trim() || !emailInput.value.includes('@')) {
        event.preventDefault();
        formValido = false;
        emailError.textContent = 'Por favor, introduzca un correo electrónico válido.';
        emailError.hidden = false;
        emailInput.setAttribute('aria-invalid', 'true');
      } else {
        emailError.hidden = true;
        emailInput.setAttribute('aria-invalid', 'false');
      }
      
      // Validar mensaje
      const mensajeInput = document.getElementById('mensaje');
      const mensajeError = document.getElementById('mensaje-error');
      
      if (!mensajeInput.value.trim()) {
        event.preventDefault();
        formValido = false;
        mensajeError.textContent = 'Por favor, introduzca su mensaje.';
        mensajeError.hidden = false;
        mensajeInput.setAttribute('aria-invalid', 'true');
      } else {
        mensajeError.hidden = true;
        mensajeInput.setAttribute('aria-invalid', 'false');
      }
      
      // Si hay errores, enfocar el primer campo con error
      if (!formValido) {
        document.querySelector('[aria-invalid="true"]').focus();
      }
    });
  </script>
</body>
</html>

Este ejemplo implementa los cuatro principios WCAG:

• Perceptible: Usa etiquetas claras, mensajes de error visibles y suficiente contraste.
• Operable: Todos los elementos son accesibles por teclado y tienen indicadores de foco visibles.
• Comprensible: Las etiquetas son claras, los mensajes de error son específicos y la navegación es predecible.
• Robusto: Utiliza HTML semántico, atributos ARIA apropiados y asegura que los estados se comuniquen correctamente.

Interrelación entre los principios

Es importante entender que los cuatro principios están interrelacionados:

• Un sitio puede ser técnicamente perceptible (con texto alternativo), pero si la navegación es confusa, no será comprensible.
• Un sitio puede ser operable por teclado, pero si no es robusto, podría no funcionar con lectores de pantalla.

La implementación efectiva de WCAG requiere considerar los cuatro principios como un sistema integrado más que como requisitos independientes.

Herramientas de evaluación de accesibilidad

Evaluar la accesibilidad de un sitio web es un proceso fundamental para garantizar que cumple con los principios WCAG. Aunque el análisis manual es insustituible, existen numerosas herramientas automatizadas que pueden ayudarnos a identificar problemas comunes y agilizar el proceso de evaluación.

Tipos de herramientas de evaluación

Las herramientas de evaluación de accesibilidad se pueden clasificar en varias categorías según su funcionalidad y método de implementación:

• Extensiones de navegador: Pequeñas aplicaciones que se integran en el navegador para analizar la página actual.
• Herramientas online: Servicios web que analizan URLs proporcionadas.
• Herramientas de línea de comandos: Programas que se ejecutan desde la terminal, ideales para integración continua.
• Simuladores: Permiten experimentar cómo perciben el contenido personas con diferentes discapacidades.
• Lectores de pantalla: Software que convierte el texto en voz, esencial para probar la experiencia de usuarios con discapacidad visual.

Extensiones de navegador populares

WAVE (Web Accessibility Evaluation Tool)

WAVE es una de las extensiones más completas para evaluar accesibilidad, disponible para Chrome y Firefox. Proporciona información visual sobre los problemas directamente en la página.

Características principales:

• Identificación de errores, alertas y características de accesibilidad
• Visualización de la estructura del documento
• Análisis de contraste
• Resumen detallado de problemas

<!-- WAVE detectaría este problema -->
<img src="grafico-importante.png"> <!-- Falta el atributo alt -->

<!-- Solución correcta -->
<img src="grafico-importante.png" alt="Gráfico comparativo de ventas trimestrales por región">

Axe DevTools

Desarrollada por Deque Systems, Axe es una herramienta robusta que se integra en las herramientas de desarrollo del navegador. Es conocida por su precisión y bajas tasas de falsos positivos.

Características principales:

• Interfaz intuitiva dentro de DevTools
• Explicaciones detalladas de cada problema
• Sugerencias específicas para solucionar errores
• Capacidad para guardar informes

<!-- Axe detectaría este problema de contraste -->
<p style="color: #999; background-color: #eee;">Este texto tiene poco contraste</p>

<!-- Solución con mejor contraste -->
<p style="color: #595959; background-color: #fff;">Este texto cumple con los requisitos de contraste</p>

Lighthouse

Integrado en Chrome DevTools, Lighthouse ofrece auditorías completas de rendimiento, accesibilidad, SEO y más. Es especialmente útil para desarrolladores que quieren evaluar múltiples aspectos de calidad web simultáneamente.

Características principales:

• Puntuación global de accesibilidad
• Integración con el flujo de trabajo de desarrollo
• Informes exportables en diferentes formatos
• Sugerencias de mejora priorizadas

<!-- Lighthouse detectaría este problema -->
<button onclick="enviarFormulario()"></button> <!-- Botón sin texto ni aria-label -->

<!-- Solución correcta -->
<button onclick="enviarFormulario()" aria-label="Enviar formulario">
  <svg aria-hidden="true" width="20" height="20"><!-- Icono de envío --></svg>
</button>

Herramientas online

WAVE Web Accessibility Tool (online)

La versión online de WAVE permite analizar cualquier URL pública y genera informes detallados similares a la extensión.

https://wave.webaim.org/report?url=https://ejemplo.com

AChecker

AChecker es una herramienta gratuita que permite verificar páginas web contra diferentes estándares de accesibilidad, incluyendo WCAG 2.0 y 2.1.

Características principales:

• Verificación contra múltiples estándares
• Clasificación de problemas por certeza (conocidos, probables, potenciales)
• Explicaciones detalladas con referencias a las pautas

Siteimprove Accessibility Checker

Esta herramienta proporciona un análisis exhaustivo y categoriza los problemas según su impacto y los principios WCAG afectados.

<!-- Siteimprove detectaría este problema -->
<div onclick="abrirMenu()">Menú</div> <!-- Elemento no interactivo con manejador de eventos -->

<!-- Solución correcta -->
<button onclick="abrirMenu()">Menú</button>

Herramientas de línea de comandos

Pa11y

Pa11y es una herramienta de línea de comandos que permite automatizar pruebas de accesibilidad, ideal para integración continua.

Ejemplo de uso básico:

pa11y https://ejemplo.com

Configuración en un archivo JSON:

{
  "standard": "WCAG2AA",
  "ignore": [
    "WCAG2AA.Principle1.Guideline1_4.1_4_3.G18"
  ],
  "wait": 500
}

Axe-core CLI

Versión de línea de comandos de Axe, perfecta para integración en pipelines de CI/CD.

axe https://ejemplo.com --rules color-contrast,image-alt

Simuladores de discapacidad

NoCoffee Vision Simulator

Esta extensión para Chrome simula diferentes condiciones visuales como daltonismo, visión borrosa o pérdida de campo visual.

Uso práctico:

1. Instalar la extensión
2. Activar diferentes simulaciones
3. Navegar por el sitio para identificar problemas de percepción

Funkify

Funkify simula diversas discapacidades y condiciones como dislexia, temblores en las manos o distracciones, permitiendo experimentar las dificultades que enfrentan algunos usuarios.

Lectores de pantalla

NVDA (NonVisual Desktop Access)

NVDA es un lector de pantalla gratuito para Windows, ampliamente utilizado por personas con discapacidad visual. Es esencial para probar la experiencia real de estos usuarios.

Comandos básicos:

• NVDA + Flecha abajo: Leer desde la posición actual
• NVDA + Tab: Moverse entre elementos interactivos
• NVDA + F7: Listar todos los enlaces de la página

VoiceOver

Integrado en macOS y iOS, VoiceOver es el lector de pantalla nativo de Apple. Probar con VoiceOver es crucial para asegurar la compatibilidad con dispositivos Apple.

Comandos básicos en macOS:

• VO + A: Leer todo desde el principio
• VO + Flechas: Navegar por elementos
• VO + U: Abrir rotor (para navegar por encabezados, enlaces, etc.)

Herramientas de verificación de color y contraste

Color Contrast Analyzer

Esta herramienta permite medir el contraste entre colores de primer plano y fondo, verificando si cumplen con los niveles AA o AAA de WCAG.

<!-- Ejemplo de uso para verificar contraste -->
<style>
  .boton-primario {
    background-color: #0056b3;
    color: white; /* Buen contraste: 4.56:1 (cumple AA) */
  }
  
  .boton-secundario {
    background-color: #e1e1e1;
    color: #777; /* Contraste insuficiente: 2.62:1 (no cumple) */
  }
</style>

Contrast Checker (WebAIM)

Herramienta online que permite verificar rápidamente la relación de contraste entre dos colores y su conformidad con WCAG.

Integración de herramientas en el flujo de desarrollo

Para maximizar la eficacia de estas herramientas, es recomendable integrarlas en el flujo de trabajo de desarrollo:

1. Fase de diseño: Usar simuladores y verificadores de contraste
2. Durante el desarrollo: Extensiones de navegador para pruebas rápidas
3. Integración continua: Herramientas de línea de comandos para pruebas automatizadas
4. Pruebas de QA: Lectores de pantalla y pruebas manuales exhaustivas
5. Monitoreo continuo: Herramientas de análisis de sitios completos

Implementación de un proceso de evaluación completo

Un enfoque efectivo para evaluar la accesibilidad combina herramientas automatizadas con pruebas manuales:

<!-- Ejemplo de página de prueba con elementos comunes -->
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Página de prueba de accesibilidad</title>
  <style>
    /* Estilos para probar contraste */
    .alerta {
      background-color: #ffdd00;
      color: #333;
      padding: 10px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <header>
    <h1>Página de prueba</h1>
    <nav>
      <ul>
        <li><a href="#seccion1">Sección 1</a></li>
        <li><a href="#seccion2">Sección 2</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <section id="seccion1">
      <h2>Sección de prueba 1</h2>
      <p>Texto para evaluar legibilidad y estructura.</p>
      <img src="imagen.jpg" alt="Descripción de la imagen">
      
      <div class="alerta">
        Este es un mensaje importante que debe ser perceptible.
      </div>
    </section>
    
    <section id="seccion2">
      <h2>Formulario de prueba</h2>
      <form>
        <div>
          <label for="nombre">Nombre:</label>
          <input type="text" id="nombre" name="nombre">
        </div>
        <div>
          <label for="email">Email:</label>
          <input type="email" id="email" name="email">
        </div>
        <button type="submit">Enviar</button>
      </form>
    </section>
  </main>
  
  <footer>
    <p>&copy; 2023 - Página de ejemplo</p>
  </footer>
</body>
</html>

Proceso de evaluación paso a paso:

1. Análisis automatizado inicial:

• Ejecutar Lighthouse para obtener una puntuación general
• Usar WAVE para identificar errores evidentes
• Ejecutar Axe para un análisis más detallado

2. Verificación de contraste:

• Usar Color Contrast Analyzer en todos los elementos de texto
• Verificar estados de hover y focus

3. Pruebas de navegación por teclado:

• Navegar por toda la página usando solo Tab
• Verificar que el indicador de foco es visible
• Comprobar que todos los controles son operables

4. Pruebas con lectores de pantalla:

• Navegar con NVDA o VoiceOver
• Verificar que toda la información es anunciada correctamente
• Comprobar que la estructura de encabezados es lógica

5. Simulación de discapacidades:

• Usar NoCoffee para simular problemas de visión
• Probar con Funkify para simular otras discapacidades

6. Documentación de resultados:

• Capturar capturas de pantalla de los problemas
• Clasificar según principios WCAG afectados
• Priorizar según nivel de conformidad (A, AA, AAA)

Limitaciones de las herramientas automatizadas

Es importante entender que las herramientas automatizadas tienen limitaciones significativas:

• Solo pueden detectar aproximadamente el 30-40% de los problemas de accesibilidad
• No pueden evaluar aspectos subjetivos como la claridad del texto alternativo
• No comprenden el contexto o propósito de los elementos
• Pueden generar falsos positivos o falsos negativos

Por ejemplo, una herramienta puede verificar que una imagen tiene un atributo alt, pero no puede determinar si el texto alternativo es adecuado:

<!-- La herramienta no detectaría este problema -->
<img src="grafico-ventas-2023.png" alt="imagen"> <!-- Alt presente pero inadecuado -->

<!-- Solución correcta -->
<img src="grafico-ventas-2023.png" alt="Gráfico de barras mostrando el incremento de ventas del 15% en 2023">

Herramientas específicas para frameworks

Muchos frameworks modernos cuentan con herramientas específicas para evaluar la accesibilidad:

React

• eslint-plugin-jsx-a11y: Plugin de ESLint que identifica problemas de accesibilidad en componentes React.
• react-axe: Integración de Axe específicamente para aplicaciones React.

// Ejemplo de uso de react-axe
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

if (process.env.NODE_ENV !== 'production') {
  const axe = require('@axe-core/react');
  axe(React, ReactDOM, 1000);
}

ReactDOM.render(<App />, document.getElementById('root'));

Angular

• codelyzer: Incluye reglas de accesibilidad para aplicaciones Angular.
• angular-a11y: Conjunto de directivas para mejorar la accesibilidad.

Vue

• vue-axe: Integración de Axe para aplicaciones Vue.js.
• eslint-plugin-vuejs-accessibility: Reglas de ESLint para accesibilidad en Vue.

Conclusiones sobre las herramientas

Las herramientas de evaluación de accesibilidad son recursos valiosos pero deben utilizarse como parte de un enfoque más amplio:

• Combinar múltiples herramientas para obtener una visión más completa
• Complementar con pruebas manuales exhaustivas
• Incluir pruebas con usuarios reales con discapacidades cuando sea posible
• Integrar la evaluación de accesibilidad desde las primeras etapas del desarrollo
• Establecer un proceso continuo de evaluación, no solo verificaciones puntuales

La accesibilidad web no es un destino sino un proceso continuo de mejora. Las herramientas nos ayudan a identificar problemas, pero la verdadera accesibilidad se logra cuando entendemos profundamente las necesidades de todos los usuarios y diseñamos pensando en la inclusión desde el principio.