Cómo mejorar la accesibilidad de tu web paso a paso

Actualizado el viernes, 22 septiembre, 2023

¿Es tu web accesible? Vemos paso a paso diferentes pautas a seguir para mejorar la accesibilidad de tu web.

Una web accesible es aquella que está diseñada para que todas las personas, sin importar sus habilidades o sus capacidades, puedan usarla fácilmente.

¿Por qué es importante que una web sea accesible? Pues, en primer lugar, se trata de ser inclusivos y respetar la diversidad. Todos merecemos tener las mismas oportunidades de acceder a la información y a los servicios en línea.

En segundo lugar, según la Ley 11/2023, antes de 2025 tendrás que asegurarte de que tu web sea accesible. No cumplir con esta normativa puede conllevar problemas legales y sanciones.

Por eso, aunque aún estamos en una fase muy temprana de adaptación a la ley, en este post te daremos algunas pautas y trucos para mejorar tu web en lo que a accesibilidad se refiere.

Cualquier web debe cumplir con un nivel medio de accesibilidad (AA). Este baremo se basa en una norma llamada UNE 139803, que utiliza las pautas de accesibilidad para el contenido web (WCAG). La última versión de WCAG es la 2.1.

En tercer lugar, hacer que tu web sea accesible tiene beneficios comerciales, pues se amplía la cantidad de personas que pueden visitarla y utilizarla. Eso significa más clientes y más oportunidades de negocio. ¡Es una forma inteligente de llegar a más gente!

Aunque ya te hemos dado algunos consejos sobre cómo mejorar la accesibilidad en anteriores contenidos, aquí recopilamos las diferentes acciones que puedes llevar a cabo en tu web de forma más detallada.

Análisis de accesibilidad

Para verificar si estás cumpliendo con todas estas normas WCAG y qué modificaciones debes hacer en tu web, hay diferentes herramientas útiles que puedes encontrar en Internet:

• https://www.w3.org/WAI/test-evaluate/es
• https://www.accessibilitychecker.org/
• https://wave.webaim.org/
• https://www.w3.org/WAI/test-evaluate/#tools.

Aunque estas herramientas están bien, es importante recordar que no son infalibles. Siempre se requiere una revisión y análisis por nuestra parte para asegurarnos de que la web cumple realmente con los estándares de accesibilidad.

Estas pruebas automáticas pueden detectar ciertos problemas, pero no capturan todos los aspectos y contextos específicos de uso.

Además, hay elementos como la calidad del contenido, el diseño inclusivo y la experiencia de usuario que también deben ser evaluados manualmente. Por tanto, debemos ser proactivos y realizar una revisión minuciosa para garantizar una experiencia accesible para todos los usuarios.

A continuación, te haremos un resumen de las características básicas sobre las que debes poner el foco y cómo solucionar los errores más comunes. Resolviendo estos errores conseguirás cumplir muchas de las especificaciones de WCAG y mejorar la accesibilidad de tu web.

Pasos para tener una web más accesible

Módulo 1: Cómo hacer tu web perceptible

Cuando se dice que una página es “perceptible” significa que su contenido y elementos son claramente visibles y audibles para todos los usuarios, independientemente de sus capacidades. Una página perceptible garantiza que la información presentada pueda ser percibida sin dificultad, tanto visualmente como a través del sonido.

Para lograr la percepción adecuada, es necesario considerar aspectos como el contraste de colores para facilitar la legibilidad, el uso de tamaños de fuente adecuados, la disponibilidad de alternativas para contenido multimedia (como subtítulos para vídeos) y la utilización de etiquetas y atributos descriptivos para imágenes y elementos interactivos.

Podríamos agrupar entonces los objetivos principales de este apartado en:

• Imágenes y gráficos: es necesario que en estos casos se proporcione un texto alternativo de calidad que describa lo que quiera comunicar la imagen o el gráfico. En caso de que el único objetivo de la imagen sea decorativo, podemos emplear el atributo: Aria-hidden=”true”
• Vídeos: es importante añadir una pista de audio que incluya subtítulos de los diálogos.

Ejemplo de vídeo accesible

Para agregar subtítulos a un video en HTML, puedes utilizar el elemento <track> junto con el elemento <video>. El elemento <track> se utiliza para especificar un archivo de subtítulos en formato WebVTT (Web Video Text Tracks) que se asociará con el video. Aquí tienes un ejemplo de cómo agregar un track de subtítulos en HTML:

