Mejorando la Accesibilidad Web: Una Guía Práctica para Desarrolladores

Hoy en día, al crear una aplicación, la accesibilidad a menudo se ignora, o algunos desarrolladores piensan que aria-label es todo lo que necesitan. Algunas personas también piensan que agregar accesibilidad requiere más trabajo o hace que el diseño sea menos atractivo, pero eso no es cierto.

Tener accesibilidad en los sitios web en realidad ayuda al SEO, hace que nuestras aplicaciones sean más fáciles de usar y simplifica cómo los usuarios interactúan con la aplicación

Construir una aplicación teniendo en cuenta la accesibilidad no es difícil. Hay directrices a seguir que nos muestran qué hacer. La accesibilidad comienza con las partes más básicas.

Comenzando con WCAG y Sección 508

Mi primera pregunta también fue: ¿Cómo empiezo con la accesibilidad? ¿Cómo puedo asegurarme de seguir las directrices de accesibilidad? Es posible que hayas visto términos como WCAG 2.0, WCAG AA o Sección 508 en diferentes sitios web o bibliotecas, pero ¿qué significan?

Cada uno es un conjunto de directrices para hacer tu sitio web accesible. Tanto 508 como WCAG (Pautas de Accesibilidad para el Contenido Web) nos ayudan a hacer nuestro producto o sitio web accesible para personas con discapacidades.

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

Directrices de Accesibilidad

Primero me pregunté por qué hay dos directrices al aprender sobre Accesibilidad. La que elijas depende de tu público objetivo. Por ejemplo:

Si tu aplicación es para el gobierno de EE. UU., necesitas seguir la Sección 508. Esta directriz establece las reglas para los sitios web utilizados por el gobierno y sus agencias.

Leer más sobre Sección 508

Si tu aplicación no es para el gobierno de EE. UU., WCAG es adecuado. Pero, ¿recuerdas WCAG AA, A o AAA?

WCAG, o Pautas de Accesibilidad para el Contenido Web, es parte del W3C y sigue las directrices globales para la accesibilidad.

En mi caso, usaré WCAG 2.1, que tiene 13 directrices y cuatro principios:

Perceptible: Cada usuario puede percibir la información presentada. El contenido debe estar disponible para cualquier usuario, visto y leído, como imágenes con subtítulos.
Operable: Permitir al usuario interactuar con cualquier elemento con un mouse, teclado o toque.
Comprensible: El contenido debe ser fácil de seguir, claro y predecible.
Robusto: Acceder al contenido usando tecnologías.

Como mencioné, hay niveles A, AA, AAA. ¿Pero qué significan?

A: Características básicas de accesibilidad.
AA: Características comunes de accesibilidad y barreras.
AAA: Alto nivel de accesibilidad.

Consejo: Para hacer mi producto adecuado para el gobierno de EE. UU. y todos los usuarios, usar WCAG 2.1 AA cubre todo en la Sección 508.

Genial, hemos elegido WCAG. ¿Qué sigue?

Guía Simple de Accesibilidad

Puedes pensar que necesitas agregar algunos aria-labels o roles a cada elemento, pero la accesibilidad comienza con el marcado básico.

Usando propiedades HTML, podemos crear un sitio web accesible. HTML es semántico, lo que significa que podemos mejorar la accesibilidad simplemente mejorando el marcado correctamente.

¡Comencemos!

Estructura de Página

Crea un archivo HTML vacío, agrega un tipo de documento válido y establece el idioma usando el atributo lang. Esto ayuda a los navegadores y tecnologías de asistencia a leer el marcado y código, facilitando su uso por lectores de pantalla.

Establece charset a UTF-8 y asegura compatibilidad para IE.
Incluye un título único, lo cual beneficia tanto a usuarios como al SEO 😎.
Ajusta el tamaño del texto.
Usa unidades CSS relativas: 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 que no haya ID duplicados. Los atributos de los elementos y las etiquetas deben estar cerrados correctamente.

Pero, ¿qué pasa con el cuerpo?

¿Recuerdas los elementos <header>, <nav>, <main>, <footer> y <aside>?

Usa solo uno de cada uno por página.
Esto ayuda a mantener una relación entre ellos.
Incluye solo un elemento main por página.
Podemos tener múltiples elementos nav, pero usa aria-label para dar contexto al usuario.
Sé consciente de la estructura del contenido usando h1, h2, h3, etc. Mantén la relación entre ellos.
Usa solo un h1 por página.
En lugar de usar <strong> o <b> para enfatizar un área, usa el orden h1, h2, h3.

<header>
	<nav>
	    <a href="home">Inicio</a>
        <a href="about">Acerca de</a>
    </nav>
</header>
<main>
    <h1>Bienvenido a la tienda</h1>
    <p>¡Tenemos muchos productos!</p>
    <h2>Electrónica</h2>
    <!-- Más contenido aquí -->
</main>
<aside>
    <p>Productos</p>
    <nav aria-label="productos">
	    <a href="fruits">Frutas</a>
        <a href="phones">Teléfonos</a>
    </nav>
