Lección 12: Accesibilidad

La accesibilidad en el desarrollo web no solo aumenta el espectro de visitantes que pueden navegar en un sitio, que ya debería ser una razón suficientemente de peso para dedicarle tiempo, sino que moralmente deberíamos estar obligados. En caso contrario estamos expulsando, involuntariamente, a un sector de la población que posee el mismo derecho que tú a navegar por internet. Y por si no fuera poco, debes saber que cuando desarrollas páginas web para instituciones públicas la accesibilidad es un requisito básico.

Las personas que necesitan usar accesibilidad web son aquellas que tienen discapacidades visuales, auditivas, motoras o cognitivas. También incluye a las personas mayores que pueden albergar dificultades para usar la tecnología y necesitas apoyos tecnológicos. Las personas con discapacidades visuales pueden requerir el uso de lectores de pantalla o aumentos de texto. Las personas con discapacidades auditivas utilizan subtítulos o transcripciones para entender el contenido de un vídeo o audio. Las personas con discapacidades motoras utilizan herramientas de asistencia para navegar en un sitio web, como un ratón adaptativo o teclado especial. Las personas con discapacidades cognitivas pueden necesitar un diseño simple y fácil de usar para comprender y navegar en un sitio web.

¿Y como podemos satisfacer todas las necesidades? Un primer paso es creando estructuras simples y coherentes que no tienen porque estar en contra posición de un buen diseño. Recuerda, la accesibilidad empieza por el HTML. Debemos garantizar que los sitios incluyan unas prácticas mínimas que acercarán el contenido a todo tipo de público.

A continuación repasaremos los elementos más esenciales en la accesibilidad web que deberías aplicar en tu flujo de trabajo.

Buena semántica

Utiliza encabezados en el contenido, etiquitas apropiadas para contenido, estructura de listas para listas, etc. Evita complejidades o elementos que no aportan nada al sitio. Cuanto más simple sea la estructura, más fácil será para los usuarios con discapacidades navegar por el sitio.

<h1>Cafetería Mule</h1>
<h2>Localización</h2>
<p>Nos encontramos en la <address><a href="geo:39.4597563,-0.3737169">calle Maldonado número 12</a></address></p>
<h2>Nuestra carta</h2>
<ul>
  <li><a href="#cafe">Café</a></li>
  <li><a href="#te">Té</a></li>
  <li><a href="#zumos">Zumos</a></li>
</ul>

Indica el idioma

Marca al inicio de tu página el idioma que estás utilizando. Esto ayudará a los lectores de pantalla a pronunciar correctamente el contenido. Además de que los motores de búsqueda podrán indexar mejor tu contenido y los traductores automáticos podrán hacer su trabajo.

<html lang="es">

Evita bloquear el zoom

Cuando declares el meta viewport, evita incluir maximum-scale=1.0 y user-scalable=no ya que esto bloquea el zoom. Esto puede ser un problema para los usuarios con discapacidades visuales que necesitan ampliar el contenido para leerlo.

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">

Crea un hipervínculo de omisión

Los lectores de pantalla leen el contenido de una página en el orden en que aparece en el código HTML. Esto significa que los usuarios con discapacidades visuales deben escuchar todo el contenido de navegación antes de llegar al contenido principal. Si quieres ayudarles, y no hacerles perder el tiempo, puedes crear un hipervínculo de omisión que permita a los usuarios saltar directamente al contenido principal.

<a href="#main">Saltar al contenido</a>

<main id="main">
    <!-- contenido -->
</main>

Asegúrate que todos tus `input` contienen `label`

Todo input debe tener un label asociado. Esto ayudará a los usuarios con discapacidades visuales a saber qué información deben introducir en el campo.

Puedes elvolver el label, junto al texto, sobre el input.

<label>
    Pez favorito
    <select name="mi-pez-favorito">
	<option value="1">Dory</option>
	<option value="2">Nemo</option>
	<option value="3">Bruce</option>
    </select>
</label>

Utilizar el atributo for para asociar el label al input.

<label for="pez">Pez favorito</label>
<select name="mi-pez-favorito" id="pez">
    <option value="1">Dory</option>
    <option value="2">Nemo</option>
    <option value="3">Bruce</option>
</select>

O usar el atributo aria-label para asociar el label al input.

<select name="mi-pez-favorito">
    <option value="" aria-label="Pez favorito" disabled selected>Pez favorito</option>
    <option value="1">Dory</option>
    <option value="2">Nemo</option>
    <option value="3">Bruce</option>
</select>

Utiliza `aria-label` en botones o hipervínculos vacíos

En caso que un botón o hipervínculo no contenga texto, o su contenido no describa el comportamiento, utiliza aria-label para darle un nombre.

<button type="button" aria-label="Cerrar">X</button>

<a href="#" aria-label="Siguiente">➡️</a>

Aplica `aria-hidden` en elementos decorativos

Si tienes elementos decorativos que no aportan información al contenido, utiliza aria-hidden="true" para indicar que no deben ser leídos por los lectores de pantalla.

<h1>Fruta saludable</h1>
<ul>
    <li><span aria-hidden="true">🍎</span>Manzana</li>
    <li><span aria-hidden="true">🍌</span>Plátano</li>
    <li><span aria-hidden="true">🍓</span>Fresa</li>
</ul>

También puedes aplicarlo a estructuras más complejas o que envuelvan a otras.