<video controls>
  <source src="ruta_del_video.mp4" type="video/mp4">

  <!-- Track de subtítulos -->
  <track src="ruta_del_subtitulo.vtt" kind="subtitles" srclang="es" label="Español">
</video>

En el código anterior, se incluye un elemento <video> con el atributo controls para mostrar los controles de reproducción del video. A continuación, se agrega la fuente del video mediante el elemento <source>, especificando la ruta del archivo de video y su tipo MIME.

Luego, se agrega el elemento <track> para el track de subtítulos. El atributo src especifica la ruta del archivo de subtítulos en formato WebVTT. El atributo kind se establece como “subtitles” para indicar que es un track de subtítulos. El atributo srclang define el idioma de los subtítulos (en este caso, “es” para español). El atributo label proporciona una etiqueta descriptiva para los subtítulos.

Asegúrate de que el texto tenga un contraste suficiente con el fondo para que sea legible.

Módulo 2: Cómo hacer tu web usable

En términos de accesibilidad, que una página sea “usable” significa que está diseñada y desarrollada de manera que todos los usuarios puedan navegar y utilizar el sitio de manera efectiva y sin dificultades innecesarias. En este apartado prestaremos especial atención a los elementos interactivos o que tienen relación directa con nuestros usuarios.

Cuando hablamos de personas con diversidad funcional suelen venírsenos a la cabeza personas sordas o ciegas, que emplean tecnologías de asistencia para acceder más fácilmente a una web. No obstante, un tipo de discapacidad muy habitual es la motriz, por eso para poder navegar por una web es muy importante contar con un buen marcado HTML y poder usar el teclado, entre otras acciones.

En este módulo de accesibilidad web vamos a concentrarnos en tres elementos básicos de cualquier web para que lo veas con ejemplos: el menú, los formularios y los botones.

Menú de navegación

A continuación, algunas consideraciones importantes de navegación sobre el menú:

• Etiquetado semántico: utiliza el HTML adecuado y etiquetas semánticas para estructurar tu menú. Usa elementos como <nav>, <ul>, <li> y <a> de forma correcta y coherente.
• Texto legible: asegúrate de que el texto del menú tenga un contraste suficiente con el fondo para que sea legible. Utiliza colores que contrasten entre ellos y evita combinaciones que dificulten la lectura, especialmente para personas con discapacidad visual.
• Indicación de estado y ubicación: proporciona una indicación clara del elemento de menú activo y la ubicación actual del usuario en la estructura del sitio. Esto puede lograrse utilizando estilos visuales, como resaltado o cambio de color, para destacar el elemento activo.
• Navegación por teclado: asegúrate de que el menú sea completamente accesible mediante teclado. Los usuarios deben poder navegar por los elementos del menú utilizando la tecla “Tab” y activar los enlaces con la tecla “Enter” o la barra espaciadora.
• ARIA y atributos accesibles: utiliza atributos ARIA (Accessible Rich Internet Applications) de manera adecuada para mejorar la accesibilidad del menú. Por ejemplo, puedes utilizar los atributos “aria-haspopup” y “aria-expanded” para indicar que un elemento de menú tiene submenús desplegables.

Formularios

• Etiquetado adecuado: asocia etiquetas claras y descriptivas a cada campo de formulario para indicar qué tipo de información se debe ingresar. Utiliza el elemento <label> correctamente y asegúrate de que sea visible.
• Indicación de errores: proporciona mensajes de error claros y descriptivos cuando se produzca un error en la validación del formulario. Asegúrate de que estos mensajes sean visibles y estén asociados con los campos correspondientes para que los usuarios puedan identificar y corregir los errores fácilmente.
• Orden y estructura lógica: organiza los campos de formulario de manera lógica y coherente. Utiliza una estructura clara y secuencial para facilitar la navegación y comprensión del formulario. Los campos deben presentarse en un orden significativo y lógico, siguiendo una secuencia natural de entrada de datos.
• ARIA y atributos accesibles: utiliza atributos ARIA de manera adecuada para mejorar la accesibilidad del formulario. Por ejemplo, puedes usar el atributo “aria-required” para indicar campos obligatorios, y el atributo “aria-describedby” para proporcionar descripciones adicionales o instrucciones.

Botones

