A la hora de realizar el handoff de un diseño al equipo de desarrollo, en términos de accesibilidad hay 3 cuestiones muy importantes que tienes tener claras:
¿Qué nivel de accesibilidad estamos persiguiendo?
¿El diseño cumple los estándares de las WCAG?
¿El equipo de desarrollo conoce los criterios de accesibilidad?
Contar con estas respuestas va a ayudarte a saber el nivel de detalle al que vas a tener que trabajar la documentación, de cara a que el resultado del producto sea totalmente accesible.
Una vez finalizada la fase de diseño, viene el segundo paso: otorgar al equipo de desarrollo todas las pautas necesarias, para que puedan perpetuar la accesibilidad por la que se ha velado durante la fase de diseño. Para ello será necesario definir varias cuestiones:
Roles semánticos y jerarquía de los elementos
Cuando los roles y la jerarquía del diseño se establecen correctamente, los desarrolladores pueden crear una estructura clara que facilita la navegación y comprensión del contenido, por parte de las tecnologías de asistencia.
Encabezados: Es importante que indiques la jerarquía de los encabezados: h1, h2, h3, etc... Esto permite comprender las diferentes secciones y subsecciones de una pantalla. En este punto es importante destacar que únicamente puede existir un h1 en cada pantalla (el del título principal). Además, debe establecerse un orden lógico. No puedes pasar de un h1 a un h3.
<h1>Blog de Tecnología</h1>
<h2>Últimas Noticias</h2>
<h3>Avance en Inteligencia Artificial</h3>
<h3>El futuro de la Realidad Virtual</h3>
<h2>Reseñas</h2>
<h3>Análisis del nuevo iPhone</h3>
Elementos interactivos: Indica el rol de los elementos interactivos, para que puedan ser detectados e identificados correctamente por las tecnologías de asistencia. Diferencia entre botones <button>, acciones que se realizan dentro de una página (si no es posible, puedes usar: role="button" tabindex="0") y enlaces <a href="">, navegación entre páginas.
<button onclick="enviarFormulario()">Enviar</button>
<div role="button" tabindex="0" onclick="enviarFormulario()">Enviar</div>
<a href="contacto.html">Contáctanos</a>
Campos de formularios: Cuando la etiqueta se encuentra visualmente junto al campo, utilizaremos <label> con un for que describa su propósito. Puede darse el caso de que la etiqueta no se encuentre justo antes o después del <input> (visualmente) sino que se encuentre en otro lugar de la pantalla, en ese caso se puede utilizar aria-label o aria-labelledby en el <input> para conectar correctamente cada campo con su etiqueta aunque estén separados visualmente.
<label for="email">Correo electrónico</label>
<input type="email" id="email" name="email" required>
<h2 id="nombre-label">Nombre Completo</h2>
<input type="text" id="nombre" aria-labelledby="nombre-label">
Componentes de selección: Todos los <checkbox>, <radio> y <select> que permiten la selección de opciones, deben ir acompañados por un for en el código.
<input type="checkbox" id="suscribir" name="suscribir">
<label for="suscribir">Suscribirme al boletín</label>
<fieldset>
<legend>Elige tu plan:</legend>
<input type="radio" id="plan1" name="plan" value="basico">
<label for="plan1">Básico</label>
<input type="radio" id="plan2" name="plan" value="premium">
<label for="plan2">Premium</label>
</fieldset>
Estado de interacción: Todos los elementos interactivos deben indicar su estado de forma clara: :hover, :focus, :disabled:, :active...
button {
background: #007bff;
color: white;
padding: 10px;
border: none;
}
button:hover {
background: #0056b3;
}
button:focus {
outline: 3px solid #ffcc00;
}
button:disabled {
background: #ccc;
cursor: not-allowed;
}
Roles de contenido: Estos roles también son conocidos como landmarks. Ayudan a organizar las secciones de la pantalla. Siempre que sea posible, se recomienda utilizar HTML, role solo se utilizará en el caso de que el HTML no sea lo suficientemente claro para las tecnologías de asistencia.
HTML: <header> , ARIA: role="banner": Encabezado del sitio. Solo puede haber 1 que sea el gobal de la pantalla, y pueden incluirse otros dentro de <section>, <article>....
HTML: <nav> , ARIA: role="navigation": Contiene menús y enlaces principales. Puede haber varios (menú principal y menú secundario).
HTML: <main>, ARIA: role="main": Contenido principal. Solo puede haber 1 por pantalla.
HTML: <aside> , ARIA: role="complementary": Contenido adicional (barras laterales o widgets).
HTML: <footer>, ARIA: role="contentinfo": Información del pie de página (créditos o políticas de privacidad).
HMTL: <section>, ARIA: role="region": Define secciones con contenido independiente dentro de la pantalla.
HTML: <form>, ARIA: role="form": Señala la existencia de un formulario.
<header role="banner">
<h1>Mi Sitio Web</h1>
</header>
<nav role="navigation">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main role="main">
<article>
<h2>Título del Artículo</h2>
<p>Contenido del artículo...</p>
</article>
</main>
<aside role="complementary">
<p>Información adicional...</p>
</aside>
<footer role="contentinfo">
<p>© 2024 Mi Sitio Web</p>
</footer>
Implementación de ARIA: Cuando HTML no es suficiente para describir la función de un elemento (un menú es dentro de un <div>) añadir un aria (role) ayuda a la accesibilidad. <div> no tiene un significado semántico porque es un contenedor genérico en HTML. Esto quiere decir que no indica qué tipo de contenido es, ni su propósito en la pantalla, por lo que las tecnologías de asistencia no saben interpretarlo, no saben si es navegación, un encabezado..., no tiene un rol específico ni aporta información adicional al contenido. Sucede lo mismo con <span>, que tampoco tiene significado semántico, es un contenedor de línea genérico.
No recomendable:
<div>
<p>Bienvenido a nuestra página web.</p>
</div>
Mejor alternativa:
<section>
<p>Bienvenido a nuestra página web.</p>
</section>
Ejemplo role SI necesario: Si por alguna razón usamos <div> en lugar de <nav>, entonces sí necesitamos role="navigation".
<div role="navigation">
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
</ul>
</div>
Ejemplo role NO necesario:
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Servicios</a></li>
</ul>
</nav>
*
<nav> Es un elemento semántico, esto quiere decir que el propio elemento HTML ya tiene un significado para navegadores y tecnologías de asistencia.
Orden de tabulación
Permite establecer un orden lógico en la navegación, de izquierda a derecha y de arriba a abajo (en español). No se debe alterar el tabindex, a no ser que sea estrictamente necesario (el navegador maneja el orden por defecto).
Buena práctica
<form>
<label for="nombre">Nombre</label>
<input type="text" id="nombre">
<label for="email">Correo Electrónico</label>
<input type="email" id="email">
<button type="submit">Enviar</button>
</form>
Mala práctica:
<input type="email" id="email" tabindex="1">
<input type="text" id="nombre" tabindex="2">
<button type="submit" tabindex="3">Enviar</button>
Solo los enlaces, botones y elementos de formulario reciben el foco en HTML, para el resto de elementos a los que se les quiera otorgar foco, habría que forzarlo añadiendo tabindex="0". También se puede utilizar para convertir en accesibles elementos no interactivos como <div>, <span>, <section>...
<div role="button" tabindex="0" onclick="abrirModal()">Abrir Modal</div>
*Hace que el <div> funcione como un botón sin alterar el orden de tabulación.
Elementos decorativos: Para indicar que los elementos decorativos no sean navegables, es necesario incluir tabindex="-1". De esta forma, ese elemento no será enfocado al activar el Tab, pero seguirá siendo accesible para los lectores de pantalla si contiene un alt.
Buena práctica:
<img src="decoracion.jpg" alt="" tabindex="-1">
Mala práctica:
<img src="decoracion.jpg" tabindex="0">
*No tiene sentido que una imagen decorativa reciba foco.
Etiquetas y descripciones
El texto alternativo (alt) permite describir imágenes, iconos y gráficos para personas con discapacidad visual.
Imágenes informativas: Cuando se incorpora una imagen de valor para la comprensión del contenido, debe agregársele un alt que sea lo suficientemente descriptivo para que la persona pueda hacerse una idea clara de lo que está representando esa imagen, y comprender el contexto.
<img src="mapa-metro.png" alt="Mapa del metro con estaciones marcadas en color azul y rojo.">
<img src="grafico-ventas.png" alt="Gráfico de ventas de 2023: aumento del 20% en el segundo trimestre.">
Imágenes decorativas: Si una imagen no aporta valor, debe tener una etiqueta alt="" para que el lector de pantalla la pase por alto. También se puede utilizar el aria-hidden="true"
<img src="fondo-textura.jpg" alt="">
<img src="fondo-textura.jpg" aria-hidden="true">
Iconos funcionales: Si un icono forma parte de una acción, debe tener una descripción accesible con un aria-label o aria-hidden. Con el aria-label estaríamos describiendo el botón, y con el aria-hidden="true", en el svg, evitamos que el lector de pantalla lea el icono ya que no aporta valor.
<button aria-label="Enviar mensaje">
<svg aria-hidden="true">
<path d="M10 20 L20 10 L10 0 Z"/>
</svg>
</button>