La guía completa de accesibilidad web
Por El equipo de AsasWeb 6 min de lectura
La accesibilidad web significa construir una web que todo el mundo pueda usar, incluidas las personas que dependen de un teclado, un lector de pantalla, los subtítulos o un contraste alto. El estándar internacional es WCAG 2.2 en el nivel AA, y se apoya en cuatro ideas, que las páginas deben ser perceptibles, operables, comprensibles y robustas. La mayor parte del trabajo es de cimientos, no cosmética, los elementos HTML correctos, un orden de foco visible, suficiente contraste de color, alternativas de texto reales y formularios claros. Hecho desde el principio cuesta poco, amplía tu audiencia, reduce el riesgo legal y mejora el SEO al mismo tiempo.
La accesibilidad web es la práctica de construir webs que todo el mundo puede usar, incluidas las personas con discapacidad. Eso abarca a un abanico amplio de gente: alguien que navega con el teclado en lugar del ratón, un usuario de lector de pantalla que escucha la página en vez de verla, una persona con baja visión que necesita un contraste fuerte y cualquiera que ve un vídeo con el sonido apagado. Esta guía explica qué significa la accesibilidad, por qué merece tu atención y cómo llegar hasta ahí sin jerga.
Qué significa realmente la accesibilidad
La referencia internacional son las Pautas de Accesibilidad para el Contenido Web, conocidas como WCAG. La versión actual es WCAG 2.2, y la mayoría de las organizaciones apunta al nivel AA, que es el nivel al que remiten leyes como la Ley Europea de Accesibilidad. No necesitas memorizar las pautas, pero ayuda conocer los cuatro principios en los que se apoyan. Una página debe ser:
- Perceptible. La gente puede captar el contenido, ya sea viéndolo, oyéndolo o tocándolo. Las imágenes tienen alternativas de texto, el vídeo tiene subtítulos y el texto tiene contraste suficiente.
- Operable. La gente puede usar la página con lo que tenga, un ratón, solo el teclado, un conmutador o la voz. Nada la atrapa y nada depende de un sentido o de una acción que no pueda realizar.
- Comprensible. El contenido se lee con claridad y la interfaz se comporta de forma predecible, así que nadie se lleva sorpresas ni confusiones.
- Robusta. La página está construida de modo que los navegadores y las tecnologías de asistencia, ahora y en el futuro, puedan interpretarla con fiabilidad.
Casi todo lo práctico de esta guía se remonta a una de esas cuatro ideas.
Para quién es
Es tentador imaginar a un grupo pequeño de usuarios, pero la accesibilidad es más amplia que eso. Alrededor de una de cada seis personas vive con una discapacidad significativa, y muchas más se benefician del diseño accesible sin identificarse como personas con discapacidad: un cliente de más edad, alguien con una lesión temporal, una persona con una conexión lenta o cualquiera que usa el móvil bajo el sol intenso. Construir para los márgenes también mejora la experiencia del centro. Los subtítulos ayudan en una sala ruidosa, un contraste fuerte ayuda en una pantalla barata y un orden de foco claro ayuda a cualquiera que prefiera el teclado.
Los cimientos que más importan
La buena noticia es que el trabajo de mayor impacto es estructural, no decorativo. Acierta con estos cimientos y tendrás recorrida la mayor parte del camino hacia el AA.
Usa el elemento HTML correcto
Un botón de verdad, un enlace de verdad y una lista de verdad traen de serie su comportamiento y su significado, gratis. Si los reconstruyes a partir de cajas genéricas con estilos, tienes que añadir a mano el foco, el soporte de teclado y el anuncio correcto, y la mayoría de los equipos se deja una pieza. Es el hábito con mayor retorno de toda la accesibilidad. Lo cubrimos en detalle en por qué el HTML semántico sigue importando.
Haz que todo funcione desde el teclado
Mucha gente no usa nunca el ratón. Cada control debería poder alcanzarse y manejarse solo con el teclado, en un orden lógico, con un contorno de foco que de verdad se vea. Además es la prueba manual más rápida que puedes hacer en tu propio sitio. Consulta navegación con teclado, la prueba que la mayoría de los sitios suspende.
Elige colores que todo el mundo pueda leer
El texto necesita contraste suficiente con su fondo, y el color nunca debe ser la única forma de señalar un significado. Es uno de los fallos más comunes y uno de los más fáciles de corregir cuando conoces los objetivos. Nuestra guía para elegir un contraste de color accesible repasa las cifras.
Escribe alternativas de texto reales
Las imágenes que aportan significado necesitan texto alternativo para que los usuarios de lector de pantalla reciban la misma información, y las imágenes decorativas deben marcarse como decorativas para que se salten. Un buen texto alternativo también ayuda a los buscadores a entender tus imágenes. Consulta texto alternativo para el SEO y la accesibilidad.
Construye formularios que la gente pueda completar
Los formularios son el lugar donde muchos visitantes deciden convertirse en clientes, así que un formulario confuso o inaccesible te cuesta directamente. Campos etiquetados, errores claros y una agrupación sensata ayudan a todo el mundo a terminar. Explicamos cómo en los formularios accesibles consiguen más clientes potenciales.
Por qué es bueno para tu negocio
La accesibilidad suele plantearse como cumplimiento, pero es ante todo una audiencia más grande y una experiencia mejor. Una web accesible llega a más clientes, convierte a más de ellos y te expone a menos riesgo legal a medida que las leyes de accesibilidad se endurecen en la Unión Europea y más allá. Exponemos los argumentos comerciales en la accesibilidad es buena para el negocio.
Hay además una recompensa silenciosa. La misma estructura que ayuda a la tecnología de asistencia, encabezados con sentido, puntos de referencia reales, enlaces descriptivos y alternativas correctas, es exactamente lo que leen los buscadores para entender una página. La accesibilidad y el SEO se construyen sobre los mismos cimientos, así que el trabajo rinde dos veces.
Una nota sobre el comercio electrónico
Las tiendas online tienen puntos de presión específicos: galerías de producto, filtros, selectores de variantes y un proceso de compra que no debe perder a nadie. Un proceso de compra inaccesible es una venta abandonada. Si vendes online, la lista de comprobación de accesibilidad para tiendas online cubre las partes que más importan.
Cómo probar
No necesitas un laboratorio para empezar. Una rutina corta y repetible detecta la mayoría de los problemas:
- Aparta el ratón y recorre toda la página con la tecla Tab. ¿Puedes alcanzar y usar todo, y ves siempre dónde estás?
- Pasa un verificador automático como axe o Lighthouse. No lo detectará todo, pero señala rápido los fallos evidentes.
- Comprueba el contraste de tus colores frente a los objetivos del nivel AA.
- Prueba un lector de pantalla durante diez minutos. En la mayoría de los sistemas ya viene uno integrado.
Las herramientas automáticas encuentran quizá un tercio de los problemas, así que combínalas con las comprobaciones manuales de arriba. El objetivo no es una puntuación perfecta, es un sitio que una persona real pueda usar de verdad.
Por dónde empezar
Si esto parece mucho, empieza por los cimientos: HTML correcto, un orden de teclado que funcione y contraste suficiente. Esos tres por sí solos eliminan la mayoría de las barreras. A partir de ahí, avanza con el texto alternativo, los formularios y el resto como un hábito constante en lugar de un proyecto puntual.
Si quieres que te echemos una mano, la accesibilidad está integrada en todo lo que hacemos, y también la ofrecemos como servicio específico. Consulta accesibilidad web, o empieza un proyecto y cuéntanos en qué punto está tu web hoy.