• Etiquetado claro: asegúrate de que los botones tengan etiquetas descriptivas que indiquen claramente su propósito o función. Utiliza un texto conciso y significativo que transmita la acción que se realizará al hacer clic en el botón.
• Tamaño y área de clic: los botones deben tener un tamaño lo suficientemente grande para ser seleccionados fácilmente, especialmente en dispositivos táctiles. Se recomienda un tamaño mínimo de 44×44 píxeles. Además, asegúrate de que el área de clic del botón corresponda al tamaño visible del botón para evitar errores de selección.
• ARIA y atributos accesibles: de nuevo, los atributos ARIA también te servirán para mejorar la accesibilidad de los botones. Por ejemplo, puedes utilizar el atributo “aria-label” o “aria-labelledby” para proporcionar una etiqueta alternativa cuando el texto visible no sea suficientemente descriptivo.
• Retroalimentación clara: los botones deben proporcionar retroalimentación clara y perceptible cuando se interactúa con ellos. Esto puede incluir cambios visuales, como animaciones o cambios de color, así como retroalimentación auditiva o táctil para usuarios con discapacidad visual o auditiva.

Módulo 3: Cómo hacer tu web comprensible

La accesibilidad y la comprensión son aspectos cruciales en el diseño de una página web. Para garantizar que todos los usuarios puedan comprender y utilizar la información de manera efectiva, es importante tener en cuenta lo siguiente:

Lenguaje

Usar un lenguaje claro y conciso en el contenido de la página. Evitar jergas, tecnicismos excesivos o frases complicadas que dificulten la comprensión, especialmente para personas con dificultades de lectura o discapacidades cognitivas.

La estructura y organización del contenido también desempeñan un papel importante. Utiliza encabezados apropiados, párrafos breves y listas para facilitar la lectura. Un diseño limpio y evitar la sobrecarga de información ayudará a no abrumar a los usuarios.

Aspecto

El contraste y la legibilidad del texto son fundamentales. Asegúrate de que haya un contraste suficiente entre el texto y el fondo para que sea legible. Utiliza combinaciones de colores adecuadas para que todos los usuarios, incluidos aquellos con discapacidades visuales o dificultades de lectura. Puede darse la posibilidad de tener que implementar algún modo de alto contraste si hubiese que mantener una imagen corporativa dada.

Apoyarse en elementos visuales, como iconos claros, imágenes relevantes y gráficos intuitivos, también ayuda a transmitir información de manera visual. Sin embargo, es importante que estos elementos sean accesibles como comentamos en el primer apartado y estén respaldados por texto alternativo.

Comunicación y feedback

Proporcionar instrucciones claras y relevantes en contexto es útil para que los usuarios comprendan cómo interactuar con la página y completar tareas específicas. Mensajes de ayuda, descripciones emergentes o enlaces a recursos adicionales pueden ser utilizados para brindar esta información.

Realizar pruebas de usabilidad y comprensión con una variedad de usuarios, incluyendo aquellos con diferentes habilidades y discapacidades, es esencial para identificar posibles barreras en la comprensión y realizar mejoras basadas en sus retroalimentaciones.

En los formularios, proporciona instrucciones y descripciones claras para cada campo de formulario cuando sea necesario. Puedes utilizar elementos como <fieldset> y <legend> para agrupar campos relacionados y proporcionar una descripción de alto nivel.

Módulo 4: Cómo hacer tu web robusta

La robustez se refiere a la capacidad de una página web para funcionar correctamente en diferentes entornos y plataformas, incluyendo diversos navegadores web, dispositivos y tecnologías asistenciales. Una página web robusta está diseñada y desarrollada de manera que sea compatible con los estándares web establecidos por el W3C (World Wide Web Consortium) y siga las mejores prácticas de codificación.

Como todas las características de accesibilidad web que te citamos hasta ahora, la robustez es una propiedad que hará tu web más usable para cualquier tipo de usuario.

Esto implica utilizar código limpio y válido, seguir los estándares HTML y CSS, y realizar pruebas exhaustivas en diferentes navegadores y dispositivos para asegurarse de que la página web se renderice y funcione correctamente en todas las situaciones.

Ejemplo de código limpio y válido

Aquí tienes un ejemplo simple de código HTML para ilustrar la diferencia entre código limpio y código sucio:

Código Limpio (HTML):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Página Ejemplo</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Bienvenido a Mi Página</h1>
</header>
<nav>
<ul>
<li><a href="#">Inicio</a></li>
<li><a href="#">Acerca de</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</nav>
<main>
<p>¡Hola! Bienvenido a mi página web.</p>
</main>
<footer>
<p>Derechos de autor © 2023. Todos los derechos reservados.</p>
</footer>
</body>
</html>

