¿Que es la accesibilidad web?

30 de mayo de 2024

⏳ 8 min

El gran olvidado dentro del desarrollo de software.

En primer lugar, ¿que es exactamente esto de accesibilidad web? Pues básicamente consiste en asegurarte de que tu sitio y sus herramientas sean fáciles de usar para todos, incluyendo personas con discapacidad. Esto implica juntar la programación, el diseño y la tecnología para crear un Internet sin barreras, donde todos puedan entender, aprender, navegar e interactuar plenamente con la web.

Ponte cómodo/a que vamos a darle un vistazo a cómo podemos lograr esto.

Principios Básicos de Accesibilidad

La accesibilidad web se basa en cuatro principios clave:

Percepción: Asegúrate de que todos puedan ver y escuchar el contenido.
Operación: El sitio debe ser fácil de manejar, ya sea con un ratón, un teclado o cualquier otro dispositivo.
Comprensión: La información debe ser fácil de entender.
Robustez: El contenido debe ser robusto y funcionar bien en diferentes dispositivos y navegadores.

Etiquetado Semántico en HTML

¿Has oído hablar de las etiquetas semánticas en HTML?

En mi opinión, creo que esta es la parte más sencilla y, en muchos casos, encontramos páginas web repletas de "divs" en lugar de hacer uso de las etiquetas semánticas. Dichas etiquetas sirven para decirle al navegador qué tipo de contenido hay en cada sección de tu página. Por ejemplo:

<header>: Para la sección del encabezado de tu página.
<nav>: Para el menú de navegación.
<main>: Dentro de esta etiqueta estará el contenido proncipal de tu página web.
<article>: Para el contenido de un artículo individual.
<section>: Para secciones del contenido. Con esta etiqueta podemos evitar el sobreúso de div.
<aside>: Para añadir contenido adicional como por ejemplo barras laterales.
<footer>: Para el pie de página.

Hacer uso de estas etiquetas hace que tu sitio sea más fácil de entender tanto para los usuarios como para los motores de búsqueda (SEO).

Uso de atributos HTML para mejorar la accesibilidad

Ahora vamos a hablar de algunos atributos HTML que pueden hacer que tu sitio sea mucho más accesible. Estos atributos son como pequeños ayudantes que mejoran la experiencia para todos, especialmente para las personas con discapacidad. Vamos a ver algunos de los más importantes y cómo puedes usarlos.

Atributo alt en Imágenes

Incluir el atributo alt en immágenes es realmente importante, y diría que impprescindible ya que proporciona un texto alternativo para las imágenes, que es crucial para las personas que usan lectores de pantalla o cuando la imagen no se puede cargar.

Veamos un ejemplo:

<img src="foto-zapatillas-x.jpg" alt="una zapatilla x con descuento" />

Imagina un e-commerce donde ves la imagen de unas zapatillas de la marca X con un descuento del 10%. Cuando haces clic en la imagen, te lleva directamente al producto para que puedas comprarlo al instante. Ahora, si añadimos la etiqueta alt a esa imagen, cualquier usuario, incluidos aquellos con discapacidades, podrán acceder al producto usando el mismo atajo. No incluir esta etiqueta sería como “cerrar la puerta” a esos usuarios, lo que sería una discriminación injusta además de perder la oportunidad de tener un cliente potencial.

Atributo aria-label

El atributo aria-labelse utiliza para proporcionar un texto descriptivo a elementos que carecen de contenido visible. Por ejemplo, si tienes un icono sin texto descriptivo, puedes usar el atributo aria-label para proporcionar una descripción significativa de la función del icono. Esto permite que los usuarios que dependen de lectores de pantalla o de otras tecnologías de asistencia comprendan la función del elemento.

Veamos un ejemplo práctico del uso del atributo aria-label:

<button aria-label="Cerrar ventana">
  <img src="close-icon.png" alt="Cerrar" />
</button>

En este caso, el botón para cerrar ventana está formado por un icono, pero para usuarios que dependen de lectores de pantalla, se proporciona una etiqueta adicional usando aria-label para informarles que el botón cierra una ventana.

Atributo aria-labelledby

A diferencia del atributo aria-label, en lugar de darle una descripción directa al elemento, este atributo señala hacia otros elementos de la página que contienen la información necesaria.

Se suele utilizar mayormente en botones, enlaces, inputs y otros elementos interactivos que necesitan una descripción clara para usuarios de tecnologías de asistencia.

Que mejor que un ejemplo para acabar de verlo con claridad:

<label id="username-label">Nombre de usuario:</label>
<input type="text" id="username" aria-labelledby="username-label" />

El atributo aria-labelledby asocia el campo de entrada con el label correspondiente, proporcionando contexto adicional a los usuarios de lectores de pantalla. En este caso, cuando el lector de pantalla encuentre el input leerá “nombre de usuario” al haber la relación entre el atributo aria-labelledbyy el atributo id.

Atributo aria-describedby

Su funcionamiento es similar al del atributo aria-labelledby, pero en este caso, aria-describedby se utiliza para proporcionar una “descripción adicional” que no se considera crucial para entender el propósito del elemento.

Ejemplo práctico…

<input type="text" id="email" aria-describedby="email-help" />
<span id="email-help">Introduce tu correo electrónico. No compartiremos tu correo con nadie.</span>

El atributo aria-describedby indica que la descripción adicional del input se encuentra en el elemento span con el valor email-help en el atributo id.

Atributo role

Define un rol específico para un elemento, ayudando a los lectores de pantalla a entender su propósito. Esto es muy útil porque le dice a los lectores de pantalla y otras tecnologías cómo deben tratar y presentar esos elementos para que los usuarios puedan entenderlos mejor.