<button aria-label="abrir filtro">
    <div class="icono" aria-hidden="true">
	<span></span>
	<span></span>
	<span></span>
    </div>
</button>

Usa `scope` en las celdas de encabezado

Si tienes una tabla, utiliza el atributo scope en las celdas de encabezado para indicar si el encabezado es para una columna o una fila.

<table>
    <thead>
        <tr>
            <th scope="col">Nombre</th>
            <th scope="col">Edad</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Juan</td>
            <td>45</td>
        </tr>
    </tbody>
</table>

Utiliza HTML de contenido para estructurar

Las etiquetas de contenido ayudará a los lectores de pantalla a entender el contexto de la información. Por ejemplo, si tienes estructuras repetitivas, como los comentarios de un post, utiliza article.

<aside>
    <p>Recuerda que para comentar debes ser un gran conquistador e ir a <a href="registro.html">registro</a></p>
</aside>
<main class="comentarios">
    <h1>La accesibilidad web</h1>
    <p>La accesibilidad web es la posibilidad de que cualquier persona pueda utilizar una página web, independientemente de sus capacidades o limitaciones.</p>
    <h2>Comentarios</h2>
    <article>
        <h2>Keanu Reeves</h2>
        <p>Gracias por pensar en mi daltonismo</p>
    </article>
    <article>
        <h2>Andrea Bocell</h2>
        <p>Con mi lector de pantalla leo perfectamente tu web.</p>
    </article>
    <article>
        <h2>Stephen Hawking</h2>
        <p>Puedo navegar con mi raton asistido. Las posibilidades son infinitas.</p>
    </article>
</article>

Incluye siempre un texto alternativo en tus imágenes

El texto alternativo es un atributo que se utiliza en las imágenes para describir su contenido. Esto ayuda a los lectores de pantalla a entender qué hay en la imagen.

<img src="asdy7as8f6a.webp" alt="Gato mirando a la cámara">

Posiciona el contenido relacionado próximo entre sí

Si tienes contenido relacionado, como un formulario, colócalo el label, el input y el error próximo entre sí. Esto ayudará a los lectores de pantalla a entender que están relacionados.

<form>
    <label>
	Buscar
	<input type="search" name="buscar">
    </label>
    <span class="error" aria-hidden>No se ha encontrado resultados</span>
    <button type="submit">Buscar</button>
</form>

Suplanta etiquetas con ARIA (Accessible Rich Internet Applications)

Por temas estéticos, a veces se suplantan etiquetas por otras. Por ejemplo, un input por un span. Es muy común ya que los checkbox no son maleables a nivel de diseño. En estos casos, utiliza ARIA para indicar que el elemento tiene un rol diferente.

<input type="checkbox" id="condiciones">
<label for="condiciones">Acepto las condiciones</label>

<span
    role="checkbox"
    aria-checked="false"
    tabindex="0"
    aria-labelledby="condiciones"></span>
<label id="condiciones">Acepto las condiciones</label>

Puedes profundizar en la documentación de Mozilla.

Utiliza `aria-live` para actualizar contenido dinámico

Si tienes contenido dinámico, como un chat, utiliza aria-live para indicar que el contenido se actualiza automáticamente.

<div aria-live="polite">
    <p>El usuario Cervantes ha escrito un mensaje nuevo</p>
</div>

Los valores que puede tener son:

polite: Se notificará al usuario pero no se interrumpirá su navegación. La prioridad es baja.
assertive: Se notificará al usuario y se interrumpirá su navegación. La prioridad es alta.
off: No se notificará al usuario a no ser que lo solicite el foco.

Convertir un Logo en una cabecera de primer nivel

Cuando estamos creando un menú, o un <header>, es muy común que el logo sea un enlace a la página principal. Además, es recomendable que el logo sea un encabezado de primer nivel. De esta forma, los lectores de pantalla podrán leerlo, los motores de búsqueda podrán indexarlo y mantendremos una buena semántica de cabeceras.

Para lograrlo utilizando el atributo role podemos indicar que el <a> tiene un rol de encabezado. Además, si incluimos el atributo aria-level marcaremos el nivel. En este caso: 1.

<a href="/" role="heading" aria-level="1">
    <img
        src="logo.svg"
        alt="Logo"
    >
</a>

Con las pautas anteriores podrás abrir tu web a un público más amplio. Pero si quieres profundizar en la accesibilidad web, te recomiendo que leas la guía de accesibilidad web de Mozilla.

Actividad 1

En el inspector de elementos, existe una pestaña llamada Accessibility que te permite ver cómo se ve tu web para un lector de pantalla.

Actívala y comprueba navega por algunas de tus webs favoritas. ¿Son accesibles? ¿Qué podrían mejorar?

Actividad 2

Crea una web sencilla con un formulario de registro. Utiliza las técnicas de accesibilidad que has aprendido en esta lección y a continuación, comprueba que funciona correctamente con el inspector de accesibilidad.

Esta obra está bajo una Licencia Creative Commons Atribución-NoComercial-SinDerivadas 4.0 Internacional.

Atribución/Reconocimiento-NoComercial-SinDerivados 4.0 Internacional

¿Me ayudas?

Comprame un café — Pulsa sobre la imagen

No te sientas obligado a realizar una donación, pero cada aportación mantiene el sitio en activo logrando que continúe existiendo y sea accesible para otras personas. Además me motiva a crear nuevo contenido.

Comentarios

{{ comments.length }} comentarios

Nuevo comentario

Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}

Escribe el primer comentario