Accesibilidad

WCAG en la realidad desordenada del frontend: lo que los equipos pasan por alto despues de la auditoria

Dmitriy Hulak
Dmitriy Hulak
15 min de lectura0 vistas

WCAG en la realidad desordenada del frontend: lo que los equipos pasan por alto despues de la auditoria

En muchos equipos de producto hay un momento muy reconocible. La auditoria de accesibilidad ya se hizo, hay varios tickets en el board, alguien dice que los riesgos principales estan controlados y durante dos o tres dias todos sienten que moralmente ya cumplieron. Luego vuelve la vida normal del producto. Marketing cambia el texto del hero. Producto pide un dashboard mas denso. En un modal aparece un boton extra. Un disenador oscurece un panel porque "se ve mas premium". Un desarrollador envuelve el boton viejo en un div custom porque asi era mas facil controlar la animacion. Ninguno de esos cambios parece dramatico. Ninguno llega con una etiqueta diciendo: "yo soy la pequena cosa que va a romper el flujo de teclado, el contraste, el orden de foco y la claridad para lectores de pantalla el jueves que viene".

Por eso el trabajo real con WCAG se vuelve interesante despues de la primera auditoria, no antes. La auditoria te da una foto. El frontend real no es una foto. Es un sistema en movimiento, con copy cambiante, prioridades imperfectas y componentes que se van alejando poco a poco de la version cuidadosa que un dia paso review. La accesibilidad casi nunca muere en un release espectacular. Se desgasta en la parte desordenada del proceso, donde pequenos compromisos se apilan porque cada uno suena temporal y razonable.

La verdad incomoda es que la mayoria de equipos no pierde accesibilidad porque la odie. La pierde porque la velocidad fragmenta la atencion. Un sprint va de shippear. El siguiente de parchear. Luego viene un lanzamiento, una promo, un rediseño, una tanda de "ajustes menores de UI" que en realidad no son menores. En algun punto de esa corriente, el comportamiento accesible deja de ser un habito del producto y se convierte en un recuerdo de como antes se comportaba la interfaz.

Ese recuerdo es peligroso porque tranquiliza demasiado. Muchos equipos siguen pensando: "ya revisamos WCAG". Pero la accesibilidad no es una vacuna que te pones una vez. Se parece mucho mas a la calidad del layout o a la disciplina de performance. Puedes tener una base sana y aun asi degradarte con cada pequeno retoque visual. En la practica, los problemas caros de accesibilidad no suelen ser los errores obvios de principiante. Son patrones medio rotos que desde lejos parecen pulidos y que solo fallan cuando una persona real intenta recorrer la interfaz sin raton, con zoom activo, despues de una jornada larga, en un portatil mediocre y leyendo un contenido mucho mas largo que el que existia en el mockup.

Dmytro Hulak
Dmytro Hulak
Founder & CEO of CSS-Zone

"La accesibilidad casi nunca colapsa por un gran error. Se apaga por docenas de decisiones pequenas que el dia en que se tomaron parecian inofensivas."

Esa frase importa porque describe muy bien como aparecen las regresiones. Los equipos imaginan los bugs de accesibilidad como fallos evidentes: una etiqueta ausente, un formulario roto, un contraste desastroso. Claro que esos casos existen. Pero el dano mas comun es mucho mas silencioso. Un focus ring se cambia por una sombra sutil que en un monitor se ve elegante y en otro casi desaparece. Una toast notification entra preciosa pero nunca se anuncia a tecnologia asistiva. El encabezado de un accordion solo es clicable sobre el texto y no sobre toda el area activa porque el markup se reorganizo durante un refactor. Un chip de filtros "simple" deja de ser alcanzable en el orden esperado porque un flex reorder separo la jerarquia visual de la jerarquia del DOM. La interfaz sigue pareciendo cara. Solo que se siente poco fiable para quien necesita que sea predecible.

Vale la pena hablar de esto con detalle por una razon simple: el trabajo real de accesibilidad es mas emocional de lo que muchos ingenieros admiten. Las personas usuarias no viven WCAG como un estandar numerado. Lo viven como alivio o como friccion. Alivio significa leer sin forzar la vista, moverse sin adivinar, recuperarse de un error sin panico y confiar en que la pagina no se volvera hostil porque pulsaron Tab una vez mas de lo normal. Friccion significa lo contrario. Son pequenos momentos de duda tan seguidos que la interfaz termina agotando, incluso cuando cada problema aislado parece pequeno dentro de un ticket.

