El impacto de la accesibilidad en el SEO

Hoy accesibilidad no es sólo un favor, sino un derecho. Globalmente, alrededor del 15% de la población tiene alguna forma de discapacidad. En total (como, por ejemplo, las personas mayores), aproximadamente una cuarta parte de la población mundial se beneficia de un sitio web accesible. No tomárselo en serio significa dispararse en el pie.

Gracias a mi experiencia trabajando con organizaciones para hacer sus sitios web más accesibles, quiero explicarte cómo optimizo esto para mis clientes. Desde la comprensión de las distintas necesidades y retos de los usuarios hasta la aplicación de técnicas y herramientas prácticas que hacen que cualquier sitio sea más accesible.(1)

¿Cómo afecta la accesibilidad al SEO?

La accesibilidad de un sitio web es un aspecto importante que tiene un impacto definitivo en el SEO (más de lo que crees):

1. Experiencia de usuario: los sitios web accesibles ofrecen una mejor experiencia de usuario, lo que a su vez puede traducirse en una menor tasa de rebote y una mayor duración de las visitas. Google y otros motores de búsqueda lo aprecian, y puede ayudar a mejorar la clasificación.
2. Capacidad de respuesta móvil: los sitios web que funcionan bien en dispositivos móviles suelen tener una mejor clasificación en los motores de búsqueda. Dado que la accesibilidad móvil es una parte importante de la accesibilidad general, desempeña un papel importante en el SEO.
3. Velocidad del sitio: un sitio web accesible suele estar optimizado para la velocidad. Unos tiempos de carga más rápidos contribuyen a mejorar la experiencia del usuario, lo que a su vez puede repercutir positivamente en las clasificaciones.
4. Textos alternativos para las imágenes: utilizar textos alternativos ayuda a describir las imágenes para las personas que utilizan un lector de pantalla. Esto no sólo es bueno para la accesibilidad, sino que también ayuda a los motores de búsqueda a entender el contenido de la imagen.
5. HTML semántico: un HTML bien estructurado no sólo hace que un sitio web sea más accesible, sino que también ayuda a los motores de búsqueda a entender mejor el contenido. El uso correcto de los encabezamientos (H1, H2, etc.) y otros elementos semánticos puede contribuir al SEO.
6. Accesibilidad de los enlaces: los textos claros y descriptivos de los enlaces facilitan la navegación a los usuarios y también proporcionan contexto a los motores de búsqueda.
7. Cumplimiento y multas: en algunas jurisdicciones, los sitios web que no cumplan las normas de accesibilidad pueden ser objeto de multas y sanciones.
8. Duplicación de contenidos: los sitios web accesibles suelen evitar la duplicación innecesaria de contenidos, como tener versiones separadas de las páginas para móviles. Esto puede ayudar a evitar problemas de contenido duplicado, lo que a su vez es beneficioso para el SEO.

En general, mejorar la accesibilidad de un sitio web puede dar lugar a una mejor experiencia de usuario, lo que se traduce en señales positivas para los motores de búsqueda (por algo Chrome incluye una prueba de accesibilidad). Un sitio accesible puede atraer más tráfico, retener a los usuarios durante más tiempo y, en última instancia, contribuir a una mejor clasificación en los resultados de búsqueda.(2)(3)

¿Cómo comprueba Lighthouse la accesibilidad?

Chrome DevTools ofrece una auditoría de accesibilidad a través de la herramienta Lighthouse, que puede calificar una página en función de varios aspectos de accesibilidad. Estos son algunos de los aspectos en los que Chrome DevTools puede realizar pruebas:

1. Descripciones de imágenes: compruebe que todas las imágenes tienen un texto alternativo que describa lo que hay en la imagen.
2. Relación de contraste: evalúe si el texto tiene suficiente contraste con el fondo, lo cual es importante para la legibilidad.
3. Elementos del formulario: verificar que los campos del formulario tienen etiquetas y descripciones correctas para que los usuarios entiendan qué información se requiere.
4. Navegación con teclado: comprobar si el sitio web es navegable con teclado, sin necesidad de ratón.
5. Estructura del documento: analizar la estructura semántica HTML, incluido el uso correcto de encabezados, roles y otros elementos HTML importantes.
6. Funciones Aria: comprueba si se han implementado correctamente las funciones ARIA (Accessible Rich Internet Applications) para mejorar la accesibilidad de los lectores de pantalla.
7. Zoom y escalabilidad: compruebe si los usuarios pueden ampliar y escalar el texto hasta un 200% sin perder funcionalidad ni contenido.
8. Atributos de idioma: comprobar que el idioma correcto está definido en el HTML, lo que ayuda a los lectores de pantalla a leer correctamente el contenido.
9. Formato de las tablas: evaluar si las tablas están formateadas correctamente con los encabezamientos y las celdas de datos adecuados para que la información se presente de forma lógica.
10. Audio y vídeo: pruebas para detectar la presencia de subtítulos, transcripciones u otras alternativas a los contenidos multimedia.
11. Gestión del enfoque: evaluar si los elementos enfocables tienen una secuencia lógica y si hay indicadores de enfoque visibles.
12. Daltonismo: algunas herramientas pueden simular el aspecto de una página para usuarios con distintos tipos de daltonismo, aunque es posible que esto no ocurra directamente en Chrome DevTools.
13. Tiempo y animaciones: analice si el sitio ofrece límites de tiempo y si los movimientos y animaciones pueden pausarse o detenerse.
14. HTML obsoleto o incorrecto: compruebe la presencia de elementos HTML obsoletos o utilizados incorrectamente que puedan afectar a la accesibilidad.

Lighthouse en Chrome DevTools proporciona una forma estandarizada y completa de identificar estos y otros problemas de accesibilidad, y a menudo ofrece sugerencias y documentación sobre cómo solucionar los problemas. Es una herramienta valiosa para los desarrolladores que deseen mejorar la accesibilidad de sus sitios web.(4)

Soluciones de accesibilidad y recursos necesarios

A continuación se muestra una tabla con algunos puntos clave de la accesibilidad, su prioridad, las posibles soluciones y los recursos necesarios. Las prioridades pueden variar en función de las necesidades específicas de un sitio web y de sus usuarios, pero esto ofrece una visión general.(5)

Artículo	Prioridad	Solución	Recursos
Descripción de las imágenes	Alta	Añada un texto alternativo a todas las imágenes que describa el contenido.	Conocimientos de HTML/CSS, herramientas de lectura de pantalla para pruebas.
Relación de contraste	Alta	Ajusta los colores para cumplir la relación de contraste mínima.	Herramientas de contraste de colores como el Contrast Checker de WebAIM.
Elementos del formulario	Alta	Etiquete los campos del formulario con claridad y utilice los elementos HTML adecuados.	Conocimientos de HTML/CSS, herramientas de pruebas de accesibilidad como AXE.
Navegación con el teclado	Alta	Asegúrese de que todos los elementos interactivos sean accesibles a través del teclado.	Pruebas con teclado, herramientas de desarrollo del navegador.
Estructura del documento	Medio	Utilice HTML semántico, como títulos y listas correctos.	Conocimientos de HTML/CSS, herramientas de pruebas semánticas.
Características de Aria	Medio	Utilice roles y atributos ARIA cuando sea necesario y apropiado.	Especificación ARIA, Herramientas de prueba de lectores de pantalla.
Zoom y escalabilidad	Medio	Asegúrese de que el texto y el contenido puedan ampliarse sin perder funcionalidad.	Pruebas de navegador, emulador móvil.
Atributos lingüísticos	Bajo	Defina el idioma principal de la página utilizando el atributo lang.	Conocimientos de HTML.
Formato de la tabla	Bajo	Utilice elementos de tabla adecuados como <thead>, <th>, etc.	Conocimientos de HTML/CSS.
Audio y vídeo	Medio	Proporcione subtítulos, transcripciones u otras alternativas para los contenidos multimedia.	Programas de edición de vídeo, herramientas de transcripción.
Enfoque de gestión	Medio	Proporcionar una secuencia de enfoque lógica e indicadores de enfoque visibles.	Pruebas de teclado, herramientas de desarrollo de navegadores.
Daltonismo	Bajo	Pruebas y diseños para distintos tipos de daltonismo.	Herramientas de simulación del daltonismo.
Tiempos y animaciones	Bajo	Ofrezca opciones para pausar o detener los movimientos y animaciones, y dé tiempo suficiente para las acciones con límite de tiempo.	Conocimientos de JavaScript/CSS, Pruebas de control de animación.
HTML obsoleto/incorrecto	Bajo	Sustituya o actualice los elementos HTML obsoletos o utilizados incorrectamente.	Conocimientos de HTML/CSS, herramientas de validación como W3C Validator.

