Sistema de Diseño de Indicadores de Enfoque

¿Qué hace Sistema de Diseño de Indicadores de Enfoque?

Propósito

El Sistema de Diseño de Indicadores de Enfoque proporciona una metodología sistemática para diseñar, especificar y auditar indicadores de enfoque de teclado en todos los elementos interactivos (botones, enlaces, campos de formulario, alternadores personalizados y widgets complejos).

Los indicadores de enfoque son la guía visual principal para los navegadores de teclado, usuarios de lectores de pantalla y personas que utilizan entradas alternativas. Cuando los diseñadores ocultan el anillo de enfoque nativo del navegador porque "se ve feo" o lo reemplazan con una anulación de bajo contraste, crean una barrera de accesibilidad inmediata y catastrófica. Este sistema garantiza que los indicadores de enfoque sean de marca, de alto contraste, estén colocados de manera robusta y cumplan con los estándares WCAG 2.1 y 2.2, sin comprometer la estética visual.

Casos de Uso

• Creación de Sistemas de Diseño: Establecer estados de enfoque globales basados en tokens dentro de un kit de UI de marca.
• Especificaciones de Diseño de Componentes: Definir anillos de enfoque personalizados para elementos complejos (por ejemplo, casillas de verificación personalizadas, controles deslizantes de rango o grupos de pestañas).
• Auditorías de Corrección de Accesibilidad: Identificar y corregir contornos de enfoque invisibles o de bajo contraste en un sitio web existente.
• Adaptaciones de Tema y Fondo: Estandarizar indicadores de enfoque para fondos claros, oscuros y de color de marca.
• Optimización de Entrada Multiplataforma: Configurar comportamientos de :focus-visible para garantizar que los usuarios de mouse no vean anillos de enfoque distractores mientras que los navegadores de teclado obtengan indicadores de alta visibilidad.

Cuándo NO Usar

• Contenido Estático: No diseñe indicadores de enfoque para elementos no interactivos (por ejemplo, párrafos simples, imágenes, encabezados o tarjetas informativas sin enlaces).
• Controles Nativos Sin Modificar: Si un proyecto se basa puramente en los controles predeterminados del navegador sin ningún estilo personalizado o anulación de marca, y el comportamiento nativo de enfoque se mantiene intacto.
• Modalidades Alternativas de Orientación: En pantallas inteligentes controladas por voz o aplicaciones móviles nativas de solo tacto donde los anillos de enfoque de estilo teclado no forman parte de la arquitectura de accesibilidad estándar de la plataforma.

Entradas

1. Paleta de Marca y Tokens de Fondo: Colores principales, colores de fondo (claro, oscuro y teñido de marca) y bordes de contenedores.
2. Inventario de Elementos Interactivos: Una lista de todos los componentes de UI interactivos que requieren estados de enfoque (botones, enlaces, campos de texto, radios, superposiciones personalizadas).
3. Sistema de Radio de Esquina: Valores de token para el redondeo de componentes (por ejemplo, --radius-s, --radius-m) para garantizar que los anillos de enfoque coincidan con la forma del elemento.
4. Nivel de WCAG Objetivo: Cumplimiento mínimo estándar AA (WCAG 2.1/2.2) o objetivo AAA.

Salidas

1. Tokens Globales de Enfoque: Tokens de diseño estandarizados que definen el color, grosor, estilo de contorno y espaciado de compensación del anillo de enfoque.
2. Especificaciones de Enfoque Específicas de Componentes: Reglas de diseño espacial para anillos de enfoque internos, anillos de enfoque externos y contornos anidados complejos.
3. Reglas de Estilo de Alto Contraste (Colores Forzados): Especificaciones CSS que garantizan la compatibilidad con el Modo de Colores Forzados de Windows.
4. Lógica de Integración Focus-Visible: Especificaciones que separan las señales de navegación por teclado de las respuestas de clic de mouse.

Flujo de Trabajo

1. Catalogar Contextos de Componentes

Auditar los componentes interactivos y agruparlos por el fondo del contenedor para determinar los requisitos de contraste de enfoque:

