Tres ajustes para empezar sin abrir nada. Cada botón hace lo mismo que su interruptor en el panel — es el mismo estado, contado dos veces.
WCAG 2.2 nivel AA es nuestro listón. La European Accessibility Act (aplicable desde junio de 2025) no obliga a Mogos — rige a quien ofrece a consumidores en la UE — y su norma armonizada, EN 301 549 v3.2.1, todavía referencia WCAG 2.1 AA. Adoptamos 2.2 AA por decisión propia: es el superset que cubre ambas.
Cada control cita su criterio de éxito — texto (1.4.4), espaciado (1.4.12), contraste (1.4.6), movimiento (2.2.2 y 2.3.3), enlaces (1.4.1), foco y objetivos (2.4.7 y 2.5.5) — con la lógica correcta: la conformidad se mide en el sitio, en su estado por defecto. El panel se suma encima; nunca la sustituye.
Los widgets que prometen volver accesible un sitio automáticamente son el anti-patrón documentado de la industria: más de 800 profesionales de accesibilidad firmaron el Overlay Fact Sheet en contra, y la FTC multó a accessiBe con US$1M (anunciada en enero de 2025, orden final en abril) por afirmar cumplimiento garantizado.
Tener el botón no evita demandas: buena parte de los sitios demandados por ADA en los últimos años lo tenía instalado. La conclusión es simple: el widget no sustituye un producto accesible — es una capa de preferencias encima de uno que ya lo es.
Nuestro botón no certifica nada: ajusta. La accesibilidad vive en el producto — contrastes AA de los tokens, foco visible, HTML semántico, navegación por teclado — y el widget le da a cada persona control sobre su propia lectura. Por eso cada interruptor dice exactamente lo que hace, y ninguno dice «cumplir la ley».
Y a la pregunta que todo panel debe poder responder — ¿por qué aquí y no en tu navegador? — respondemos con el W3C (técnica C29): porque muchas personas no saben o no pueden tocar los ajustes del sistema. En la encuesta de WebAIM a usuarios con baja visión, el 78% quisiera que más páginas tuvieran control de tamaño de texto — y los principiantes lo valoran mucho más que los expertos. El cliente de Mogos es un importador en un teléfono, no un ingeniero. La prueba final la fija el NHS: evidencia con usuarios reales de que lo necesitan y no saben lograrlo solos — cinco usuarios bastan, y es parte del plan.
Ocho ajustes en tres alturas — ver, leer, moverse. Los interruptores de estas fichas están conectados al panel: activa acá, y el panel lo sabe. Descartamos el cursor gigante a propósito: eso ya lo hace el sistema operativo, y duplicarlo es la redundancia que criticamos de los overlays.
Texto más grande WCAG 1.4.4
Tres pasos hasta +50%, en rem: se suma al zoom y
al ajuste de letra de tu navegador, nunca los sustituye. El 200% del criterio lo
da el navegador; esto lo afina.
Espaciado generoso WCAG 1.4.12
Más interlineado, más aire entre letras, palabras y párrafos. La página respira sin perder contenido.
Contraste alto WCAG 1.4.6
Tintas y líneas reforzadas — los grises suaves suben a marino. Misma paleta, más presencia. desde tu sistema
Fuente de lectura apoyo dislexia
Cambia la serif editorial por la sans de tu sistema: x-height alta, formas conocidas. Tu preferencia gana sobre la marca.
Máscara de lectura enfoque
Una banda horizontal sigue tu puntero (o el foco del teclado) y atenúa el resto de la página. Para leer línea a línea sin perderse.
Resaltar enlaces WCAG 1.4.1
Todo lo clicable se subraya con trazo grueso y fondo celeste — nunca solo color para distinguir.
Pausar movimiento WCAG 2.2.2 · 2.3.3
Animaciones y transiciones a cero. Si tu sistema ya lo pide, llega activado. desde tu sistema
Foco y objetivos grandes WCAG 2.4.7 · 2.5.5 AAA
Anillo de foco al doble de grosor y objetivos a 52px — sobre una base que ya cumple el mínimo AA (24×24, SC 2.5.8) sin activar nada.
Un perfil es una combinación guardada de los mismos ocho controles — visible, editable, desarmable. Nombran la necesidad, nunca una condición médica: el panel no diagnostica a nadie. Al activar uno, puedes ver exactamente qué encendió y apagar cualquier pieza.
Ver más grande
Más tamaño, más tinta, foco imposible de perder.
Lectura
Formas conocidas, aire entre líneas y una banda que guía el ojo.
Objetivos grandes
Todo más fácil de apuntar y lo clicable, evidente.
Calma
La página se queda quieta. Nada parpadea, nada se desliza.
Un flotante que no se puede quitar es un anti-patrón — y uno que desaparece para siempre, otro. El ciclo completo, probable en esta misma página:
Ocultar, desde el panel
«Ocultar el botón…» pregunta cuánto tiempo: por esta sesión o siempre en este dispositivo. Tus preferencias activas se conservan — se oculta el botón, no tus ajustes.
La página no pierde nada
El botón desaparece sin dejar hueco ni fantasma. Y como nunca tapó contenido ni foco (SC 2.4.11), la página funciona igual que antes de conocerlo.
El pie de página siempre sabe volver
El footer del sitio dice «Accesibilidad» de forma permanente: un clic y el botón vuelve, con el foco puesto en él. En pantallas con lector, el enlace existe aunque el flotante esté oculto.
El estándar de la industria no es solo el panel: es contarle a la gente dónde estás parado. Dos piezas acompañan al widget desde el día uno:
Declaración de accesibilidad
Una página pública en /accesibilidad con la estructura que la EAA
exige a quienes sí obliga (Anexo V) y el mínimo del W3C: el listón que adoptamos
(WCAG 2.2 AA), las limitaciones conocidas con fecha, y a quién escribirle. Sin
insignias ni porcentajes — compromisos con fecha. El panel enlaza aquí.
Canal de retroalimentación
Quien encuentre una barrera escribe por los canales que ya existen — WhatsApp y correo — con compromiso de respuesta explícito. Sin formulario nuevo: el canal de accesibilidad es el canal de siempre, atendido con prioridad.
No prometemos cumplimiento. Ni insignia de «sitio certificado», ni claim de «100% accesible». El sitio es accesible por diseño; el widget son preferencias encima. Lo contrario costó US$1M en la FTC.
No hay perfiles por condición médica. Nada de «modo epilepsia» ni «modo TDAH»: los perfiles nombran la necesidad — ver, leer, moverse, calma — no diagnostican a quien los usa.
Sin lector en voz alta, diccionario ni navegación por voz. Eso lo hace mejor el lector de pantalla y el sistema operativo. Duplicarlo dentro de la página confunde a quien de verdad los usa.
Nada rebota. El panel aparece con un fundido corto en
--ease-out; con «pausar movimiento» o prefers-reduced-motion,
aparece y ya.
Cero telemetría. Las preferencias viven en el dispositivo
(localStorage) y no viajan a ninguna red. Un panel de accesibilidad no
es un punto de rastreo.
El flotante nunca tapa. Ni contenido, ni el foco de otro elemento (SC 2.4.11): la página reserva su esquina y el panel abre hacia arriba, dentro del viewport.
Un componente, dos puertas
AccessibilityWidget vive en packages/ui. En
apps/client (con cuenta) el panel vive también en los ajustes
del perfil y las preferencias se guardan en la cuenta — te siguen del
teléfono al escritorio (patrón GitHub y Canvas). En el portal de pagos, sin cuenta,
la puerta es el flotante. La preferencia se aplica con un script inline
antes del primer pintado (patrón Wikipedia): cero parpadeo.
Atributos + tokens, no parches por elemento
El estado escribe data-a11y-* en <html> y el CSS
redefine tokens bajo ese selector — exactamente lo que hace esta
página. Ningún componente se entera: leen los mismos tokens de siempre.
html { font-size: calc(100% * var(--a11y-text-scale)); }
html[data-a11y-text="2"] { --a11y-text-scale: 1.3; }
/* tokens en rem: el ajuste del navegador se respeta y se compone */
El sistema primero
Sin estado guardado, el widget lee prefers-reduced-motion y
prefers-contrast: more del sistema operativo y llega con esos controles
ya activos, marcados «desde tu sistema». Lo no tocado queda en «auto» y sigue al
OS; bajo forced-colors (alto contraste de Windows) manda la paleta del
usuario. El widget afina la preferencia del OS — nunca pelea con ella. Y cuando las
apps tengan tema oscuro, el panel lo expondrá como Sistema / Claro /
Oscuro sembrado de prefers-color-scheme — nunca un toggle de
tema sin tema real detrás.
Privado por diseño
Persistencia en localStorage, ocultar-por-sesión en
sessionStorage. Cero peticiones de red, cero cookies de terceros. Si
mañana quisiéramos sincronizar entre dispositivos, sería una columna del perfil del
usuario — opcional y visible, nunca un tracker.