La NTC 5854 es la norma técnica colombiana que adopta las WCAG 2.0 para garantizar que los sitios web sean accesibles para todas las personas, incluidas aquellas con discapacidades. Aunque llevamos años hablando de esto, la realidad es que todavía encontramos portales institucionales con problemas básicos que afectan la experiencia de usuarios con lectores de pantalla, navegación por teclado o baja visión.
Durante mi trabajo con entidades como la Contraloría de Bogotá y el AGN, me he encontrado con patrones de errores que se repiten constantemente. No es por falta de voluntad, sino porque muchas veces los equipos técnicos no tienen clara la diferencia entre cumplir con un checklist y realmente entender qué hace accesible un sitio web. Hoy quiero compartir esos tropiezos comunes y cómo podemos solucionarlos de una.
Los errores que más veo (y que más duelen)
El primer error, y probablemente el más común, es no etiquetar correctamente las imágenes. El atributo alt no es opcional. Cuando un lector de pantalla encuentra una imagen sin alt, simplemente dice el nombre del archivo: "IMG_20240315_final_v2.jpg". Imagina intentar entender el contenido así. La solución es simple: toda imagen debe tener un alt descriptivo y conciso. Si la imagen es decorativa, usa alt="" (vacío, no ausente).
Luego están los formularios sin etiquetas asociadas. He visto formularios de contacto donde los campos solo tienen placeholders. El placeholder no reemplaza el label. Un usuario con lector de pantalla no puede saber qué debe escribir en cada campo. La corrección: usa siempre etiquetas <label> con el atributo for apuntando al id del input correspondiente. En Laravel, por ejemplo, puedes crear componentes Blade que fuercen esta buena práctica desde el diseño.
Otro problema recurrente es el contraste de color insuficiente. Textos grises claros sobre fondos blancos se ven "modernos", pero fallan estrepitosamente en accesibilidad. La NTC 5854 exige una relación de contraste mínima de 4.5:1 para texto normal. Herramientas como WebAIM Contrast Checker te permiten verificar esto antes de implementar. No cuesta nada y evita problemas enormes.
La navegación por teclado: el gran olvidado
Muchos desarrolladores diseñan pensando exclusivamente en usuarios de mouse. Pero hay personas que navegan solo con teclado, ya sea por preferencia o necesidad. Cuando implementas un menú desplegable con JavaScript y no consideras el enfoque (focus) de teclado, estás creando barreras invisibles.
La tecla Tab debe permitir recorrer todos los elementos interactivos en un orden lógico. Los dropdown menus deben abrirse con Enter o Espacio. Los elementos que reciben foco deben tener un indicador visual claro, no ese outline que todos quitamos con CSS porque "se ve feo". Si lo vas a quitar, reemplázalo con otro estilo visible.
Aquí va una reflexión personal: a veces me pregunto si realmente entendemos la magnitud de lo que significa excluir a alguien de la información pública. Cuando un ciudadano no puede consultar un trámite en línea porque el sitio no es accesible, no es solo un problema técnico. Es una barrera democrática real.
Estructura semántica y encabezados: más que decoración
Los encabezados (h1, h2, h3...) no son solo para hacer texto grande. Son la estructura que permite a los usuarios de lectores de pantalla navegar rápidamente por el contenido. Un error típico es usar h3 porque "ese tamaño se ve chévere", sin considerar la jerarquía lógica.
La regla es clara: un solo h1 por página (generalmente el título principal), y los demás encabezados deben seguir un orden jerárquico sin saltarse niveles. No pases de h2 a h4 directamente.
Los landmarks HTML5 (header, nav, main, aside, footer) también son importantes. Dan contexto estructural que los lectores de pantalla usan para orientarse. En proyectos con CMS como WordPress o desarrollos custom en Laravel, implementar estas etiquetas semánticas desde las plantillas base hace que todos los contenidos hereden buenas prácticas.
Otro detalle: los enlaces deben tener textos descriptivos. Nada de "clic aquí" o "leer más" sin contexto. El texto del enlace debe indicar claramente a dónde lleva. Si tienes diez "leer más" en una página, un usuario de lector de pantalla escuchará una lista de enlaces idénticos sin forma de distinguirlos.
La accesibilidad no es un extra que agregamos al final. Es parte del desarrollo responsable desde el inicio. Cada vez que escribo una línea de código para un portal institucional, pienso en esos usuarios que nunca veré pero que dependen de que yo haga bien mi trabajo. Ojo con eso: la NTC 5854 no es solo un requisito legal para entidades públicas colombianas, es una responsabilidad ética que tenemos como desarrolladores.
Queda mucho por hacer. Seguimos aprendiendo, corrigiendo, mejorando. La web accesible es posible, solo necesitamos ponerle atención real.