¿Qué es la accesibilidad web?

La accesibilidad web garantiza que cualquier persona, independientemente de sus capacidades físicas o cognitivas, pueda percibir, entender, navegar e interactuar con un sitio web. Cumplir con los Web Content Accessibility Guidelines (WCAG 2.2) no solo es una obligación legal en muchos países, sino también una ventaja competitiva que mejora el SEO, la retención de usuarios y la reputación de marca.

Principios clave de WCAG

• Perceptible: la información y los componentes UI deben presentarse de forma que los usuarios puedan percibirlos.
• Operable: los usuarios deben poder operar la interfaz mediante teclado, voz u otros dispositivos.
• Comprensible: el contenido debe ser fácil de leer y predecible.
• Robusto: el código debe ser compatible con tecnologías de asistencia actuales y futuras.

Comparativa: HTML accesible vs. HTML no accesible

Buenas prácticas semánticas en HTML

Utilizar elementos nativos de HTML permite que los lectores de pantalla y otros dispositivos interpreten correctamente la estructura del documento.

<!-- Encabezado principal y navegación -->
<header>
  <h1>Mi sitio accesible</h1>
  <nav aria-label="Menú principal">
    <ul>
      <li><a href="#inicio">Inicio</a></li>
      <li><a href="#servicios">Servicios</a></li>
      <li><a href="#contacto">Contacto</a></li>
    </ul>
  </nav>
</header>
<main id="inicio">
  <section>
    <h2>Sobre nosotros</h2>
    <p>...</p>
  </section>
</main>
<footer>
  <p>&copy; 2025 Mi Empresa</p>
</footer>

Imágenes, videos y audio accesibles

Proporcione siempre alt descriptivo; para contenido decorativo, use alt="". Añada subtítulos y transcripciones a multimedia.

<!-- Imagen informativa -->
<img src="/images/diagram.png" alt="Diagrama que muestra el flujo de datos entre el cliente y el servidor">
<!-- Imagen decorativa -->
<img src="/images/ornament.png" alt="" role="presentation">
<!-- Video con subtítulos -->
<video controls>
  <source src="demo.mp4" type="video/mp4">
  <track src="subtitles_es.vtt" kind="subtitles" srclang="es" label="Español">
  Tu navegador no soporta el elemento video.
</video>

Formularios accesibles

Asocie cada input con su label mediante el atributo for. Use aria-required="true" y mensajes de error claros.

<form action="/send" method="post" novalidate>
  <div class="mb-3">
    <label for="nombre" class="form-label">Nombre completo</label>
    <input type="text" id="nombre" name="nombre" class="form-control" required aria-required="true">
  </div>
  <div class="mb-3">
    <label for="email" class="form-label">Correo electrónico</label>
    <input type="email" id="email" name="email" class="form-control" required aria-required="true">
  </div>
  <button type="submit" class="btn btn-primary">Enviar</button>
</form>

Tablas accesibles y datos estructurados

Utilice <caption>, <thead>, <th scope="col"> y scope="row" para describir la relación entre celdas.

<table class="table table-striped">
  <caption>Precios de los planes de suscripción</caption>
  <thead>
    <tr>
      <th scope="col">Plan</th>
      <th scope="col">Precio mensual</th>
      <th scope="col">Características</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Básico</th>
      <td>$9.99</td>
      <td>Acceso limitado</td>
    </tr>
    <tr>
      <th scope="row">Premium</th>
      <td>$29.99</td>
      <td>Todo incluido</td>
    </tr>
  </tbody>
</table>

Uso de ARIA (Accessible Rich Internet Applications)

ARIA complementa, pero no reemplaza, la semántica nativa. Úselo sólo cuando no exista un elemento HTML adecuado.

<!-- Botón que abre un menú desplegable -->
<button aria-haspopup="true" aria-expanded="false" id="menuBtn">Menú <span class="caret"></span></button>
<ul role="menu" aria-labelledby="menuBtn" hidden>
  <li role="menuitem"><a href="#perfil">Perfil</a></li>
  <li role="menuitem"><a href="#salir">Cerrar sesión</a></li>
</ul>

Recuerde actualizar aria-expanded mediante JavaScript al abrir o cerrar el menú.

Herramientas de auditoría y troubleshooting

• Lighthouse (Chrome DevTools) – evalúa WCAG AA/AAA.
• aXe – extensión de navegador para pruebas de accesibilidad.
• WAVE – herramienta online que visualiza errores y advertencias.
• NVDA y VoiceOver – lectores de pantalla para pruebas manuales.

Al encontrar un error, siga estos pasos:

1. Identifique el elemento problemático (p. ej., falta de alt).
2. Revise la especificación WCAG correspondiente.
3. Aplique la solución semántica o ARIA adecuada.
4. Vuelva a ejecutar la herramienta para confirmar la corrección.

Seguridad, rendimiento y SEO de un sitio accesible

Un HTML bien estructurado mejora la indexación de los motores de búsqueda (SEO) y reduce la carga de procesamiento de los lectores de pantalla, lo que impacta positivamente en el rendimiento percibido.

• Minimizar código innecesario: evita div redundantes que aumentan el DOM.
• Lazy‑load de imágenes con atributos loading="lazy" para acelerar la carga.
• Content‑Security‑Policy (CSP) para evitar inyección de scripts que pueden romper la accesibilidad.

Perspectivas futuras y tendencias emergentes

Con la llegada de IA generativa, herramientas como Microsoft Designer y ChatGPT están empezando a generar contenido con etiquetas alt automáticas. Sin embargo, la revisión humana sigue siendo crucial para garantizar precisión y contexto.

Los navegadores están incorporando mejor soporte para prefers-reduced-motion y prefers-contrast, lo que permite que los sitios respondan dinámicamente a las preferencias del usuario.

Conclusión

Implementar accesibilidad en HTML no es una tarea aislada; es una disciplina que combina semántica, buenas prácticas de diseño, pruebas continuas y una mentalidad inclusiva. Al adoptar los conceptos y ejemplos presentados, su sitio será más usable, compatible con SEO, y listo para el futuro digital.