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.
¿Me invitas a un café? ☕
Puedes hacerlo usando el terminal.
ssh customer@andros.dev -p 5555
Comentarios
Nuevo comentario
Nueva replica {{ formatEllipsisAuthor(replyComment.author) }}
Escribe el primer comentario
{{ comments.length }} comentarios