coastdigitalgroup/coastai-skills

Sistema de Design de Indicadores de Foco

Propósito

O Sistema de Design de Indicadores de Foco fornece uma metodologia sistemática para projetar, especificar e auditar indicadores de foco de teclado em todos os elementos interativos (botões, links, campos de formulário, alternadores personalizados e widgets complexos).

Os indicadores de foco são o principal guia visual para navegadores por teclado, usuários de leitores de tela e pessoas que usam dispositivos de entrada alternativos. Quando os designers ocultam o anel de foco padrão do navegador porque ele "parece feio" ou o substituem por uma sobreposição de baixo contraste, criam uma barreira de acessibilidade imediata e catastrófica. Este sistema garante que os indicadores de foco sejam compatíveis com a marca, tenham alto contraste, posicionamento robusto e estejam em conformidade com os padrões WCAG 2.1 e 2.2, sem comprometer a estética visual.

Casos de Uso

• Criação de Sistema de Design: Estabelecimento de estados de foco globais baseados em tokens dentro de um kit de UI da marca.
• Especificações de Design de Componentes: Definição de anéis de foco personalizados para elementos complexos (por exemplo, caixas de seleção personalizadas, controles deslizantes de intervalo ou grupos de abas).
• Auditorias de Remediação de Acessibilidade: Identificação e correção de contornos de foco invisíveis ou de baixo contraste em um site existente.
• Adaptações de Tema e Fundo: Padronização de indicadores de foco para fundos claros, escuros e com cores da marca.
• Otimização de Entrada Multiplataforma: Configuração de comportamentos :focus-visible para garantir que usuários de mouse não vejam anéis de foco perturbadores, enquanto navegadores por teclado obtêm indicadores de alta visibilidade.

Quando NÃO Usar

• Conteúdo Estático: Não projete indicadores de foco para elementos não interativos (por exemplo, parágrafos simples, imagens, cabeçalhos ou cartões informativos sem links).
• Controles Nativos Não Modificados: Se um projeto depende puramente de controles padrão do navegador sem qualquer estilo ou substituição de marca personalizada, e o comportamento de foco nativo está completamente intacto.
• Modalidades de Orientação Alternativas: Em displays inteligentes controlados por voz ou aplicativos móveis nativos puramente táteis, onde os anéis de foco estilo teclado não fazem parte da arquitetura de acessibilidade padrão da plataforma.

Entradas

1. Paleta da Marca e Tokens de Fundo: Cores principais, cores de fundo (claro, escuro e matiz da marca) e bordas de contêiner.
2. Inventário de Elementos Interativos: Uma lista de todos os componentes de UI interativos que exigem estados de foco (botões, links, campos de texto, botões de rádio, sobreposições personalizadas).
3. Sistema de Raio de Borda: Valores de token para arredondamento de componentes (por exemplo, --radius-s, --radius-m) para garantir que os anéis de foco correspondam à forma do elemento.
4. Nível de WCAG Alvo: Conformidade mínima padrão AA (WCAG 2.1/2.2) ou alvo AAA.

Saídas

1. Tokens de Foco Globais: Tokens de design padronizados que definem cor, espessura, estilo de contorno e espaçamento de deslocamento do anel de foco.
2. Especificações de Foco Específicas de Componentes: Regras de layout espacial para anéis de foco internos, anéis de foco externos e contornos aninhados complexos.
3. Regras de Estilo de Alto Contraste (Cores Forçadas): Especificações CSS que garantem compatibilidade com o Modo de Cores Forçadas do Windows.
4. Lógica de Integração Focus-Visible: Especificações que separam as dicas de navegação por teclado das respostas a cliques do mouse.

Fluxo de Trabalho

1. Catalogar Contextos de Componentes

Audite componentes interativos e agrupe-os por fundo do contêiner para determinar os requisitos de contraste do foco:

• Fundos claros: Exigem um anel de foco escuro.
• Fundos escuros: Exigem um anel de foco claro.
• Fundos da marca (por exemplo, Azul Vívido): Podem exigir um anel de alto contraste neutro-branco ou secundário, pois contornos padrão com a cor da marca se misturariam ao fundo.

2. Definir o Modelo de Dimensionamento e Posicionamento

Selecione a relação geométrica entre o elemento e seu anel de foco:

• Contorno Externo Deslocado: O anel de foco é posicionado fora da borda do elemento usando um espaço transparente (deslocamento). Recomendado para botões, tags e links.
• Anel de Foco Interno: O anel de foco é posicionado dentro das bordas do elemento. Recomendado para campos de texto, menus de seleção e itens cortados por overflow: hidden.
• Halos de Contraste (Anel Duplo): Um anel externo envolto em uma linha secundária de contraste (por exemplo, anel branco de 2px com um contorno preto de 1px). Extremamente robusto, pois garante visibilidade contra qualquer fundo.

3. Estabelecer os Tokens de Contraste e Dimensionamento WCAG

Determine valores mínimos de estilo para satisfazer o WCAG:

• Defina a espessura do anel de foco para no mínimo 2px (3px preferido).
• Mantenha uma taxa de contraste mínima de 3:1 contra o fundo adjacente e contra o estado não focado do elemento.
• Garanta que o indicador de foco tenha uma área de superfície pelo menos igual a uma borda sólida de 2px ao redor do perímetro do controle (Aparência de Foco WCAG 2.2).

4. Separar Estados de Ponteiro vs. Teclado

Evite "atrito de design" utilizando a pseudo-classe :focus-visible.

• Navegação por teclado (:focus-visible): Aciona indicadores de foco de alto contraste e visualmente proeminentes.
• Interação por mouse/toque (:focus sem :focus-visible): Mantém os anéis de foco suprimidos ou extremamente sutis para cliques do mouse, evitando reclamações de design enquanto mantém a acessibilidade total.