Hay un montón de roles diferentes que puedes asignar, y cada uno tiene su propio propósito específico. Por ejemplo, algunos de los roles más comunes incluyen button para botones, link para enlaces, navigation para barras de navegación y dialog para diálogos modales.

Por ejemplo, tenemos una etiqueta “div” que por si misma no estaría proporciando ninguna información, y dentro de ella hay incluidos algunos elementos de navegación…

<div role="navigation">...</div>

Añadiendo el atributo role=navigationestariamos indicando al lector de pantalla que esta etiqueta “div” contiene elementos de navegación.

Atributo tabindex

Imagina que estás en una página web y hay un montón de elementos como botones, enlaces y campos de entrada. Normalmente, cuando navegas por la página usando la tecla Tab en tu teclado, vas de un elemento a otro en el orden en que aparecen en el código HTML. Pero a veces, quieres cambiar ese orden y decirle al navegador que primero se enfoque en un elemento específico, como un botón de “Iniciar sesión”.

Aquí es donde entra en juego el tabindex. Este atributo te permite especificar el orden en el que los elementos se enfocan cuando navegas con la tecla Tab. Puedes asignar valores numéricos al tabindex, y los elementos con un valor menor se enfocarán primero seguidos por los elementos con valores más altos.

<button tabindex="2">Button A</button>
<button tabindex="1">Button B</button>

En este caso, al navegar con la tecla tab, el primer botón que se enfocará será el “Button B” ya que su valor del atributo tabindexes inferior al del primer botón “Button A”.

Atributo aria-hidden

Básicamente indica si un elemento es relevante o no para los lectores de pantalla. Puedes aplicarlo a elementos que son útiles visualmente, pero que no aportan nada a la experiencia para alguien que usa tecnología de asistencia, como un lector de pantalla.

<div aria-hidden="true">Este contenido está oculto para los lectores de pantalla.</div>

En este ejemplo, el “div” y todo su contenido estarán ocultos para los lectores de pantalla.

Atributo aria-live

aria-live es un atributo que puedes agregar a un elemento en tu HTML para decirle a los lectores de pantalla que presten atención a los cambios que ocurren en ese elemento.

Este atributo puede tomar varios valores, dependiendo de la importancia de los cambios que se están realizando:

off: Básicamente le dices al lector de pantalla que ignore cualquier cambio en este elemento. Es como si dijeras “No pasa nada importante aquí”.

<button onclick="updateContent()">Actualizar Contenido</button>
<div id="message-off" aria-live="off"></div>

polite: Usas esto cuando quieres que los cambios sean anunciados, pero no de manera urgente. El lector de pantalla esperará a un momento adecuado (como una pausa natural en su flujo) para anunciar el cambio. Es como si dijeras “Cuando tengas un momento, hay algo nuevo”.

<button onclick="updateContent()">Agregar al Carrito</button>
<div id="message-polite" aria-live="polite"></div>

assertive: Este es para cambios que necesitan ser anunciados de inmediato, interrumpiendo lo que sea que el lector de pantalla esté diciendo. Es como decir “¡Escuchen todos, esto es importante y lo tienen que saber ya!“.

<button onclick="updateContent()">Mostrar Error</button>
<div id="message-assertive" aria-live="assertive"></div>

Combinación de Atributos para Mayor Accesibilidad

Ahora, vamos a hablar sobre cómo podemos combinar algunos de estos atributos para hacer que nuestro sitio web sea aún más accesible. Imagina que estás construyendo un diálogo para tu sitio y quieres que sea accesible para todos.

Vámos con el ejemplo:

Queremos desarrollar un diálogo para que los usuarios ingresen su dirección de correo electrónico, y obviamente queremos asegurarnos de que todos, incluidas las personas con discapacidad visual que utilizan lectores de pantalla, puedan usar este diálogo sin problemas.

<div role="dialog" aria-labelledby="dialog-title" aria-describedby="dialog-description">
  <h1 id="dialog-title">¡Suscríbete a nuestro boletín informativo!</h1>
  <p id="dialog-description">
    Ingresa tu dirección de correo electrónico para recibir las últimas noticias y actualizaciones.
  </p>
  <form>
    <label for="email">Correo electrónico:</label>
    <input type="email" id="email" aria-describedby="email-error" required />
    <span id="email-error" aria-live="assertive" style="color: red;"
      >Por favor, introduce una dirección de correo electrónico válida.</span
    >
    <button type="submit">Suscribirse</button>
  </form>
  <button aria-label="Cerrar diálogo">X</button>
</div>

Como vemos, en este ejemplo hemos utilizado varios de los atributos mencionados anteriormente para mejorar la accesibilidad…

role="dialog" para indicar que este elemento es un diálogo.
aria-labelledby="dialog-title" para asociar el título del diálogo con el diálogo mismo, facilitando a los lectores de pantalla identificar el propósito del diálogo.
aria-describedby="dialog-description" para proporcionar una descripción adicional del diálogo, lo que ayuda a los usuarios a entender mejor el contexto.
Hemos agregado un campo de entrada para el correo electrónico con un aria-describedby="email-error", que proporciona una descripción del error si se ingresa una dirección de correo electrónico no válida.
aria-live="assertive" en el span que muestra el mensaje de error para asegurarnos de que sea anunciado inmediatamente por los lectores de pantalla.
Incluimos un botón de cierre con un aria-label="Cerrar diálogo" para que los usuarios puedan cerrar el diálogo fácilmente.

🙌 Si has llegado hasta aquí… ¡Espero que este artículo te haya sido útil para entender acerca de la accesibilidad web, a saber valorar realmente la importancia que tiene y el gran impacto que tiene el proporcionar sitios web accesibles para todos.