• Fondos claros: Requieren un anillo de enfoque oscuro.
• Fondos oscuros: Requieren un anillo de enfoque claro.
• Fondos de marca (por ejemplo, Azul Vivo): Puede requerir un anillo neutro-blanco o secundario de alto contraste, ya que los contornos estándar de color de marca se fusionarían con el fondo.

2. Definir el Modelo de Tamaño y Ubicación

Seleccionar la relación geométrica entre el elemento y su anillo de enfoque:

• Contorno Externo Compensado: El anillo de enfoque se coloca fuera del borde del elemento usando un espacio transparente (compensación). Recomendado para botones, etiquetas y enlaces.
• Anillo de Enfoque Interno: El anillo de enfoque se coloca dentro de los bordes del elemento. Recomendado para campos de texto, menús de selección y elementos recortados por overflow: hidden.
• Halo de Contraste (Doble Anillo): Un anillo externo envuelto en una línea de contraste secundaria (por ejemplo, un anillo blanco de 2px con un contorno negro de 1px). Extremadamente robusto, ya que garantiza la visibilidad contra cualquier fondo.

3. Establecer los Tokens de Contraste y Tamaño de WCAG

Determinar los valores mínimos de estilo para satisfacer WCAG:

• Establecer el grosor del anillo de enfoque a un mínimo de 2px (preferiblemente 3px).
• Mantener una relación de contraste mínima de 3:1 contra el fondo adyacente, y contra el estado no enfocado del elemento.
• Asegurar que el indicador de enfoque tenga un área de superficie al menos igual a un borde sólido de 2px alrededor del perímetro del control (Apariencia de Enfoque WCAG 2.2).

4. Separar Estados de Puntero vs. Teclado

Evitar la "fricción de diseño" utilizando la pseudo-clase :focus-visible.

• Navegación por teclado (:focus-visible): Activa indicadores de enfoque de alto contraste y visualmente prominentes.
• Interacción de mouse/toque (:focus sin :focus-visible): Mantiene los anillos de enfoque suprimidos o extremadamente sutiles para los clics de mouse, evitando quejas de diseño mientras se mantiene la accesibilidad total.

5. Definir Respaldo para Modo de Alto Contraste

Asegurar que los indicadores de enfoque no desaparezcan bajo las preferencias de estilo de asistencia (como el Modo de Alto Contraste / Colores Forzados de Windows):

• El outline nativo con color transparente se asigna automáticamente mediante Colores Forzados, pero los estilos personalizados de box-shadow se descartan.
• Incluir siempre un respaldo de outline (incluso si se establece en outline: 2px solid transparent o usando outline-color: CanvasText en consultas de medios) para que el Modo de Alto Contraste renderice un contorno visible.

Reglas de Decisión

Regla 1: Colocación del Anillo Interno vs. Externo

• Usar un Contorno Externo Compensado si el elemento tiene bordes personalizados y no tiene una máscara de desbordamiento (overflow: hidden).
• Usar un Anillo de Enfoque Interno (box-shadow: inset ...) si el elemento es parte de una cuadrícula ajustada, tiene overflow: hidden en su contenedor padre, o es un campo de entrada de texto donde los contornos externos se superpondrían a elementos adyacentes.

Regla 2: Anillo de un Solo Color vs. Halo de Doble Color

• Usar un Anillo de un Solo Color si el fondo es uniforme y predecible (por ejemplo, siempre claro o siempre oscuro) y se verifica que el contraste sea >= 3:1.
• Usar un Halo de Contraste de Doble Color (por ejemplo, azul oscuro interior, blanco puro exterior) si el elemento se encuentra sobre imágenes, gradientes, contenido generado por el usuario o se desliza entre fondos variables (como encabezados fijos que se desplazan sobre los límites de las secciones).

Regla 3: Radio de Borde del Anillo de Enfoque