</aside>
<footer>
	<nav aria-label="enlaces del pie de página">
	    <a href="home">Inicio</a>
        <a href="about">Acerca de</a>
    </nav>
</footer>

¿Qué pasa con los elementos de lista?

Al mostrar una lista de elementos, HTML ofrece varias opciones:

Lista ordenada: <ol> para elementos en un orden específico.
Lista desordenada: <ul> para elementos sin un orden particular.
Lista de descripción: <dl> para elementos con descripción.

Aprende más sobre Listas HTML

Los lectores de pantalla manejan estas listas de manera efectiva, usando la información para proporcionar un mejor contexto para cada elemento.

Navegación

La navegación es crucial para la usabilidad. Asegura una navegación consistente, así como una identificación y propósito de enlace consistentes.

<nav>
	<ul>
		<li><a href="home">Inicio</a></li>
        <li>
		    <a href="offers">Ofertas
                <span class="k-sr-only">Productos con descuentos</span>
            </a>
		</li>
		<li>
		    <a href="about">Acerca de
                <span class="k-sr-only">Acerca de SuperMercado</span>
            </a>
		</li>
	</ul>
</nav>

Alternativamente, crea un mapa del sitio usando <ol> o <ul>. Asegúrate de incluir información adicional para enlaces sin alterar el diseño.

Para agregar información extra sin cambiar tu diseño, puedes usar la clase .k-sr-only proporcionada por Kendo UI.

Accesibilidad de Kendo UI para Lectores de Pantalla

Tablas

Las tablas son un elemento comúnmente usado en nuestras aplicaciones para mostrar información de forma estructurada, con filas, columnas y celdas. Pueden contener texto, imágenes, enlaces o botones.

Siempre usa <thead>, <tfoot> y <tbody>. Pero, ¿qué pasa con <caption>, <th>, <scope> (col, row, colgroup) y <colgroup>?

Ejemplo:

<table>
   <caption>Título de la Tabla</caption>
   <thead>
      <tr>
         <th scope="col">Nombre de la Primera Columna</th>
         <th scope="col">Nombre de la Segunda Columna</th>
         <th scope="col">Nombre de la Tercera Columna</th>
      </tr>
   </thead>
   <tbody>
      <tr>
         <td>Dato 1 en fila 1</td>
         <td>Dato 2 en fila 1</td>
         <td>Dato 3 en fila 1</td>
      </tr>
      <tr>
         <td>Dato 1 en fila 2</td>
         <td>Dato 2 en fila 2</td>
         <td>Dato 3 en fila 2</td>
      </tr>
   </tbody>
</table>

Caption: Esto es como un título para la tabla, ayudando a las personas a entender su propósito.
Encabezados: La fila superior (dentro de <thead>) contiene nombres para cada columna, actuando como títulos.
Filas y Celdas: La parte principal de la tabla (dentro de <tbody>) consiste en filas (<tr>) y celdas (<td>), con cada celda conteniendo datos relacionados con su columna.
Ámbito: El término 'ámbito' en <th> indica si el encabezado es para una columna o una fila.

Asegúrate de que la tabla pueda entenderse cuando se lea de arriba a abajo y de izquierda a derecha, ya que así es como los usuarios de lectores de pantalla la percibirán.

Formularios

Los formularios son a menudo la principal manera en que los usuarios interactúan con las aplicaciones web. Para hacerlos accesibles, necesitamos asegurarnos de que todos puedan ingresar datos, elegir opciones y enviar información fácilmente, independientemente de sus habilidades. Esto incluye pensar en lectores de pantalla, navegación por teclado y clara visibilidad.

Asegúrate de que los placeholders tengan buen contraste.
Etiqueta correctamente los inputs. Conecta etiquetas a sus campos de entrada, para que los usuarios de lectores de pantalla sepan para qué es cada campo.
Proporciona nombre, rol y valor.
Evita las trampas de teclado. Si usas atajos, permite reasignarlos o desactivarlos.
Muestra validaciones de error en texto; usa novalidate para formularios.
Cuando un input o elemento interactivo esté enfocado, hazlo visualmente distinto para ayudar a usuarios con enfoque o atención limitados.

Por ejemplo, Inputs:

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

Sin embargo, cuando uses un botón de radio, siempre utiliza un fieldset.

<fieldset>
<legend>Recibir correos electrónicos</legend>
<label>
   <input type="radio" name="yes" value="yes">Sí
    </label>
    <label>
   <input type="radio" name="no" value="no">No
    </label>
</fieldset>

El ejemplo final:

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

        <label for="lastName">
          Apellido
          <input id="lastName" required />
        </label>

        <fieldset>
          <legend>Recibir correos electrónicos</legend>
          <label> <input type="radio" name="yes" value="yes" />Sí </label>
          <label> <input type="radio" name="no" value="no" />No </label>
        </fieldset>
        <button type="submit" role="button">Enviar</button>
      </form>

Resumen

El mundo de la accesibilidad es una vasta aventura. Estoy aprendiendo mucho, pero abrazar la accesibilidad web es un viaje que mejora tu sitio web, tu conocimiento y contribuye positivamente a un mundo digital más inclusivo.