Qué es una web accesible (y qué no es)
Una web accesible es la que puede usar cualquier persona, independientemente de cómo navegue. No es una versión simplificada del sitio, ni una página aparte, ni un botón mágico que cambia los colores. Es la web de siempre, bien construida.
Piensa en quién entra en tu web sin que te des cuenta: alguien con baja visión que amplía la letra al 200 %, una persona mayor que no distingue el gris claro sobre blanco, alguien que se ha roto el brazo y navega solo con teclado, o quien está en la calle con el sol de cara y la pantalla al mínimo de brillo. La accesibilidad no va solo de discapacidad permanente: va de que tu web funcione en condiciones reales.
Las cuatro reglas que resumen todo (POUR)
- Perceptible: el contenido se puede ver u oír. Las imágenes tienen alternativa en texto y el contraste es suficiente.
- Operable: todo se puede usar con teclado, sin trampas ni tiempos imposibles.
- Comprensible: el lenguaje es claro, la navegación es previsible y los errores de formulario se explican.
- Robusto: el código es estándar y funciona con lectores de pantalla y navegadores distintos.
Por qué una web accesible mejora el SEO
Google no ve tu web: la lee. Y un rastreador se parece muchísimo a un lector de pantalla, porque los dos dependen de lo mismo: el HTML. Por eso el trabajo de accesibilidad y el de SEO técnico se solapan casi al 80 %.
Estos son los puntos donde una cosa alimenta a la otra:
| Mejora de accesibilidad | Qué gana el SEO |
|---|---|
| Encabezados H1-H6 en orden lógico | Google entiende la jerarquía y el tema de cada bloque |
| Texto alternativo en imágenes | Posicionamiento en Google Imágenes y más contexto semántico |
| Enlaces con anchor descriptivo (no "aquí") | Enlazado interno con señales claras de relevancia |
| HTML semántico (nav, main, article, button) | Rastreo más limpio y mejor extracción de contenido |
| Transcripciones y subtítulos en vídeo | Contenido indexable donde antes solo había un reproductor |
| Formularios etiquetados y sin errores crípticos | Menos abandonos, más conversiones y mejores señales de uso |
| Foco visible y navegación con teclado | Mejor experiencia de usuario, que se traduce en permanencia |
Ojo con el matiz: la accesibilidad no es un factor de posicionamiento directo. Google no te sube porque tu contraste sea 4,5:1. Lo que ocurre es que casi todas las medidas de accesibilidad son, a la vez, buenas prácticas de SEO on-page y de usabilidad. Y esas sí puntúan. Si quieres profundizar en la parte de experiencia de usuario, tenemos una guía sobre diseño web que convierte con principios de UX.
Hay además un efecto colateral nada menor: una web accesible suele ser una web ligera y bien estructurada, y eso repercute en los Core Web Vitals.
Cómo hacer una web accesible: lo que más impacto tiene
No hace falta rehacer el sitio. Con estos siete frentes cubres la mayor parte de los problemas reales que encontramos en las webs de pymes.
1. Contraste de color suficiente
El texto normal necesita un contraste mínimo de 4,5:1 respecto al fondo, y el texto grande 3:1. El gris clarito sobre blanco que tan elegante queda en el diseño es, en la práctica, ilegible para mucha gente. Revisa también los botones, los textos sobre imágenes y los estados hover.
2. Texto alternativo en las imágenes
Describe lo que aporta la imagen, no lo que se ve. Si es un producto, di qué producto es. Si es decorativa y no aporta nada, deja el alt vacío para que el lector de pantalla la ignore en vez de leer "imagen_2847.jpg". Y no metas la keyword a martillazos: un alt forzado se nota y no ayuda a nadie.
3. Navegación completa con teclado
Haz la prueba ahora mismo: entra en tu web y recórrela solo con el tabulador. Si no puedes abrir el menú, cerrar una ventana modal o enviar un formulario, tienes un problema. Y si no ves dónde está el foco en cada momento, tienes otro: nunca elimines el contorno de foco sin poner uno propio, más bonito si quieres, pero visible.
4. Estructura de encabezados coherente
Un solo H1 por página, y luego H2 y H3 en orden, sin saltos. Los encabezados no son tamaños de letra: son el índice de la página. Mucha gente con lector de pantalla navega saltando de encabezado en encabezado, exactamente igual que tú miras un índice antes de leer.
5. Formularios que se entienden
Cada campo con su etiqueta visible y asociada (no el placeholder haciendo de etiqueta, que desaparece al escribir). Los errores, explicados en texto y junto al campo, no solo con un borde rojo. Y nunca uses únicamente el color para indicar que algo ha fallado.
6. Enlaces y botones con nombre propio
"Leer más", "aquí", "ver" no dicen nada fuera de contexto. Cambia a "Ver precios de diseño web" o "Descargar el catálogo en PDF". Gana el usuario con lector de pantalla y ganas tú en enlazado interno. Y usa botones para acciones y enlaces para navegar: un div con un onclick no es ni una cosa ni la otra.
7. Vídeo y audio con alternativas
Subtítulos en los vídeos y, si el contenido es importante, una transcripción. Además de hacerlo accesible, conviertes en texto indexable algo que para Google era una caja negra.
Niveles WCAG y qué exige la ley en España
Las WCAG definen tres niveles de cumplimiento. El objetivo razonable para una web comercial es el AA.
| Nivel | Qué implica | Para quién |
|---|---|---|
| A | Mínimos básicos: sin ellos hay contenido directamente inaccesible | Suelo obligatorio para cualquier web |
| AA | El estándar de referencia: contraste, foco, formularios, navegación | Objetivo recomendado para pymes y ecommerce |
| AAA | Requisitos muy exigentes, difíciles de mantener en todo el sitio | Casos concretos, no como meta global |
En cuanto a normativa, hay dos capas que conviene distinguir. Por un lado, el sector público español lleva años obligado a cumplir accesibilidad en sus webs y apps. Por otro, la trasposición de la Ley Europea de Accesibilidad amplía las obligaciones a determinados productos y servicios prestados a consumidores, incluido el comercio electrónico, con plazos que ya han entrado en vigor.
Si tienes una tienda online o prestas servicios digitales al consumidor, lo sensato es asumir que la accesibilidad ha dejado de ser opcional. El alcance exacto y las excepciones (por tamaño de empresa, por tipo de servicio) dependen de tu caso concreto, así que conviene contrastarlo con un especialista antes de dar nada por sentado.
Cómo comprobar si tu web es accesible
Las herramientas automáticas detectan más o menos un tercio de los problemas. El resto se encuentra probando. Combina las dos cosas:
- Pasa un análisis automático con Lighthouse (viene en Chrome, pestaña Accessibility) o con una extensión tipo WAVE o axe DevTools.
- Recorre las páginas clave solo con el teclado: inicio, servicios, ficha de producto, formulario de contacto y proceso de compra.
- Comprueba los contrastes con un verificador de contraste, especialmente en botones, avisos y texto sobre imágenes.
- Amplía la página al 200 % en el navegador y mira si algo se rompe o se solapa.
- Desactiva las imágenes y comprueba si la página sigue entendiéndose por los textos alternativos.
- Si puedes, prueba con un lector de pantalla real (NVDA en Windows o VoiceOver en Mac). Es incómodo la primera vez y revelador siempre.
Anota lo que encuentres y prioriza por impacto: primero lo que impide completar una compra o enviar un formulario, después lo que dificulta la lectura, y al final lo cosmético.
Errores de accesibilidad más frecuentes en webs de pymes
- Texto gris claro sobre fondo blanco porque "queda más limpio".
- Imágenes de producto sin alt, o con el nombre del fichero como alt.
- Menús desplegables que solo se abren al pasar el ratón por encima.
- El contorno de foco eliminado por CSS para que "no salga ese recuadro feo".
- Formularios donde la etiqueta es el placeholder y desaparece al escribir.
- Carruseles que cambian solos cada tres segundos, sin botón de pausa.
- Enlaces "Leer más" repetidos veinte veces en la misma página.
- PDF escaneados como única forma de consultar el catálogo o los precios.
- Iconos sin texto ni etiqueta accesible (el carrito, la lupa, el menú hamburguesa).
- Vídeos incrustados sin subtítulos que además cargan solos con sonido.
La buena noticia es que casi todos son baratos de arreglar si se cogen a tiempo. La mala es que si tu web se hizo con una plantilla muy personalizada, a veces sale más a cuenta rehacer las plantillas base que ir parcheando. Es la misma conversación que planteamos al comparar una web a medida frente a una plantilla.
Por dónde empezar si tienes poco tiempo
Si solo puedes dedicarle una tarde, haz esto y habrás cubierto una parte muy grande del problema:
- Sube el contraste de los textos y botones hasta el 4,5:1.
- Devuelve el contorno de foco visible en todos los elementos interactivos.
- Revisa que cada página tenga un único H1 y encabezados en orden.
- Añade alt a las imágenes de producto y de contenido.
- Etiqueta correctamente los campos del formulario de contacto.
- Cambia los "Leer más" por anchors descriptivos.
Con eso resuelves buena parte de lo que detecta cualquier auditoría automática, mejoras la experiencia real de tus visitantes y, de paso, le pones las cosas más fáciles a Google.