Accesibilidad web

La accesibilidad web representa uno de los pilares fundamentales del desarrollo web moderno. Consiste en diseñar y desarrollar sitios web que puedan ser utilizados por todas las personas, independientemente de sus capacidades físicas, cognitivas o tecnológicas. Cuando hablamos de HTML (HyperText Markup Language), la accesibilidad no es una característica opcional, sino un requisito esencial para crear contenido verdaderamente universal.

¿Por qué es importante la accesibilidad web?

La web fue concebida como un espacio inclusivo donde la información debería estar disponible para todos. Sin embargo, muchos sitios presentan barreras que dificultan o imposibilitan su uso para personas con discapacidades visuales, auditivas, motoras o cognitivas.

Implementar buenas prácticas de accesibilidad ofrece múltiples beneficios:

• Permite que todos los usuarios puedan acceder a la información
• Mejora la experiencia de usuario general
• Aumenta la compatibilidad con diferentes dispositivos
• Favorece el posicionamiento SEO
• Cumple con normativas legales vigentes en muchos países

Estándares de accesibilidad web

El principal referente en accesibilidad web son las Pautas de Accesibilidad para el Contenido Web (WCAG) desarrolladas por el W3C (World Wide Web Consortium). Estas pautas se basan en cuatro principios fundamentales:

• Perceptible: La información debe presentarse de manera que los usuarios puedan percibirla.
• Operable: Los componentes de la interfaz deben ser manejables por cualquier usuario.
• Comprensible: La información y el funcionamiento deben ser entendibles.
• Robusto: El contenido debe ser suficientemente robusto para funcionar con tecnologías actuales y futuras.

Elementos HTML para mejorar la accesibilidad

HTML proporciona numerosos elementos y atributos específicamente diseñados para mejorar la accesibilidad:

Estructura semántica

Utilizar elementos HTML semánticos es fundamental para la accesibilidad. Estos elementos comunican el significado y la estructura del contenido a las tecnologías asistivas:

<header>
  <h1>Título principal de la página</h1>
  <nav>
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
    </ul>
  </nav>
</header>
<main>
  <article>
    <h2>Artículo principal</h2>
    <p>Contenido del artículo...</p>
  </article>
</main>
<footer>
  <p>Información de contacto</p>
</footer>

En este ejemplo, los elementos <header>, <nav>, <main>, <article> y <footer> proporcionan información estructural que ayuda a los lectores de pantalla a navegar por el contenido.

Textos alternativos para imágenes

El atributo alt es esencial para describir imágenes a personas que no pueden verlas:

<img src="logo.png" alt="Logo de la empresa XYZ">

Si una imagen es puramente decorativa y no aporta información, se puede usar un alt vacío:

<img src="decorative-line.png" alt="">

Formularios accesibles

Los formularios deben incluir etiquetas claras y asociadas correctamente con sus campos:

<form>
  <div>
    <label for="name">Nombre:</label>
    <input type="text" id="name" name="name">
  </div>
  
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email">
  </div>
  
  <button type="submit">Enviar</button>
</form>

El atributo for en la etiqueta <label> debe coincidir con el id del campo correspondiente, creando una asociación que mejora la usabilidad para todos.

Tablas accesibles

Las tablas deben incluir elementos que describan su propósito y estructura:

<table>
  <caption>Horario de clases semanal</caption>
  <thead>
    <tr>
      <th scope="col">Hora</th>
      <th scope="col">Lunes</th>
      <th scope="col">Martes</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">9:00</th>
      <td>Matemáticas</td>
      <td>Historia</td>
    </tr>
  </tbody>
</table>

El elemento <caption> proporciona un título descriptivo, mientras que el atributo scope indica si una celda de encabezado se aplica a una fila o columna.

ARIA (Accessible Rich Internet Applications)

ARIA es un conjunto de atributos que complementan HTML para mejorar la accesibilidad de contenido dinámico y componentes de interfaz avanzados:

<div role="alert" aria-live="assertive">
  Su mensaje ha sido enviado correctamente.
</div>

<button aria-expanded="false" aria-controls="menu">
  Opciones
</button>
<ul id="menu" hidden>
  <li><a href="#option1">Opción 1</a></li>
  <li><a href="#option2">Opción 2</a></li>
</ul>

En este ejemplo:

• role="alert" identifica el elemento como una alerta
• aria-live="assertive" indica que los cambios en este elemento deben ser anunciados inmediatamente
• aria-expanded indica si el menú está expandido o colapsado
• aria-controls establece una relación entre el botón y el elemento que controla

Navegación por teclado

Muchos usuarios navegan exclusivamente mediante el teclado, por lo que es crucial asegurar que todos los elementos interactivos sean accesibles sin usar el ratón:

<a href="page.html" tabindex="1">Enlace principal</a>
<a href="secondary.html" tabindex="2">Enlace secundario</a>
<button tabindex="0">Botón accesible</button>
<div tabindex="-1">No navegable con teclado</div>

El atributo tabindex controla el orden de navegación mediante la tecla Tab:

• tabindex="0": El elemento es enfocable en el orden natural
• tabindex="-1": El elemento puede recibir foco mediante JavaScript pero no en la navegación normal
• tabindex="1" (o mayor): Define un orden específico (generalmente no recomendado)

Contraste y diseño visual

Aunque el contraste es principalmente una cuestión de CSS, es importante considerar que el texto debe tener suficiente contraste con el fondo para ser legible:

<!-- Ejemplo de texto con clase para asegurar contraste adecuado -->
<p class="high-contrast">Este texto tendrá un alto contraste con el fondo.</p>

Pruebas de accesibilidad

Es fundamental probar regularmente la accesibilidad de nuestros sitios web. Algunas herramientas útiles incluyen:

• Lectores de pantalla (NVDA, JAWS, VoiceOver)
• Extensiones de navegador como Axe o WAVE
• Validadores automáticos como el Validador de Accesibilidad Web (WAI)
• Navegación exclusivamente con teclado

Mejores prácticas de accesibilidad en HTML

• Utiliza encabezados (<h1> a <h6>) de forma jerárquica y significativa
• Proporciona textos alternativos descriptivos para todas las imágenes informativas
• Asegura que los formularios tengan etiquetas claras y mensajes de error accesibles
• Implementa una estructura semántica con elementos HTML5 apropiados
• Verifica que todo el contenido sea accesible mediante teclado
• Usa listas (<ul>, <ol>) para agrupar elementos relacionados
• Proporciona transcripciones para contenido de audio y subtítulos para videos
• Asegura que los enlaces tengan texto descriptivo (evita "haz clic aquí")

<!-- Mal ejemplo -->
<a href="contact.html">Haz clic aquí</a>

<!-- Buen ejemplo -->
<a href="contact.html">Contacta con nuestro equipo de soporte</a>

La accesibilidad web no es solo una cuestión técnica, sino un compromiso con la inclusión digital. Al implementar estas prácticas en nuestro código HTML, contribuimos a crear una web más accesible para todos los usuarios, independientemente de sus capacidades o limitaciones.