Accesibilidad web: guía práctica de WCAG 2.2 para tu sitio
Una web accesible es la que puede usar cualquier persona, incluidas las que tienen discapacidad visual, auditiva, motriz o cognitiva. No es solo una obligación ética o legal: también mejora tu SEO y tus conversiones.
En resumen
- WCAG 2.2 es el estándar internacional de accesibilidad web; el objetivo habitual es cumplir el nivel AA.
- Los problemas más comunes son el bajo contraste, imágenes sin texto alternativo, formularios sin etiquetas y sitios que no se pueden usar con teclado.
- Los widgets o «overlays» de accesibilidad no hacen accesible un sitio: hay que corregir el código.
¿Qué es la accesibilidad web?
Es diseñar y desarrollar sitios que puedan percibir, entender, navegar y usar todas las personas: quienes usan lectores de pantalla, quienes navegan solo con teclado, personas con baja visión, daltonismo, discapacidad auditiva o cognitiva, y también adultos mayores o alguien con un brazo enyesado usando el celular bajo el sol.
Las Pautas de Accesibilidad para el Contenido Web (WCAG) del W3C son la referencia mundial. La versión 2.2, publicada en octubre de 2023, organiza los requisitos en cuatro principios: contenido perceptible, operable, comprensible y robusto, con tres niveles de conformidad (A, AA y AAA).
Por qué le importa a tu negocio
- Más clientes: una parte importante de la población tiene alguna discapacidad, y la proporción crece con la edad.
- Mejor SEO: encabezados bien estructurados, textos alternativos, enlaces descriptivos y HTML semántico son exactamente lo que necesitan los buscadores y los asistentes de IA para entender tu contenido.
- Más conversiones: formularios claros, botones grandes y buen contraste ayudan a todos los usuarios, no solo a quienes tienen discapacidad.
- Cumplimiento normativo: en Colombia, la Ley 1618 de 2013 protege los derechos de las personas con discapacidad, y la Resolución 1519 de 2020 de MinTIC exige requisitos de accesibilidad a los sitios de entidades públicas. Si vendes a consumidores de la Unión Europea, la Ley Europea de Accesibilidad se aplica desde junio de 2025.
Checklist práctico (nivel AA)
Perceptible
- Contraste mínimo de 4,5:1 para texto normal y 3:1 para texto grande e íconos importantes.
- Texto alternativo (
alt) que describa las imágenes con información;alt=""para las decorativas. - Subtítulos en videos y transcripción en audios.
- No transmitir información solo con color (por ejemplo, «los campos en rojo son obligatorios»).
- El contenido debe funcionar con zoom al 200 % y en pantallas de 320 px de ancho sin desplazamiento horizontal.
Operable
- Todo debe poder usarse solo con teclado: menús, formularios, ventanas emergentes y carruseles.
- Foco visible en el elemento activo, y que no quede tapado por cabeceras fijas o banners (nuevo en WCAG 2.2).
- Áreas táctiles de al menos 24 × 24 píxeles (nuevo en WCAG 2.2).
- Si algo se arrastra (sliders, listas ordenables), debe existir una alternativa con un clic (nuevo en WCAG 2.2).
- Un enlace para «saltar al contenido» y títulos de página únicos.
Comprensible
- Idioma declarado en el HTML:
<html lang="es">. - Etiquetas visibles en todos los campos de formulario, no solo texto de ejemplo (placeholder).
- Mensajes de error que expliquen qué falló y cómo corregirlo.
- No pedir dos veces la misma información en un proceso, y no obligar a resolver acertijos para iniciar sesión (nuevos en WCAG 2.2).
Robusto
- HTML semántico:
<button>para acciones,<a>para navegación, encabezados en orden (h1, h2, h3). - Atributos ARIA solo cuando el HTML nativo no alcanza, y bien usados.
- Nombres accesibles en botones con solo ícono (
aria-label="Abrir menú").
Cómo evaluar tu sitio
- Herramientas automáticas: Lighthouse (en Chrome), axe DevTools o WAVE. Detectan una parte de los problemas, no todos.
- Prueba con teclado: recorre tu web solo con Tab, Shift + Tab, Enter y Escape. ¿Ves siempre dónde estás? ¿Puedes abrir y cerrar el menú?
- Prueba con lector de pantalla: NVDA (gratuito en Windows), VoiceOver (Mac e iPhone) o TalkBack (Android).
- Prueba con zoom: amplía al 200 % y revisa que no se rompa el diseño.
Cuidado con los «overlays» de accesibilidad
Los widgets que prometen hacer tu web accesible «con una línea de código» no corrigen los problemas de fondo, a veces interfieren con los lectores de pantalla y son rechazados por buena parte de la comunidad de personas con discapacidad. En 2025, la Comisión Federal de Comercio de EE. UU. sancionó a uno de estos proveedores por publicidad engañosa.
La accesibilidad real se logra en el diseño y el código. La buena noticia: si se considera desde el inicio del proyecto, cuesta muy poco.
Preguntas frecuentes
¿Mi web debe ser accesible por ley?
Para entidades públicas en Colombia, sí. Para empresas privadas, la obligación depende del sector y de dónde vendas (por ejemplo, la Unión Europea). Aun cuando no sea obligatorio, es una buena práctica que mejora tu SEO y tus ventas.
¿Lighthouse con 100 en accesibilidad significa que cumplo WCAG?
No. Las herramientas automáticas detectan solo una parte de los problemas. Necesitas también pruebas manuales con teclado y lector de pantalla.
¿WordPress y Elementor permiten hacer sitios accesibles?
Sí, pero depende del tema, los plugins y cómo se construyan las páginas. Elige temas que declaren buena accesibilidad, revisa el contraste de tu paleta y prueba los menús y formularios con teclado.
Conclusión
La accesibilidad no es una función extra: es parte de hacer bien una web. Empieza por lo que más impacto tiene: contraste, textos alternativos, formularios con etiquetas y navegación con teclado. Mejorarás la experiencia de todos tus usuarios, tu posicionamiento y tu reputación.
