¿Le aplica alguna ley de accesibilidad al sitio de mi negocio?

En la Unión Europea, la Ley Europea de Accesibilidad cubre servicios de comercio electrónico dirigidos a consumidores: tiendas en línea, reservas, banca y similares. Un sitio de presentación sin venta ni reserva suele quedar fuera. En México, la Ley General para la Inclusión de las Personas con Discapacidad establece el principio de accesibilidad, y la referencia técnica que todo el mundo usa es WCAG. Distintos caminos, el mismo destino.

¿Qué exige WCAG 2.1 AA en números?

El texto en tamaño de lectura necesita al menos 4,5 a 1 de contraste contra su fondo. El texto grande, de 24 px o de 18,7 px en negrita hacia arriba, necesita 3 a 1. Ese mismo 3 a 1 aplica al borde de un elemento de interfaz cuando ese borde es lo único que lo hace reconocible. Súmale foco de teclado visible, textos alternativos, etiquetas reales en los formularios y una jerarquía de encabezados sin saltos.

¿Los verificadores automáticos encuentran todo?

No. Las herramientas automáticas cubren una parte de los criterios, y los estudios que lo miden la ponen bastante por debajo de la mitad. El contraste, los textos alternativos faltantes y algunos problemas de estructura sí se detectan. Si un texto alternativo sirve de algo, si el orden de foco tiene sentido, si un mensaje de error explica el error: eso solo lo juzga una persona.

¿Por dónde empiezo si el sitio ya tiene años?

Por el contraste, porque es el fallo más común y el arreglo más barato. Luego el foco de teclado, luego las etiquetas de formulario, luego la jerarquía de encabezados. Esos cuatro cubren la mayoría de lo que una persona real se topa, y ninguno exige rediseñar.

¿Y si mi sitio vende también en Europa?

Entonces cuenta con la Ley Europea de Accesibilidad. En Alemania se aplica desde el 28 de junio de 2025, sin periodo de transición para sitios web, con una excepción para microempresas de menos de diez empleados y hasta 2 millones de euros. La referencia técnica es la norma EN 301 549, que remite a WCAG 2.1 nivel AA.

Sitio web accesible: WCAG 2.1 AA en la práctica, con números reales

WCAG 2.1 AA es la vara. En Europa llega por la Ley Europea de Accesibilidad, en Estados Unidos por décadas de jurisprudencia bajo la ADA, y en compras públicas casi en todas partes por la norma EN 301 549. Distintos caminos, un mismo destino.

Todo el mundo está de acuerdo con la accesibilidad. El problema es que "haz el sitio accesible" no le da a nadie algo que ejecutar. Aquí va en números, con una prueba que puedes correr esta tarde y con lo que encontramos al correrla en nuestro propio sitio. En corto: tres errores reales, y uno de ellos estaba en unas veinte partes.

Qué pide WCAG 2.1 AA en la práctica

Son unos cincuenta criterios, y casi todos los sitios tropiezan con los mismos cuantos.

1. Contraste. El texto en tamaño de lectura necesita al menos 4,5 a 1 contra su fondo. El texto grande, de 24 px o de 18,7 px en negrita hacia arriba, necesita 3 a 1. Es el fallo más común con diferencia, porque el gris claro se ve tranquilo en un diseño y deja de leerse en una pantalla brillante a plena luz.

2. Bordes de los controles. El criterio 1.4.11 pide 3 a 1 en todo aquello que hace reconocible un control. Un campo blanco sobre fondo blanco vive de su borde. Si ese borde es un gris tenue, el campo sencillamente no está para mucha gente.

3. Foco de teclado visible. Quien recorre la página con el tabulador tiene que ver dónde está en todo momento. outline: none sin reemplazo es el clásico.

4. Jerarquía de encabezados. Exactamente un h1 por página y ningún nivel saltado. Los lectores de pantalla navegan por encabezados; una jerarquía con hoyo es una afirmación falsa sobre cómo está armada la página.

5. Textos alternativos. Toda imagen con contenido necesita uno. La decoración lleva uno vacío a propósito, para que no se lea.

6. Formularios. Cada campo necesita una etiqueta real. Un texto de marcador por sí solo se queda corto. Los mensajes de error tienen que decir qué está mal y no pueden apoyarse solo en el color.

7. Zoom y reflujo. La página tiene que seguir siendo usable al 200 por ciento de zoom y a 320 píxeles de ancho, sin desplazamiento horizontal.