• El contorno de enfoque debe reflejar el border-radius de su control padre.
• Asegurar que outline-offset sea positivo (por ejemplo, 2px o 4px) y que el radio de borde del contorno coincida con la curvatura de la tarjeta/botón, o usar box-shadow que se asigna naturalmente a las esquinas redondeadas del componente.

CORRECTO:
[   Botón (Radio 8px)   ]
   (Espacio: 2px)
============================= Contorno de Enfoque (Radio 10px)

INCORRECTO:
[   Botón (Radio 8px)   ]
   (Espacio: 2px)
----------------------------- Contorno de Enfoque (Esquinas Afiladas de 90 Grados)

Restricciones

• Accesibilidad (Contraste): El anillo de enfoque debe tener una relación de contraste de al menos 3:1 contra su fondo circundante (WCAG 2.1 SC 1.4.11 Contraste Sin Texto).
• Accesibilidad (Visibilidad): El indicador debe ser completamente visible. Los indicadores de enfoque nunca deben ocultarse detrás de encabezados fijos, widgets de chat flotantes o superposiciones (WCAG 2.2 SC 2.4.11 Enfoque No Oscurecido).
• Accesibilidad (Apariencia): El indicador de enfoque debe ser lo suficientemente grande. Debe cumplir con el cálculo de WCAG 2.2 SC 2.4.13 (Apariencia de Enfoque): ancho mínimo de 2px y un área mínima igual al perímetro multiplicado por 2px.
• Capacidad de Respuesta: Los indicadores de enfoque no deben estirar el contenedor ni provocar desbordamiento de diseño horizontal en la página. Usar siempre posicionamiento absoluto, contornos CSS absolutos o sombras de caja internas, que no alteran el flujo de diseño del DOM.

Patrones de Falla Comunes

• El Borrador :focus { outline: none; }: Ocultar completamente el indicador de enfoque sin proporcionar un reemplazo robusto de pseudo-clase.
• Anillos "Fantasma" de Bajo Contraste: Usar un contorno gris claro sobre un fondo blanco, haciendo que el estado activo de enfoque sea invisible para los usuarios con visión de bajo contraste.
• La Trampa del "Contorno Recortado" : Colocar un anillo de enfoque externo en un elemento anidado dentro de un contenedor con overflow: hidden. El indicador de enfoque se corta en los lados izquierdo y derecho, dejando solo fragmentos horizontales.
• La "Cubierta del Encabezado Fijo": Enfocar con Tab un elemento ancla situado en la parte superior del viewport, pero la barra de navegación fija se superpone y lo oculta por completo (violación de WCAG 2.2 SC 2.4.11).
• Desorden de Enfoque por Clic: No usar :focus-visible, lo que provoca que aparezcan anillos azules intensos en cada clic de mouse, frustrando a los equipos de diseño y llevándolos a solicitar la eliminación total de los estilos de enfoque.
• Borrado en Colores Forzados: Construir hermosos anillos de enfoque únicamente con propiedades personalizadas CSS y valores de box-shadow sin un respaldo de outline transparente, lo que resulta en indicadores de enfoque completamente invisibles en el Modo de Alto Contraste de Windows.

Criterios de Validación

• Cada elemento interactivo muestra un indicador de enfoque altamente visible y distintivo cuando se navega a él mediante la tecla Tab.
• Se verifica que cada indicador de enfoque global y de componente tenga un contraste >= 3:1 contra su fondo.
• El estilo de enfoque personalizado utiliza el selector :focus-visible para garantizar que se active en la navegación por teclado pero permanezca limpio durante los clics de mouse.
• Ningún indicador de enfoque se recorta o corta por las reglas de overflow: hidden del contenedor padre (compensación ajustada o desplazado internamente).
• La navegación por teclado a elementos cerca de encabezados fijos o elementos flotantes mantiene el elemento enfocado completamente visible (usando anulaciones de scroll-margin-top).
• Los indicadores de enfoque se verifican en el Modo de Alto Contraste / Colores Forzados utilizando reglas de contorno transparente.
• El área de superficie del perímetro de los indicadores personalizados cumple con los cálculos mínimos de WCAG 2.2 SC 2.4.13.