Uno de los mejores ejemplos es el tratamiento del foco. Los equipos suelen invertir una cantidad sorprendente de cuidado en hover states y casi nada en visibilidad para teclado. Hover sale en todas las revisiones de diseno porque todo el mundo usa puntero. Focus no aparece tanto en el proceso social de review porque casi nadie navega la interfaz como lo hace una persona usuaria de teclado. El resultado es que muchos productos salen a produccion con estilos de foco tecnicamente presentes pero practicamente debiles. El outline existe, pero se hunde en el fondo, choca con sombras o desaparece contra los colores de marca justo en el momento en que la persona usuaria mas necesita certeza.

La solucion rara vez es sofisticada. Casi siempre consiste en elegir claridad por encima de vanidad visual y construir un sistema de foco que sobreviva en botones, links, tabs custom, cards y controles de formulario. Si cada componente inventa su propia forma de indicar foco, la consistencia se pierde rapido. Si el equipo define una logica clara y la protege en revisiones, la accesibilidad deja de depender del humor del sprint.

Otro frente donde la accesibilidad se degrada es el contenido que crece. El mockup inicial tiene tres lineas. La version real termina teniendo nueve. El card que se veia impecable con una demo corta ahora contiene un titulo largo, una descripcion irregular y un CTA adicional. El layout sigue "funcionando", pero la lectura empeora, los hit areas se vuelven raros y la pagina empieza a depender demasiado de una precision visual que no deberia ser requisito para entenderla. WCAG no se rompe solo por semantica; tambien se rompe cuando la interfaz deja de tolerar contenido real.

Lo mismo pasa con la reutilizacion de componentes. Un componente puede ser perfectamente accesible dentro del contexto para el que fue creado y dejar de serlo cuando se mueve a otro lugar. Un tab switcher convertido en filtro. Un dropdown convertido en selector critico. Una card clicable reutilizada dentro de una tabla responsive. Cada reutilizacion cambia expectativas, orden de lectura, densidad de contenido y patrones de interaccion. Si el equipo solo revisa el componente en su contexto original, la deuda llega por la puerta de atras.

Tambien hay un problema cultural. En muchos equipos, accesibilidad se trata como una capa de QA tardia o como una checklist para antes del release. Eso garantiza que siempre llegue tarde. Cuando la accesibilidad no forma parte del criterio de done, cualquier presion de tiempo la empuja fuera. No hace falta mala intencion. Basta con que el equipo siga repitiendo: "lo arreglamos despues". El resultado acumulado es el de siempre: una interfaz que aun parece correcta en screenshots pero que en uso real empieza a cansar, confundir y excluir.

Una postura sana es bastante menos romantica. Revisar los flujos importantes. Revisarlos despues de cambios visuales. Revisarlos cuando el contenido crezca. Revisarlos cuando un componente se reutilice en contextos peores que el original. Aceptar que la accesibilidad sobrevive mejor en equipos que toleran ser un poco repetitivos a cambio de seguir siendo fiables.

No es trabajo glamuroso. Es mejor que eso. Es el tipo de trabajo que sigue en pie seis meses despues, cuando el brillo del lanzamiento ya desaparecio y lo unico que importa es que el producto siga funcionando para personas reales.

Publicaciones relacionadas

Sigue leyendo sobre temas relacionados.

WCAG en productos reales: metodos practicos que de verdad funcionanBuenas practicas de WCAG para equipos reales: como hacer revisiones de accesibilidad sin teatro de checklists, pasar flujos WCAG AA y usar las paginas de prueba de CSS-Zone en el trabajo diario.Accesibilidad WCAG 2.2: buenas practicas de CSS para un diseño inclusivoHaz que tu sitio cumpla WCAG 2.2 con CSS: contraste, estados de foco, preferencias de movimiento y compatibilidad con lectores de pantalla.Herramientas para revisar accesibilidad WCAG y validar cumplimientoGuia practica de herramientas para revisar accesibilidad: contraste, teclado, screen readers y auditoria WCAG.Sistemas de contraste accesible para productos realesComo construir sistemas de contraste que escalen desde landings hasta dashboards sin romper legibilidad ni accesibilidad.

Comments

0

Sign in to leave a comment.

No comments yet. Be the first.