Accesibilidad web: primeros pasos

Hoy en día, al crear una aplicación, muchas veces se ignora la accesibilidad o algunos desarrolladores piensan que con usar aria-label ya está todo resuelto. También hay quienes creen que agregar accesibilidad implica demasiado trabajo o arruina el diseño visual, pero eso no es verdad.

Tener accesibilidad en nuestros sitios web ayuda al SEO, hace que nuestras aplicaciones sean más fáciles de usar y simplifica la interacción de las personas con la app.

Construir una aplicación pensando en accesibilidad no es difícil. Existen pautas claras que nos muestran el camino, y la accesibilidad comienza desde las partes más básicas de nuestro código.

Empezando con WCAG y Section 508

Mi primera pregunta también fue: ¿cómo empiezo con la accesibilidad? ¿Cómo puedo asegurarme de seguir las pautas adecuadas? Es muy probable que hayas visto términos como WCAG 2.0, WCAG AA o Section 508 en diferentes sitios web o librerías, pero ¿qué significan realmente?

Cada uno de ellos es un conjunto de pautas para hacer que tu sitio web sea accesible. Tanto Section 508 como WCAG (Web Content Accessibility Guidelines) nos ayudan a que nuestro producto o sitio web sea accesible para personas con discapacidad.

Entonces, tenemos Section 508 y WCAG, pero ¿cuál de los dos debería usar?

Pautas de accesibilidad

Cuando empecé a aprender sobre accesibilidad, lo primero que me pregunté fue por qué existían dos pautas distintas. La que elijas depende principalmente de tu público objetivo. Por ejemplo:

Si tu aplicación es para el gobierno de Estados Unidos, necesitas cumplir con Section 508. Esta normativa establece las reglas para los sitios web utilizados por el gobierno estadounidense y sus agencias.

Lee más sobre Section 508

Si tu aplicación no está pensada para el gobierno de EE. UU., WCAG es la opción adecuada. Pero ¿recuerdas las referencias a WCAG A, AA o AAA?

WCAG, o Web Content Accessibility Guidelines, forma parte del W3C y define las pautas globales de accesibilidad.

En mi caso, voy a usar WCAG 2.1, que cuenta con 13 pautas y cuatro principios fundamentales:

• Perceptible: Cada usuario puede percibir la información presentada. El contenido debe estar disponible para cualquier persona, permitiendo que se vea y se lea, como utilizar imágenes con descripciones claras.

• Operable: Permite que el usuario interactúe con cualquier elemento usando mouse, teclado o pantalla táctil.

• Comprensible: El contenido debe ser fácil de seguir, claro y predecible.

• Robusto: El contenido debe poder consumirse de forma confiable a través de diversas tecnologías de asistencia.

Como mencioné antes, existen los niveles A, AA y AAA. Pero ¿qué significa cada uno?

• A: Características básicas de accesibilidad.

• AA: Resuelve las barreras más comunes de accesibilidad.

• AAA: Nivel máximo de accesibilidad.

Tip: Si quieres que tu producto cumpla con los requisitos del gobierno de EE. UU. y sea accesible para todos los usuarios, usar WCAG 2.1 AA cubre todo lo exigido por Section 508.

Genial, ya elegimos WCAG. ¿Cuál es el siguiente paso?

Guía simple de accesibilidad

Podrías pensar que necesitas agregar aria-label o role a cada elemento, pero la accesibilidad real comienza con un marcado HTML básico y correcto.

Aprovechando las propiedades nativas de HTML podemos crear un sitio web accesible. HTML es semántico por naturaleza, lo que significa que podemos mejorar la accesibilidad simplemente estructurando bien nuestras etiquetas.

¡Empecemos!

Estructura de la página

Crea un archivo HTML vacío, define un doctype válido y configura el idioma usando el atributo lang. Esto ayuda a los navegadores y a las tecnologías de asistencia a interpretar el código, facilitando el trabajo de los lectores de pantalla.

• Define el charset en UTF-8 y asegura la compatibilidad con navegadores antiguos.

• Incluye un título único en <title>, lo cual beneficia a los usuarios y al SEO 😎.

• Ajusta el tamaño de texto.

• Usa unidades relativas en CSS: rem o em.

<!doctype html>
<html lang="es">
   <meta charset="utf-8">
   <meta http-equiv="x-ua-compatible" content="ie=edge">
   <title>Market Store</title>
</html>

• Asegúrate de no tener atributos id duplicados. Los atributos y las etiquetas deben cerrarse de forma adecuada.

Pero ¿qué pasa con el contenido dentro del body?

¿Recuerdas las etiquetas <header>, <nav>, <main>, <footer> y <aside>?

• Usa solo uno de cada uno por página cuando representen secciones principales.

• Esto ayuda a mantener una jerarquía clara entre ellos.

• Incluye únicamente un elemento <main> por página.

• Podemos tener múltiples elementos <nav>, pero utiliza aria-label para darle contexto al usuario sobre cada menú.

• Cuida la jerarquía del contenido usando <h1>, <h2>, <h3>, etc. Mantén un orden lógico entre ellos.

• Utiliza un único <h1> por página.

• En lugar de usar <strong> o <b> para destacar un título, respeta el orden de los encabezados <h1>, <h2> y <h3>.

<header>
	<nav>
	    <a href="home">Home</a>
        <a href="about">About</a>
    </nav>
</header>
<main>
    <h1>Welcome to the store</h1>
    <p>We have a lot of products!</p>
    <h2>Electronics</h2>
    <!-- More content here -->
