Accesibilidad

La accesibilidad en HTML se refiere a prácticas y técnicas que permiten a todas las personas, incluidas aquellas con discapacidades, navegar, comprender e interactuar con contenido web de manera efectiva. Es un aspecto fundamental del desarrollo web, ya que ayuda a que los sitios y aplicaciones sean inclusivos y cumplan con las regulaciones de accesibilidad.

¿Qué es la accesibilidad en HTML?

La accesibilidad web es el diseño y desarrollo de sitios y aplicaciones que sean utilizables para personas con discapacidades visuales, auditivas, motoras, de habla o cognitivas. En HTML, la accesibilidad se implementa mediante el uso de atributos, etiquetas y estructuras que mejoran la experiencia para usuarios con herramientas de asistencia, como lectores de pantalla.

¿Para qué sirve?

  • Inclusión: Permite que personas con discapacidades puedan acceder al contenido de la web sin barreras.

  • Cumplimiento de estándares: Cumple con normas y regulaciones de accesibilidad, como las WCAG (Web Content Accessibility Guidelines) y las leyes locales de accesibilidad.

  • Mejora de SEO y experiencia de usuario: Los principios de accesibilidad también mejoran el SEO, ya que los motores de búsqueda pueden entender mejor el contenido del sitio. Además, una web accesible suele ofrecer una experiencia de usuario más clara y organizada para todos.

¿Cómo se usa la accesibilidad en HTML?

  1. Etiquetas Semánticas:

    • Usar etiquetas como <header>, <nav>, <main>, <footer>, etc., ayuda a los usuarios de lectores de pantalla a entender la estructura de la página y navegar por secciones específicas.

  2. Atributos alt en Imágenes:

    • Cada imagen debe tener un atributo alt descriptivo para que los lectores de pantalla puedan comunicar a los usuarios el contenido de la imagen.

  3. Uso de Roles y ARIA (Accessible Rich Internet Applications):

    • Los atributos ARIA (como aria-label, aria-hidden, role, etc.) ayudan a añadir contexto en elementos dinámicos o interactivos. Por ejemplo, en menús desplegables o cuadros de diálogo, aria-expanded y role="dialog" ayudan a los lectores de pantalla a transmitir el estado del contenido.

  4. Enlaces y Botones Descriptivos:

    • Los enlaces deben describir claramente su propósito (por ejemplo, "Ver más detalles sobre el producto" en lugar de solo "Ver más") y los botones deben tener etiquetas claras.

  5. Navegación con Teclado:

    • Asegurarse de que todos los elementos interactivos (formularios, botones, enlaces) sean accesibles usando el teclado. Esto beneficia tanto a usuarios de lectores de pantalla como a quienes tienen movilidad reducida.

  6. Contraste de Color:

    • Utilizar colores de texto y fondo con suficiente contraste para facilitar la legibilidad, especialmente para personas con dificultades visuales. Herramientas como las WCAG Contrast Guidelines ayudan a verificar el nivel de contraste adecuado.

Ejemplo básico de accesibilidad en HTML:

<nav aria-label="Main navigation">
  <ul>
    <li><a href="#home">Inicio</a></li>
    <li><a href="#about">Sobre Nosotros</a></li>
    <li><a href="#products">Productos</a></li>
    <li><a href="#contact">Contacto</a></li>
  </ul>
</nav>

<img src="imagen.jpg" alt="Descripción de la imagen">

<button aria-label="Abrir menú">☰</button>

Este código básico utiliza etiquetas semánticas, atributos alt, y aria-label para hacer la navegación accesible.

Atributos Aria

Los atributos ARIA (Accessible Rich Internet Applications) son una serie de atributos especiales de HTML que ayudan a que las aplicaciones y sitios web sean más accesibles para personas con discapacidades. Los atributos ARIA proporcionan información adicional a los lectores de pantalla y otras tecnologías de asistencia, lo cual es especialmente útil en componentes de UI complejos y dinámicos, como menús desplegables, pestañas y ventanas modales.

