¿Por qué importa la accesibilidad de un sitio web?

La imagen que casi todo el mundo tiene de la accesibilidad web es una persona ciega usando un lector de pantalla. Es real, y es una fracción pequeña del asunto.

También queda fuera quien tiene baja visión y amplía al 200 %, quien no distingue el rojo del verde, quien no puede usar un ratón por artritis o por un temblor, quien procesa la información despacio, quien navega con una sola mano porque lleva a un niño en la otra, y quien está intentando leer tu web bajo el sol de mediodía. La accesibilidad no es una función para una minoría: es la diferencia entre que tu sitio funcione en condiciones perfectas o en condiciones reales.

¿Qué es WCAG y qué nivel hace falta?

Las reglas del oficio son las WCAG, mantenidas por el W3C, hoy en su versión 2.2. Tienen tres niveles:

• A — lo mínimo. Sin esto hay contenido directamente inutilizable.
• AA — el objetivo práctico, y el que citan casi todas las normativas.
• AAA — exigente hasta el punto de que ni el propio W3C recomienda aplicarlo a un sitio entero.

Cuando alguien dice «cumplimos accesibilidad», la pregunta correcta es «¿en qué nivel y sobre qué páginas?». La respuesta útil casi siempre es AA sobre los recorridos críticos: portada, formulario de contacto, ficha de producto, proceso de compra.

Y sí, hay obligación legal en más sitios de los que la gente cree. En la Unión Europea, la Ley Europea de Accesibilidad se aplica desde junio de 2025 a buena parte del comercio electrónico y los servicios digitales. En Colombia, las entidades públicas están sujetas a criterios de accesibilidad desde hace años a través de la normativa de gobierno digital. Y en el sector privado, cada vez más pliegos y licitaciones lo piden por escrito.

Los cuatro principios, en cristiano

WCAG se organiza en cuatro ideas. Traducidas a lo que significan de verdad:

Perceptible. Que la información se pueda recibir por más de un canal. Texto alternativo en las imágenes, subtítulos en los vídeos, contraste suficiente, y no depender del color para comunicar nada.

Operable. Que se pueda usar sin ratón. Todo lo pulsable alcanzable con teclado, en orden lógico, con el foco visible, sin trampas de las que no se pueda salir y sin límites de tiempo imposibles.

Comprensible. Que se entienda y se comporte como se espera. Idioma declarado, etiquetas en los formularios, errores que explican qué pasó y cómo arreglarlo, navegación que no cambia de sitio entre páginas.

Robusto. Que funcione con la tecnología de asistencia que sea. Marcado semántico —un botón que es un <button>— en vez de un <div> con un onclick.

¿Qué revisamos en la práctica?

La lista que usamos, por orden de cuántos problemas resuelve cada punto:

1. Contraste. Texto normal, 4,5:1 contra su fondo. Texto grande, 3:1. Bordes de campos, iconos con significado y estados de foco, 3:1. Es lo que más se incumple y lo más fácil de arreglar, porque es un número, no una opinión — para comprobarlo tenemos el comprobador de contraste, que además propone el color más cercano que sí cumple, con transparencias incluidas.
2. Navegación por teclado. Recorrer todo el sitio con el tabulador. Si en algún momento no ves dónde estás, o te quedas atrapado dentro de un menú, ahí hay un fallo que afecta también a quien usa el teclado por costumbre.
3. Texto alternativo. Una frase que describa la imagen. Vacío (alt="") si es decorativa: eso le dice al lector de pantalla que la salte, que es exactamente lo correcto.
4. Estructura de encabezados. Un solo h1, y después en orden, sin saltarse niveles. Es el índice con el que se navega un sitio sin verlo.
5. Formularios etiquetados. Cada campo con su <label> asociada. Un marcador de posición no es una etiqueta: desaparece justo cuando escribes.
6. El color no lleva información solo. Si el único indicio de que un campo falló es que se puso rojo, quien no distingue ese rojo no se entera. Añade un icono, un texto o ambos.
7. Movimiento y zoom. Respetar prefers-reduced-motion, y que la página siga funcionando ampliada al 200 % sin desbordarse. Ampliar equivale a estrechar la ventana, así que esto y el diseño adaptable son el mismo problema resuelto una sola vez.

Lo que casi nadie cuenta

Aquí está el argumento que convence a quien no se convence con lo demás: casi todo lo que exige la accesibilidad es lo mismo que exige el SEO técnico y la usabilidad.

El marcado semántico que necesita un lector de pantalla es el mismo que ayuda al buscador a entender la jerarquía de la página. El texto alternativo que describe una imagen es el mismo que permite encontrarla. Un formulario con etiquetas se rellena mejor con el autocompletado. Un contraste alto se lee mejor bajo el sol. Un objetivo táctil de 44 píxeles se falla menos con el pulgar.

No estás haciendo dos trabajos. Estás haciendo uno bien.

¿Por dónde empezar si no hay presupuesto para todo?

Tres pasos que caben en una tarde y resuelven la mayor parte:

1. Pasa un comprobador automático —los hay gratuitos y en las propias herramientas del navegador—. Detecta entre un cuarto y un tercio de los problemas, y son los más mecánicos.
2. Arregla el contraste de todo el sitio. Es sistemático: se cambian los tokens de color una vez y afecta a todas las páginas.
3. Recorre con el tabulador tu formulario de contacto y tu proceso de compra. Si esos dos funcionan sin ratón, has cubierto lo que de verdad da dinero.

Lo que ningún comprobador automático puede juzgar —si el texto alternativo describe lo que importa, si el orden de lectura tiene sentido, si el mensaje de error explica algo— sigue necesitando a una persona. Pero llegados a ese punto, ya no estás arreglando: estás afinando.

---

Una web accesible no es una web con una función añadida para unos pocos. Es una web construida sin dar por hecho cómo mira, oye, se mueve o se concentra quien llega. Y esa es, exactamente, la definición de estar bien hecha.