Accesibilidad web

La accesibilidad web es el conjunto de principios y técnicas que garantizan que las páginas web puedan ser utilizadas por todas las personas, independientemente de sus capacidades físicas, cognitivas o tecnológicas. En HTML, implementar accesibilidad significa crear código que sea interpretable tanto por navegadores como por tecnologías asistivas como lectores de pantalla, magnificadores o dispositivos de navegación alternativos.

Fundamentos de la accesibilidad

La accesibilidad no es una característica opcional, sino una responsabilidad fundamental del desarrollo web. Cuando creamos páginas accesibles, beneficiamos no solo a usuarios con discapacidades, sino que mejoramos la experiencia para todos los usuarios, incluyendo aquellos que navegan en condiciones adversas o utilizan dispositivos diversos.

Los estándares WCAG (Web Content Accessibility Guidelines) establecen cuatro principios básicos: el contenido debe ser perceptible, operable, comprensible y robusto. HTML proporciona elementos y atributos específicos que nos ayudan a cumplir estos principios de manera efectiva.

Estructura semántica y navegación

El uso correcto de elementos semánticos HTML5 es fundamental para la accesibilidad. Los lectores de pantalla utilizan la estructura del documento para crear mapas de navegación que permiten a los usuarios moverse eficientemente por el contenido.

<header>
  <nav aria-label="Main navigation">
    <ul>
      <li><a href="#home">Home</a></li>
      <li><a href="#about">About</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </nav>
</header>

<main>
  <section>
    <h1>Welcome to our website</h1>
    <p>This is the main content area.</p>
  </section>
</main>

<aside>
  <h2>Related links</h2>
  <ul>
    <li><a href="#link1">Resource 1</a></li>
    <li><a href="#link2">Resource 2</a></li>
  </ul>
</aside>

La jerarquía de encabezados debe seguir un orden lógico sin saltar niveles. Los elementos <h1> a <h6> actúan como puntos de referencia que permiten a los usuarios navegar rápidamente entre secciones.

Atributos ARIA esenciales

Los atributos ARIA (Accessible Rich Internet Applications) proporcionan información adicional sobre el propósito y estado de los elementos cuando el HTML semántico no es suficiente.

<button aria-expanded="false" aria-controls="menu-dropdown">
  Menu
</button>

<div id="menu-dropdown" aria-hidden="true">
  <ul role="menu">
    <li role="menuitem"><a href="#option1">Option 1</a></li>
    <li role="menuitem"><a href="#option2">Option 2</a></li>
  </ul>
</div>

El atributo aria-label proporciona descripciones alternativas cuando el texto visible no es suficientemente descriptivo:

<button aria-label="Close dialog">×</button>
<input type="search" aria-label="Search products">

Formularios accesibles

Los formularios accesibles requieren asociaciones claras entre etiquetas y campos, así como mensajes de error comprensibles. El elemento <label> debe estar correctamente vinculado con su campo correspondiente.

<form>
  <div>
    <label for="email">Email address</label>
    <input type="email" id="email" required aria-describedby="email-error">
    <div id="email-error" role="alert" aria-live="polite">
      Please enter a valid email address
    </div>
  </div>
  
  <fieldset>
    <legend>Preferred contact method</legend>
    <input type="radio" id="contact-email" name="contact" value="email">
    <label for="contact-email">Email</label>
    
    <input type="radio" id="contact-phone" name="contact" value="phone">
    <label for="contact-phone">Phone</label>
  </fieldset>
</form>

Los mensajes de error deben utilizar role="alert" y aria-live="polite" para ser anunciados automáticamente por los lectores de pantalla cuando aparecen.

Imágenes y contenido multimedia

Las imágenes informativas requieren texto alternativo descriptivo mediante el atributo alt. Para imágenes decorativas, utiliza alt="" para que sean ignoradas por las tecnologías asistivas.

<!-- Imagen informativa -->
<img src="chart.png" alt="Sales increased 25% from January to March 2024">

<!-- Imagen decorativa -->
<img src="decoration.png" alt="" role="presentation">

<!-- Imagen compleja -->
<figure>
  <img src="complex-chart.png" alt="Quarterly sales data">
  <figcaption>
    Detailed description: Sales in Q1 were $50k, Q2 reached $75k, 
    Q3 maintained $70k, and Q4 peaked at $90k.
  </figcaption>
</figure>

Para contenido multimedia, proporciona alternativas textuales como subtítulos y transcripciones:

<video controls>
  <source src="presentation.mp4" type="video/mp4">
  <track kind="captions" src="captions.vtt" srclang="en" label="English">
  <p>Your browser doesn't support video. 
     <a href="transcript.html">Read the transcript</a>
  </p>
</video>

Navegación por teclado

La navegación por teclado debe ser fluida y lógica. Todos los elementos interactivos deben ser accesibles mediante la tecla Tab, y el orden de navegación debe seguir el flujo visual del contenido.

<div class="custom-dropdown">
  <button tabindex="0" aria-haspopup="true" aria-expanded="false">
    Select option
  </button>
  <ul role="listbox" aria-hidden="true">
    <li role="option" tabindex="-1">Option 1</li>
    <li role="option" tabindex="-1">Option 2</li>
    <li role="option" tabindex="-1">Option 3</li>
  </ul>
</div>

Los elementos que no son naturalmente focalizables pero necesitan interactividad deben incluir tabindex="0" para hacerlos accesibles por teclado.