La autoevaluación de treinta minutos

Sin herramientas, solo con el navegador:

Presiona tabulador, una y otra vez, desde el inicio hasta el pie. ¿Ves dónde estás en cada paso? ¿Llegas a todo, incluido el menú y cada campo del formulario?
Haz zoom al 200 por ciento. ¿Se rompe algo, se encima algo, te empuja hacia los lados?
Angosta la ventana a 320 píxeles. La misma pregunta.
Mide un color de texto. Saca el color calculado de las herramientas del navegador y mételo en una calculadora de contraste. Si tu texto corrido está por debajo de 4,5, ya tienes la respuesta para todo el sitio.
Mira los encabezados. Corre document.querySelectorAll('h1,h2,h3,h4') en la consola y lee los niveles en orden. ¿Un solo h1? ¿Algún salto?
Apaga la pantalla y escucha con un lector de pantalla. La prueba más honesta y la más incómoda.

Ningún verificador encuentra todo. Las herramientas automáticas cubren una parte; el resto lo tiene que juzgar una persona.

Qué encontramos en nuestro propio sitio

Llevamos primero.link a WCAG 2.1 AA en agosto de 2026. Lo vendemos, así que nos lo debíamos. Esto salió, todo medido.

Error 1: el color de los textos secundarios estaba en 2,6 a 1. Un gris claro, #98A2AC, usado en etiquetas, en los roles bajo los nombres de clientes, en las notas debajo de los campos. Aparecía en unas veinte partes. La vara son 4,5. Ahora mide 5,5. El texto corrido se oscureció al mismo tiempo, de 7,3 a 10,2.

Error 2: los campos del formulario estaban en 1,4 a 1. Un #D2D9DE suave sobre blanco. El formulario de contacto se veía limpio y era prácticamente invisible para alguien con visión reducida. La vara son 3. Ahora mide 3,1.

Error 3: el índice del blog saltaba un nivel de encabezado. Las tarjetas eran h3 colgando directamente del h1 de la página. Nadie lo ve. Un lector de pantalla sí.

Hubo dos cosas más que no violaban ningún criterio pero estorbaban: el verde como color de texto estaba en 3,7, por debajo de la vara para texto corrido, y las líneas pequeñas en versalitas espaciadas estaban en 10,5 píxeles.

En total medimos 33 pares de color contra su fondo real y subimos 119 tamaños de letra. La marca no se movió: el degradado de azul a verde sigue llevando los títulos grandes, donde 3 a 1 alcanza, y un verde oscurecido tomó el lugar donde el verde es texto.

La lección: llevamos años haciendo sitios y dábamos por hecho que estábamos bien. La distancia entre "se ve bien" y "está medido y correcto" fueron tres errores reales. Sin medir no aparecen.

La parte que sí cuesta

El contraste y el anillo de foco son una tarde. Lo que exige criterio:

Textos alternativos que sirvan. "Imagen" no sirve. Repetir el pie de foto palabra por palabra tampoco, porque entonces el lector de pantalla dice la misma frase dos veces.
Orden de foco que coincida con el orden visual. Fácil de romper con order en grid y flexbox.
Movimiento. Todo lo que se anima tiene que respetar prefers-reduced-motion. Las animaciones controladas por scroll se escapan del interruptor habitual, porque su avance viene de la posición y no de una duración. Necesitan su propio manejo.
Decidir qué es decorativo. En nuestro sitio hay dos textos alternativos vacíos a propósito. Llenarlos haría que un lector de pantalla dijera lo mismo dos veces.

Por qué conviene aunque no sea obligatorio

Cerca de una de cada diez personas tiene alguna limitación que afecta cómo usa un sitio web. Eso son clientes. Además, casi todo lo que pide WCAG mejora el sitio para cualquiera: el texto más oscuro se lee mejor bajo el sol, el foco visible ayuda a quien prefiere el teclado, y una jerarquía limpia ayuda a los buscadores a entender la página.

Si quieres saber cómo está el tuyo, escríbenos. Lo revisamos y te decimos qué es obligatorio y qué es opcional.

Aviso legal

Este artículo refleja la situación al 11 de agosto de 2026 y no sustituye asesoría legal. Qué ley aplica a tu oferta depende de tu jurisdicción y de tu negocio.

Sitio web accesible: qué exigen las reglas en realidad