5. Definir Fallbacks para Modo de Alto Contraste

Garanta que os indicadores de foco não desapareçam sob preferências de estilo assistivas (como Modo de Alto Contraste / Cores Forçadas do Windows):

• O outline nativo com cor transparente é mapeado automaticamente por Cores Forçadas, mas os estilos personalizados de box-shadow são descartados.
• Sempre inclua um fallback de outline (mesmo que definido como outline: 2px solid transparent ou usando outline-color: CanvasText em media queries) para que o Modo de Alto Contraste renderize um contorno visível.

Regras de Decisão

Regra 1: Posicionamento de Anel Interno vs. Externo

• Use um Contorno Externo Deslocado se o elemento tiver bordas personalizadas e não tiver uma máscara de estouro (overflow: hidden).
• Use um Anel de Foco Interno (box-shadow: inset ...) se o elemento fizer parte de uma grade apertada, tiver overflow: hidden em seu contêiner pai, ou for um campo de entrada de texto onde contornos externos se sobreporiam a elementos adjacentes.

Regra 2: Anel de Cor Única vs. Halo de Duas Cores

• Use um Anel de Cor Única se o fundo for uniforme e previsível (por exemplo, sempre claro ou sempre escuro) e o contraste for verificado em >= 3:1.
• Use um Halo de Contraste de Duas Cores (por exemplo, azul escuro interno, branco puro externo) se o elemento estiver sobre imagens, gradientes, conteúdo gerado pelo usuário ou deslizar entre fundos variáveis (como cabeçalhos fixos que rolam sobre limites de seção).

Regra 3: Raio de Borda do Anel de Foco

• O contorno de foco deve espelhar o border-radius de seu controle pai.
• Garanta que outline-offset seja positivo (por exemplo, 2px ou 4px) e que o raio de borda do contorno corresponda à curvatura do cartão/botão, ou use box-shadow que naturalmente se mapeia para os cantos arredondados do componente.

CORRETO:
[   Botão (Raio 8px)   ]
   (Espaço: 2px)
============================= Contorno de Foco (Raio 10px)

INCORRETO:
[   Botão (Raio 8px)   ]
   (Espaço: 2px)
----------------------------- Contorno de Foco (Cantos Retos de 90 Graus)

Restrições

• Acessibilidade (Contraste): O anel de foco deve ter uma taxa de contraste de pelo menos 3:1 contra seu fundo circundante (WCAG 2.1 SC 1.4.11 Contraste Não Textual).
• Acessibilidade (Visibilidade): O indicador deve estar totalmente visível. Os indicadores de foco nunca devem ser ocultados atrás de cabeçalhos fixos, widgets de chat flutuantes ou sobreposições (WCAG 2.2 SC 2.4.11 Foco Não Obscurecido).
• Acessibilidade (Aparência): O indicador de foco deve ser grande o suficiente. Deve atender ao cálculo do WCAG 2.2 SC 2.4.13 (Aparência de Foco): largura mínima de 2px e uma área mínima igual ao perímetro multiplicado por 2px.
• Responsividade: Os indicadores de foco não devem esticar o contêiner ou causar estouro de layout horizontal da página. Sempre use posicionamento absoluto, contornos CSS absolutos ou box-shadows internos, que não alteram o fluxo de layout do DOM.

Padrões Comuns de Falha

• A Borracha :focus { outline: none; }: Ocultar completamente o indicador de foco sem fornecer uma substituição robusta de pseudo-classe.
• Anéis "Fantasma" de Baixo Contraste: Usar um contorno cinza claro em um fundo branco, tornando o estado de foco ativo invisível para usuários com visão de baixo contraste.
• A Armadilha do "Contorno Cortado": Colocar um anel de foco externo em um elemento aninhado dentro de um contêiner com overflow: hidden. O indicador de foco é cortado nos lados esquerdo e direito, deixando apenas lascas horizontais.
• O "Cobertura do Cabeçalho Fixo": Focar via Tab em um elemento de âncora situado no topo do viewport, mas a barra de navegação fixa se sobrepõe e o obscurece completamente (violação WCAG 2.2 SC 2.4.11).
• Poluição de Foco por Clique: Não usar :focus-visible, levando a anéis azuis pesados piscando em cada clique do mouse, o que frustra as equipes de design e as leva a solicitar a remoção total dos estilos de foco.
• Apagamento em Cores Forçadas: Construir belos anéis de foco puramente com propriedades personalizadas CSS e valores box-shadow sem um fallback de outline transparente, resultando em indicadores de foco completamente invisíveis no Modo de Alto Contraste do Windows.

Critérios de Validação

• Todo elemento interativo mostra um indicador de foco altamente visível e distinto quando navegado via tecla Tab.
• O contraste de cada indicador de foco global e de componente é verificado em >= 3:1 contra seu fundo.
• O estilo de foco personalizado usa o seletor :focus-visible para garantir que ele seja acionado na navegação por teclado, mas permaneça limpo durante cliques do mouse.
• Nenhum indicador de foco é cortado ou fatiado por regras overflow: hidden do contêiner pai (deslocamento ajustado ou deslocado para dentro).
• A navegação por teclado para elementos próximos a cabeçalhos fixos ou elementos flutuantes mantém o elemento focado totalmente visível (usando substituições scroll-margin-top).
• Os indicadores de foco são verificados no Modo de Alto Contraste/Cores Forçadas usando regras de contorno transparente.
• A área de superfície do perímetro de indicadores personalizados atende aos cálculos mínimos do WCAG 2.2 SC 2.4.13.