</main>
<aside>
    <p>Products</p>
    <nav aria-label="products">
	    <a href="fruits">Fruits</a>
        <a href="phones">Phones</a>
    </nav>
</aside>
<footer>
	<nav aria-label="footer links">
	    <a href="home">Home</a>
        <a href="about">About</a>
    </nav>
</footer>

¿Qué pasa con las listas?

Al mostrar una lista de elementos, HTML nos ofrece varias alternativas:

• Lista ordenada: <ol> para elementos con un orden específico.

• Lista desordenada: <ul> para elementos sin un orden en particular.

• Lista de descripción: <dl> para elementos que contienen términos y descripciones.

Conoce más sobre HTML Lists

Los lectores de pantalla interpretan estas listas con mucha precisión, usando esa información estructural para darle un mejor contexto a cada elemento.

Navegación

La navegación es fundamental para la usabilidad. Asegúrate de mantener una navegación consistente, así como una identificación clara del propósito de cada enlace.

<nav>
	<ul>
		<li><a href="home">Home</a></li>
        <li>
		    <a href="offers">Offers
                <span class="k-sr-only">Products with Discounts</span>
            </a>
		</li>
		<li>
		    <a href="about">About
                <span class="k-sr-only">About SuperMarket</span>
            </a>
		</li>
	</ul>
</nav>

Otra opción es crear un mapa del sitio usando <ol> o <ul>. Asegúrate de incluir información adicional en los enlaces sin alterar el diseño visual.

Para agregar información descriptiva extra sin cambiar tu diseño, puedes usar una clase como .k-sr-only (provista en este caso por Kendo UI) o utilidades similares para lectores de pantalla.

Kendo UI Accessibility for Screen Readers

Tablas

Las tablas son elementos muy utilizados en nuestras aplicaciones para mostrar información estructurada en filas, columnas y celdas. Pueden contener texto, imágenes, enlaces o botones.

Usa siempre <thead>, <tfoot> y <tbody>. Pero ¿qué pasa con <caption>, <th>, el atributo scope (col, row, colgroup) y <colgroup>?

Ejemplo:

<table>
   <caption>Title of Table</caption>
   <thead>
      <tr>
         <th scope="col">First Column Name</th>
         <th scope="col">Second Column Name</th>
         <th scope="col">Third Column Name</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Data 1 in row 1</td>
         <td>Data 2 in row 1</td>
         <td>Data 3 in row 1</td>
      </tr>
      <tr>
         <td>Data 1 in row 2</td>
         <td>Data 2 in row 2</td>
         <td>Data 3 in row 2</td>
      </tr>
   </tbody>
</table>

1. Caption: Funciona como el título de la tabla y ayuda a las personas a comprender rápidamente su propósito.

2. Encabezados (Headers): La fila superior (dentro de <thead>) contiene los nombres de cada columna y actúa como encabezado.

3. Filas y celdas: La parte principal de la tabla (dentro de <tbody>) está compuesta por filas (<tr>) y celdas (<td>), donde cada celda almacena datos relacionados con su columna correspondiente.

4. Scope: El atributo scope en <th> le indica al lector de pantalla si ese encabezado corresponde a una columna o a una fila.

Asegúrate de que la tabla tenga sentido al leerse de arriba hacia abajo y de izquierda a derecha, ya que así es como la procesan los usuarios con lectores de pantalla.

Formularios

Los formularios suelen ser el punto principal de interacción en nuestras aplicaciones web. Para hacerlos accesibles, debemos garantizar que cualquier persona pueda ingresar datos, seleccionar opciones y enviar información fácilmente, sin importar sus capacidades. Esto implica pensar en lectores de pantalla, navegación por teclado y contraste visual claro.

• Asegúrate de que los placeholders tengan suficiente contraste visual.

• Etiqueta los inputs correctamente. Conecta los <label> con sus campos mediante el atributo for, para que los usuarios con lectores de pantalla sepan qué dato deben ingresar.

• Proporciona nombre, rol y valor adecuados.

• Evita bloqueos de teclado (keyboard traps). Si utilizas atajos de teclado, permite reconfigurarlos o desactivarlos.

• Muestra los errores de validación en texto visible; utiliza novalidate en los formularios si manejas validación personalizada.

• Cuando un input o elemento interactivo reciba el foco, haz que sea visualmente claro para orientar a los usuarios.

Por ejemplo, en los inputs:

<form id="subscribe">
    <label for="name">
		Name
		</label>
		<input id="name" required>
    </form>

Sin embargo, al trabajar con botones de opción (radio buttons), usa siempre un elemento <fieldset>.

<fieldset>
<legend>Get emails</legend>
<label>
   <input type="radio" name="yes" value="yes">Yes
    </label>
    <label>
   <input type="radio" name="no" value="no">No
    </label>
</fieldset>

El ejemplo completo:

<form id="subscribe">
        <label for="name">
          Name
          <input id="name" required />
        </label>
 
        <label for="lastName">
          LastName
          <input id="lastName" required />
        </label>
 
        <fieldset>
          <legend>Get emails</legend>
          <label> <input type="radio" name="yes" value="yes" />Yes </label>
          <label> <input type="radio" name="no" value="no" />No </label>
        </fieldset>
        <button type="submit" role="button">Send</button>
      </form>

Resumen

El mundo de la accesibilidad web es enorme. En mi experiencia, aplicar accesibilidad en tus proyectos no solo mejora la calidad de tu sitio y tu criterio como desarrollador, sino que también aporta directamente a construir una web más abierta e inclusiva para todos.

• Pautas de WCAG

• Información general sobre Section 508

• Lighthouse Accessibility Scoring

Foto por Erik Mclean en Unsplash