Diseño y accesibilidad
WCAG 2.2 dentro del sistema de diseño
Cómo convertir foco, tamaño de objetivo y autenticación accesible en reglas reutilizables de producto.
WCAG 2.2 añade criterios que afectan patrones cotidianos: foco no oculto, apariencia del foco, tamaño mínimo de objetivos, movimientos de arrastre, entrada redundante y autenticación accesible. Resolverlos página por página produce inconsistencias.
Un sistema de diseño puede convertir esos criterios en contratos: controles de al menos 24 por 24 píxeles donde aplique, áreas táctiles mayores para móvil, anillos de foco visibles, encabezados sticky que no cubran el elemento enfocado y alternativas a gestos complejos.
Visual editorial
Cobertura accesible por capa
Los componentes también necesitan estados completos. Un campo no es accesible solo por tener label; requiere ayuda, error asociado, contraste, orden de foco y comportamiento correcto con zoom y teclado. Esos detalles deben vivir en el componente y en su documentación.
La validación combina automatización y revisión humana. Lint y pruebas detectan atributos o contraste, pero navegación, comprensión, contenido y carga cognitiva necesitan recorridos reales con teclado, lector de pantalla y ampliación.
Convertir criterios en contratos
Un botón define tamaño, contraste, foco, estado disabled y nombre accesible. Un modal define foco inicial, trap, cierre y retorno. Al expresar esos comportamientos como contrato, cada producto recibe una base consistente y las excepciones se vuelven visibles en revisión de código y documentación.
Diseñar foco y objetivos desde el componente
El indicador debe conservar contraste y no quedar cubierto por encabezados sticky. Los icon buttons necesitan una superficie táctil suficiente aunque el icono sea pequeño. En grupos densos, el espaciado puede satisfacer el criterio sin aumentar cada forma, pero móvil suele beneficiarse de 44 píxeles como objetivo práctico.
Formularios y autenticación sin fricción cognitiva
Labels persistentes, ayuda asociada, errores accionables y autocompletado correcto reducen trabajo para todos. La autenticación debe permitir gestores de contraseñas, pegado y alternativas a acertijos cognitivos. Un mensaje anunciado por lector de pantalla debe explicar qué falló y cómo continuar.
Gobernar con pruebas de varias capas
Lint, pruebas unitarias y axe cubren parte de la semántica. La revisión manual añade teclado, zoom, reflow, lector de pantalla y comprensión del contenido. El sistema de diseño debe publicar ejemplos y criterios de aceptación para que la accesibilidad no dependa de la memoria de una sola persona.
El sistema reduce la repetición
WCAG 2.2 se vuelve manejable cuando sus requisitos viven en decisiones reutilizables. El sistema no garantiza por sí solo un producto accesible, pero evita que cada equipo vuelva a cometer los mismos errores básicos.