Es importante señalar que la accesibilidad no es un proyecto aislado, sino un proceso continuo. Las pruebas y actualizaciones periódicas, así como la participación de usuarios con distintas necesidades, pueden ayudar a que un sitio web sea lo más accesible posible.

Lo que veo a menudo con los clientes es que se repiten los mismos errores. En particular, cuestiones relacionadas con los componentes que suelen cambiarse en un sitio web:

• La estructura del HTML;
• cuestiones relativas a las imágenes;
• ajustes en la usabilidad móvil;
• la legibilidad de los textos;
• contraste (colores).

Estas cosas suelen pasarse por alto en una organización. Especialmente durante los cambios «rápidos» del sitio web, esto puede salir mal.

Empezar con la accesibilidad de su sitio web

Trabajar en la accesibilidad de un sitio web puede ser un proceso complejo, pero puede estructurarse utilizando un marco. He aquí un marco general que puede utilizarse para mejorar la accesibilidad de un sitio web:(6)

1. Comprensión y sensibilización

Objetivo: asegurarse de que todo el equipo entiende qué significa la accesibilidad y por qué es importante.

• Formación y educación: ofrecer formación a desarrolladores, diseñadores y creadores de contenidos sobre normas y técnicas de accesibilidad.
• Investigación: investigue las necesidades y requisitos específicos de sus usuarios, incluidas las obligaciones legales.

2. Planificación

Objetivo: definir objetivos claros y elaborar un plan para alcanzarlos.

• Política: desarrollar una política de accesibilidad que incluya normas como las WCAG.
• Prioridades y objetivos: identificar las áreas prioritarias y fijar objetivos mensurables.
• Herramientas y recursos: elija las herramientas, tecnologías y recursos que se utilizarán.

3. 3. Diseño y desarrollo

Objetivo: Integrar la accesibilidad en todas las fases de diseño y desarrollo.

• Diseño accesible: utilice patrones de diseño y esquemas de color accesibles.
• Código semántico: escribe HTML y CSS limpios y semánticos.
• Compatible con teclado y lector de pantalla: garantice la plena accesibilidad del teclado y realice pruebas con lectores de pantalla.
• Capacidad de respuesta: garantizar un buen rendimiento en diferentes dispositivos y tamaños de pantalla.

4. Pruebas

Finalidad: comprobar que el sitio cumple las normas de accesibilidad establecidas.

• Pruebas automatizadas: utilice herramientas como Lighthouse para detectar problemas comunes.
• Pruebas manuales: realice pruebas manuales, como las de navegación por teclado y lector de pantalla.
• Pruebas con usuarios: implicar a usuarios reales con distintas necesidades en el proceso de prueba.

5. Aplicación y mantenimiento

Objetivo: lanzar la web accesible y seguir manteniéndola.

• Puesta en marcha: poner en marcha el sitio web accesible probado y validado.
• Supervisión y actualizaciones continuas: supervise y actualice periódicamente el sitio web de acuerdo con las normas y tecnologías más recientes.
• Ciclo de retroalimentación: establezca un sistema de retroalimentación de los usuarios que permita la mejora continua.

6. Documentación y formación

Objetivo: documentar todos los procesos y formar al equipo para garantizar que la accesibilidad se convierte en parte integrante de la cultura organizativa.

• Documentar procesos y directrices: crear manuales y documentación para uso futuro.
• Formación y concienciación: seguir formando y concienciando a los miembros del equipo sobre la importancia de la accesibilidad.

Cerrar

Este marco es una guía para trabajar la accesibilidad y puede adaptarse a las necesidades y retos propios de cada proyecto. Al hacer de la accesibilidad una parte integral de todo el proceso, las organizaciones pueden garantizar una experiencia de usuario integradora para todos.

Conclusión

Como se comenta en este artículo: La accesibilidad de un sitio web desempeña un papel enorme tanto en su SEO como en la conversión. No optimizar esto también significa que ya no «atraes» a una cuarta parte de tus visitantes (incluso más que eso en algunos sitios).

Utiliza las herramientas estándar de Lighthouse para mapearlo a fondo. La optimización puntual a menudo no proporciona el resultado deseado. Yo lo veo como un proceso para cada proyecto de SEO (porque de lo contrario volveremos al mismo nivel seis meses después). ¡Buena suerte!