Código Sucio (HTML):

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Mi Página</title><link rel="stylesheet" href="styles.css"></head><body><header><h1>Bienvenido a Mi Página</h1></header><nav><ul><li><a href="#">Inicio</a></li><li><a href="#">Acerca de</a></li><li><a href="#">Servicios</a></li><li><a href="#">Contacto</a></li></ul></nav><main><p>¡Hola! Bienvenido a mi página web.</p></main><footer><p>© 2023. Todos los derechos reservados.</p></footer></body></html>

En el ejemplo de código limpio, el código HTML está organizado con sangrías y espacios para una mejor legibilidad. Los elementos están correctamente estructurados y etiquetados, y se utiliza una hoja de estilo externa. En contraste, el ejemplo de código sucio carece de espacios y sangrías, lo que dificulta la lectura. Aunque ambos ejemplos funcionarían, el código limpio es más fácil de mantener y comprender, lo que es crucial para el desarrollo web eficiente.

Ejemplo de estándares html y css

Ejemplo utilizando estándares HTML y CSS:

En este ejemplo, se utiliza HTML y CSS de manera estándar y organizada para crear un botón con estilo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Botón Estilizado</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<button class="estilizado-btn">Haz clic</button>
</body>
</html>

/* styles.css */
.estilizado-btn {
  background-color: #3498db;
  color: #ffffff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.estilizado-btn:hover {
  background-color: #2980b9;
}

Ejemplo sin utilizar estándares HTML y CSS:

En este ejemplo, se crea un botón sin seguir las prácticas estándar de estructuración y estilo.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Botón No Estándar</title>
</head>
<body>
<center>
<table border="0">
<tr><td><font face="Arial" size="4"><b><font color="#0000FF">Haz clic</font></b></font></td></tr>
</table>
</center>
</body>
</html>

En este ejemplo, se usan atributos en línea, tablas para diseño y propiedades de fuente directamente en el HTML, lo que dificulta la reutilización y el mantenimiento.

Comparando ambos ejemplos, el primero sigue las mejores prácticas al utilizar clases CSS para estilizar el botón y enlazar una hoja de estilo externa. El segundo ejemplo carece de organización y estructura, lo que puede dificultar futuras modificaciones y resultar en un código menos mantenible.

Para garantizar una accesibilidad completa, es recomendable seguir todas las pautas y realizar pruebas con tecnologías de asistencia para verificar la accesibilidad en diferentes escenarios.

La gran ventaja de una web robusta es que facilita futuras actualizaciones y modificaciones, al mantener una base estable y bien organizada para el crecimiento y la evolución de la página web.

Extra tip: Accesibilidad + WordPress

Hasta ahora hemos trabajado con casos en los que tú como propietario de la web tienes acceso a todos los archivos que la componen. Sin embargo, ¿qué pasa si tu web está montada con un CMS? En este módulo hablaremos sobre cómo mejorar la accesibilidad web en el caso concreto de WordPress.

La accesibilidad en WordPress es un aspecto crucial que se ha abordado y mejorado en sus versiones más recientes. Como plataforma de gestión de contenido ampliamente utilizada, es esencial que los sitios web creados con WordPress sean accesibles para todas las personas.

Una de las principales cosas en las que tienes que fijarte es que el tema que emplees sea accesible. Para ello, tiene que haber sido diseñado siguiendo las pautas de accesibilidad, así como garantizar la compatibilidad con lectores de pantalla populares.

Plugins de accesibilidad

Si no puedes modificar el tema de tu WordPress, debes saber que existen multitud de plugins que te ayudarán a hacer tu web más accesible:

1. WP Accessibility: este plugin permite agregar mejoras de accesibilidad al contenido y al tema de tu sitio web. Proporciona opciones para mejorar el contraste de color, agregar atributos ALT a las imágenes, habilitar la navegación por teclado, etc.
2. One Click Accessibility: este plugin agrega un widget de accesibilidad a tu sitio web que permite a los usuarios ajustar el tamaño del texto y cambiar el contraste para mejorar la accesibilidad.

Es importante tener en cuenta que, aunque WordPress ofrece estas herramientas y características, la responsabilidad final recae en los propietarios y desarrolladores de los sitios web, así que tenlo presente.

En definitiva, mejorar la accesibilidad web permite obtener una mejor experiencia de usuario para todos. No se trata solo de las personas con distintas discapacidades, sino de todos los usuarios. Un diseño limpio y bien organizado, por ejemplo, facilita la navegación y la comprensión de la información. ¡Esperamos que este pequeño tutorial te haya sido de ayuda!