Accesibilidad

Podemos mejorar la accesibilidad de nuestras webs de forma muy sencilla, simplemente usando elementos HTML adecuados. Vamos a aprender formas de mejorar la experiencia de nuestros/as usuarios/as, sin coste alguno para el desarrollo.

---

En mi artículo del año pasado comentaba que la accesibilidad se puede resentir por un mal HTML. Vamos a darle la vuelta, y a aprender formas sencillas de mejorar la accesibilidad, simplemente usando elementos HTML adecuados.

Usa H(n)

Ya deberías usar encabezados (H1, H2, H3...) por varios motivos, pero te añado uno más: los lectores de pantalla suelen contar con accesos directos a los distintos encabezados de un documento. ¿Sabes ese típico movimiento en Z que haces con tu mirada para ojear una web antes de leerla en detalle? Pues usar encabezados permite hacer el mismo proceso a una persona que emplee un lector de pantalla.

Pon alt a tus imágenes… pero déjalo en blanco

Todas las imágenes tienen que tener un atributo alt, pero eso no significa que todas tengan que llevar un texto en el mismo. Existen muchos casos en los que la imagen que incluyes en tu código no aporta ninguna información de relevancia al resto del contenido. En esos casos, poner un texto perjudica la accesibilidad, en lugar de mejorarla.

En este ejemplo tenemos un texto que habla de saludar a tus clientes y escuchar sus gustos, acompañado de una imagen de un ordenador abriendo una tienda online. El texto y la imagen prácticamente no tienen que ver, está ahí para adornar. Cualquier texto que pongamos creará más confusión que ayuda a alguien que esté escuchando nuestra web:

“Saluda a tu cliente. Extiende tu brazo y ofrece al consumidor una bienvenida… imagen de tienda online…” ¿¿¿Qué???

En muchos más casos de los que imaginas, lo mejor es dejar alt en blanco: alt=””

Usa este diagrama para decidir cuándo poner alt.

Usa <button>

¿Tienes un elemento interactivo en tu web, que hace cosas mediante JavaScript? Usa un <button type=”button”> en lugar de atar tu js a divs o cosas similares. Sólo con esto, recibes todos estos beneficios frente a un div:

• Tiene estado :hover
• Tiene estado :active
• Es navegable mediante tab y recibe foco
• Al recibir foco, se puede lanzar con el teclado (intro y espacio)
• El lector anuncia que es un botón (role=”button”)
• Pueden tener estado disabled

Incluso deberías usar <button> frente a <a>. ¿Cuándo? Cuando tu <a> no tenga un href con sentido.

Usa <a>

¿Tienes un elemento interactivo en tu web que lleva a alguna parte? Usa un enlace, por favor, y no hagas guarradas con tu framework de JavaScript, como han hecho los de Passpack, por ejemplo. Un <a> tiene estas ventajas:

• Tiene estado :hover
• Tiene estado :active
• Es navegable mediante tab y recibe foco
• Al recibir foco, se puede lanzar con el teclado (intro)
• El lector anuncia que es un enlace

Comprueba que el foco es visible

Ya que en <button> y <a> hablamos de navegar mediante tab y recibir foco, comprueba que en tu CSS no estás eliminando el outline por defecto o, si lo haces, establece uno que se vea bien. De poco sirve tener elementos navegables con el teclado, si luego no se distingue dónde está el foco en cada momento.

Usa <ul>

Uno de los mayores culpables de esto es Bootstrap: en anteriores versiones, no se podía aplicar .row a un <ul> y .col-loquesea a los <li>. En la última versión, por lo que he probado, sí se puede… pero siguen sin usarlo en sus ejemplos ni la gente parece usarlo en los temas que crean con Bootstrap 4. Si tienes una lista de albums o una lista de productos, como en los anteriores enlaces… ¿no crees que lo más adecuado para esas listas es usar el elemento para listas en lugar de <div> para todo?

Usar el elemento <ul> hace que los lectores anuncien al usuario/a el total de elementos y el número por el que están navegando actualmente.

Oculta texto

…pero no me refiero a insertar palabras clave para intentar mejorar tu SEO, o guarradas similares. Me refiero a que, en casos en los que haya información que sólo se muestre de forma visual (iconos, colores, la propia disposición de los elementos…), añadas texto informativo y luego lo ocultes salvo para lectores de pantalla.

Si usas Bootstrap, por ejemplo, tienes disponible la clase .sr-only: ocultará visualmente el texto al que se la apliques, pero el lector de pantalla que llegue a ese código anunciará el texto igualmente.

Un caso para esto sería una lista de iconos (y nada más que iconos): una persona que vea la web entenderá que un icono de lápiz en un botón significa editar, pero “escuchando” la web sería imposible saberlo. Añadiendo el texto oculto, das esa información:

Inserta un enlace de “Saltar al contenido”

Pongamos que tu web tiene una cabecera gigante con un buscador, un menú con decenas de elementos, etc. Cuando un lector de pantalla llegue a esa cabecera, irá anunciando uno por uno todos los elementos. Si el usuario/a navega hacia uno de esos enlaces, la página se recargará… y el lector volverá a anunciar todos esos elementos. Podemos ahorrar este suplicio a nuestros/as visitantes insertando un link oculto hacia el contenido principal (con un #ancla). Esto permitirá ahorrarse todo ese contenido reiterativo y saltar directamente a la chicha de tu web.

Sin embargo, la accesibilidad no consiste sólo en hacer mejoras para personas con problemas de visión, sino para otras situaciones como, por ejemplo, movilidad reducida. De hecho, los lectores de pantalla disponen ya de ciertos atajos para realizar una función similar y saltar a lo importante. ¿Para quién será muy útil, entonces, nuestro enlace? Para personas que naveguen por nuestra web usando el teclado (o un dispositivo aún más simple como un switch).

El problema aquí es que quien navegue usando el teclado sí estará viendo la web y no le servirá de nada nuestro link oculto… a no ser que el link sea visible al recibir foco.

Para ello usaremos una variante de la clase del punto anterior:

Así, el elemento permanecerá oculto al visitar la web empleando el ratón, pero será visible al hacer foco usando el teclado (con la tecla tab). Obviamente, este enlace debería ser lo primero que reciba foco en tu HTML, si lo sitúas en el footer no servirá de nada.

Usa el atributo “lang”

Seguramente ya establecerás el atributo “lang” en la etiqueta html de tus archivos (y si no lo haces, deberías):

Con esto le decimos al navegador que nuestro contenido está en un determinado idioma. Al saber qué idioma tiene nuestra web, puede ofrecernos traducirla. Además, un lector de pantalla leerá la web usando la fonética adecuada para ese idioma y evitaremos que intente pronunciar castellano con acento inglés.

Además de usar ese atributo en la etiqueta html, lo puedes usar en cualquier elemento, si tienes una sección concreta en otro idioma: una letra de una canción, un cita de una película, etc.

Todos estos pequeños consejos no implican coste alguno en tiempo de desarrollo, son funciones de HTML que están ahí desde siempre, y permiten mejorar mucho la experiencia de las personas que visitan tu web. Apliquémoslas y hagamos la web más abierta 🙂