Ejemplos de Atributos ARIA Comunes y sus Usos

  1. aria-label

    • Proporciona una descripción para elementos sin texto visible, como íconos o botones con solo un símbolo.

    • Ejemplo:

      <button aria-label="Abrir menú de configuración">⚙️</button>

    • Uso: Los lectores de pantalla leerán "Abrir menú de configuración" en lugar de solo interpretar el ícono.

  2. aria-labelledby

    • Conecta un elemento con otro que ya tiene un identificador y funciona como etiqueta. Es útil cuando deseas que un elemento esté etiquetado por otros elementos.

    • Ejemplo:

      <h2 id="header1">Formulario de contacto</h2>
<form aria-labelledby="header1">
  <!-- Formulario -->
</form>

    • Uso: Los lectores de pantalla leerán "Formulario de contacto" cuando el usuario se posicione sobre el formulario.

  3. aria-describedby

    • Conecta un elemento con una descripción adicional, útil para añadir contexto a elementos como campos de formulario.

    • Ejemplo:

      <label for="email">Correo Electrónico</label>
<input id="email" type="email" aria-describedby="emailHelp">
<p id="emailHelp">Nunca compartiremos tu correo con nadie más.</p>

    • Uso: Los lectores de pantalla leerán el mensaje de ayuda al llegar al campo de correo electrónico.

  4. aria-expanded

    • Indica si un elemento, como un menú desplegable o un acordeón, está expandido o colapsado. Este atributo acepta valores true o false.

    • Ejemplo:

      <button aria-expanded="false" aria-controls="menu1" onclick="toggleMenu()">Menú</button>
<div id="menu1" hidden>
  <!-- Opciones del menú -->
</div>

    • Uso: El valor de aria-expanded cambia a true o false cuando el menú se abre o se cierra, permitiendo a los lectores de pantalla informar al usuario.

  5. aria-hidden

    • Indica que un elemento no es relevante para la accesibilidad, como cuando se oculta temporalmente o no se necesita en la navegación por teclado.

    • Ejemplo:

      <div aria-hidden="true">Elemento decorativo</div>

    • Uso: Los lectores de pantalla ignorarán este elemento al leer la página.

  6. role

    • Define el tipo de elemento cuando no es obvio por el HTML estándar. Los valores comunes incluyen button, dialog, navigation, alert, banner, entre otros.

    • Ejemplo:

      <div role="alert">Este es un mensaje importante.</div>

    • Uso: Los lectores de pantalla tratarán este div como un "alerta" y lo anunciarán de inmediato.

  7. aria-live

    • Indica que un área del contenido se actualiza dinámicamente y debe ser monitoreada por los lectores de pantalla. Los valores comunes son polite (el lector de pantalla espera a un momento adecuado para leer el cambio) y assertive (el lector de pantalla anuncia de inmediato).

    • Ejemplo:

      <div aria-live="polite">Cargando resultados...</div>

    • Uso: Ideal para mostrar notificaciones de cambios en la UI, como cuando se agregan o eliminan elementos sin recargar la página.

Ejemplo Completo de una Interfaz de Acordeón Accesible

<div class="accordion">
  <button aria-expanded="false" aria-controls="section1" onclick="toggleSection(this, 'section1')">
    ¿Qué es la accesibilidad?
  </button>
  <div id="section1" role="region" hidden>
    <p>La accesibilidad web asegura que los sitios puedan ser utilizados por todos, incluidas personas con discapacidades.</p>
  </div>
</div>

<script>
  function toggleSection(button, sectionId) {
    const section = document.getElementById(sectionId);
    const expanded = button.getAttribute('aria-expanded') === 'true' || false;
    button.setAttribute('aria-expanded', !expanded);
    section.hidden = expanded;
  }
</script>

Beneficios de Usar ARIA en HTML

  • Mejora la experiencia para usuarios de lectores de pantalla al proporcionar información adicional.

  • Facilita la navegación con teclado en componentes interactivos complejos.

  • Cumple con las WCAG (Web Content Accessibility Guidelines), que son estándar para la accesibilidad en la web.

El uso de ARIA es clave en el desarrollo de aplicaciones accesibles y brinda una experiencia inclusiva y mejorada para todos los usuarios.

PreviousAsincronismoNextInternacionalización

Last updated