Accesibilidad web: errores más comunes y cómo solucionarlos

Cuando creas una página web sueles fijarte en su diseño y usabilidad, pero no siempre se tiene en cuenta la accesibilidad, es decir, el hecho de que no todas las personas acceden a ella de la misma forma. Toma nota de estos consejos para conseguir que tu web sea más accesible.

Aunque navegar por la red puede parecer una tarea sencilla, para muchos supone un esfuerzo extra, debido a que gran parte de las páginas no están adaptadas o pensadas para facilitarle el acceso a personas con diversidad funcional.

La accesibilidad web es una asignatura pendiente en muchas páginas. Según datos del W3C (World Wide Web Consortium), encargado de crear los estándares en el funcionamiento Internet y que fija las pautas de accesibilidad recomendadas, más del 90 % de las webs presentan problemas de accesibilidad.

Si quieres que tu página sea más accesible para todos, a continuación, repasamos los errores más habituales y cómo corregirlos. Y si quieres ir un paso más allá, no te pierdas este completo tutorial para mejorar la accesibilidad de tu web paso a paso.

Los 5 errores de accesibilidad más comunes

1. Color con bajo contraste

A veces, por querer ser diferente o por priorizar los gustos en lugar de la accesibilidad, solemos optar por combinaciones de colores en nuestro diseño web que no resultan sencillas de ver.

La falta de contraste entre colores es uno de los errores más habituales, que dificultan la compresión de las páginas a las personas con baja visión. Por ejemplo, es más legible un texto negro sobre blanco que un texto escrito en rojo sobre verde.

El contraste se mide mediante un ratio que tiene que ser por lo menos de 4,5/1 para ser correcto. Blanco sobre blanco tendría una puntuación de 1/1 (sin contraste, no se vería nada) y negro sobre blanco 21/1 (muy contrastado).

Este error es muy sencillo de corregir. En todos los elementos de tu web (textos, botones, imágenes…) que combinen varios colores deberías revisar que tengan un contraste correcto para que sean accesibles. Para revisar el contraste de tus diseños puedes usar herramientas como Contrast Checker.

2. Imágenes sin etiqueta alt

Si todavía no sabes qué es la etiqueta alt, estás pasando por alto uno de los elementos de accesibilidad más importantes. Los alt son unos textos descriptivos que se añaden en el código HTML de las imágenes para explicar lo que muestran.

¿Por qué son tan importantes? Muchas personas invidentes o con problemas de visión, utilizan lectores de pantalla que les van transcribiendo lo que aparece en las páginas. Estos lectores dictan lo que pone en los alt de las imágenes.

Por eso, es importante que añadas los alts en todas las fotografías y gráficos que utilices en tu página. Las etiquetas alt tienen el siguiente formato:

<img src=»imagen.jpg» alt=»descripción de la imagen»>

¡No olvides incluirla en todas tus imágenes!

3. Enlaces vacíos o poco claros

Los enlaces son imprescindibles en Internet, ya que facilitan la navegación y nos mueven de un sitio a otro. Por eso, cuando pones un hipervínculo o enlace en tu contenido debe quedar claro hacia donde dirige.

En todos los enlaces debe de haber un texto indicando el destino. En el caso de imágenes con enlaces, para que no se detecte como vacío, puedes usar la etiqueta alt para describir el destino.

Por otro lado, cuando creas un enlace sencillo (texto linkado hacia una URL) debes de fijarte que el texto en el que se vincula, el anchor text, sea descriptivo. Por ejemplo, si quieres enlazar una receta, utiliza el texto “receta de tortilla”, en lugar de usar un “haz clic aquí”o similar, en tu anchor.

Así queda más claro hacia donde dirige el enlace y evitas ambigüedades.

4. Formularios sin etiquetas

Los formularios son de los elementos web que más abundan online y, junto con ellos, también abundan los errores de falta de etiquetado.

Al igual que con los alts, las etiquetas en los formularios son leídas por los lectores de pantalla y les indican a las personas que los utilizan el valor que hay que introducir en cada campo. El formato habitual de etiquetas en los formularios es el siguiente:

<label for=»nombre»>Introduzca su nombre:</label>

<input type=»text» id=»nombre»/>

Para que tus formularios sean accesibles, define bien los campos en la etiqueta <label>, que es lo que leerá el lector.

5. Encabezados mal asignados

Los encabezados o títulos son los indicadores principales que establecen la jerarquía en cualquier contenido de página y, aunque parece algo trivial, es muy habitual cometer errores en su asignación.

En muchos sitios web se olvidan de establecer algún nivel de encabezado, o directamente se omiten todos. Esto dificulta mucho la compresión de la página para personas con problemas cognitivos o que utilicen lectores.

Las etiquetas de encabezado tienen el siguiente formato <h1>, <h2>, <h3>… y acompañan a los títulos y subtítulos de los contenidos.

Un ejemplo de estructura de encabezados sería el siguiente:

<h1>Título de la página

<h2> Encabezado secundario I

<h3> Encabezado terciario

<h2> Encabezado secundario II

(…)

Para que tus encabezados sean adecuados deben seguir estas pautas básicas: solo puede haber un único h1, es decir, un único título, y en los niveles inferiores puede haber más de uno, pero siguiendo el orden. No pongas un h3 sin antes haber puesto algún h2.

Y hasta aquí nuestro repaso de los errores más comunes. ¿Quieres saber más sobre accesibilidad? En dinahosting han hablado con el experto Ramón Corominas en su último webinar sobre cómo hacer tu web más accesible.