coastdigitalgroup/coastai-skills

Sistema de Rodapé de Site

Propósito

O Sistema de Rodapé de Site fornece uma metodologia para projetar a âncora de nível inferior de um site. Ele serve como uma rede de segurança para usuários que não encontraram o que precisam, um diretório para links críticos de SEO e um contêiner para informações legais, de marca e sociais obrigatórias. Um rodapé bem projetado proporciona encerramento à experiência da página sem criar sobrecarga cognitiva.

Casos de Uso

• Projetar o rodapé global para sites de múltiplas páginas.
• Organizar sitemaps complexos em clusters de navegação gerenciáveis.
• Padronizar a colocação de links utilitários (Termos, Privacidade, Copyright).
• Integrar chamadas para ação globais (Newsletters, Contato) ao final da página.
• Estabelecer uma estratégia responsiva para listas de links com várias colunas.

Quando NÃO Usar

• Mini-sites de Página Única: Onde uma simples linha de "Copyright" é suficiente.
• PWAs com Abas Inferiores: Onde a navegação persistente semelhante a aplicativos substitui a necessidade de um rodapé tradicional.
• Páginas de Destino Focadas em Conversão: Onde um rodapé pode fornecer "vazamentos" ou distrações que afastam o usuário do CTA principal (embora um rodapé mínimo com links legais geralmente ainda seja necessário).

Entradas

1. Arquitetura da Informação (IA): Todos os links não incluídos no cabeçalho principal.
2. Requisitos Legais e de Conformidade: Política de Privacidade, Termos de Serviço, etc.
3. Identidade da Marca: Logotipo, perfis de mídia social e declaração de missão da empresa.
4. Ações Globais: Metas de conversão secundárias, como inscrição em Newsletter.
5. Breakpoints de Dispositivos: Definições do sistema de grid para empilhamento responsivo de colunas.

Saídas

1. Mapa de Anatomia do Rodapé: Definição visual ou estrutural das zonas (Identidade, Links, Utilitários, CTA).
2. Hierarquia de Links: Clusters categorizados de navegação secundária.
3. Blueprint Responsivo: Regras sobre como as colunas empilham ou recolhem no celular.
4. Marcos de Acessibilidade: Tags semânticas (<footer>, <nav>) e rótulos.

Fluxo de Trabalho

1. Categorizar o Conteúdo do Rodapé

Divida seu conteúdo em zonas lógicas:

• Zona de Identidade: Logotipo, descrição e ícones sociais.
• Zona de Navegação: Clusters de links agrupados por tema (Produtos, Empresa, Recursos).
• Zona de Ação: Inscrição em Newsletter ou informações de contato principais.
• Zona de Utilitários: Copyright, links legais e seletor de idioma.

2. Selecionar um Padrão Estrutural

Escolha um padrão com base na complexidade do site:

• Rodapé Enxuto: Uma única linha para sites mínimos.
• Rodapé Gordo (Sitemap): Layout de múltiplas colunas para sites empresariais/e-commerce.
• Rodapé Orientado a Ação: Foca em um grande CTA antes das listas de links.

3. Estabelecer Hierarquia Visual

Aplique sistema-de-hierarquia-visual ao rodapé:

• Use cabeçalhos em negrito para clusters de links.
• Garanta que o tamanho do texto seja legível, mas ligeiramente menor que o texto do corpo (ex.: 14px).
• Crie alto contraste entre o fundo do rodapé e as cores dos links.

4. Definir Adaptação para Celular

Mapeie a transição do Desktop para o Celular:

• Empilhamento: Layouts com várias colunas devem empilhar em uma única coluna.
• Padrão Acordeão: Para rodapés muito "gordos", considere recolher grupos de links em acordeões no celular para reduzir o comprimento da página.
• Alvos de Toque: Garanta que todos os links sejam fáceis de tocar. Atenda à WCAG 2.2 SC 2.5.8 (Tamanho Mínimo do Alvo) — alvos interativos de pelo menos 24x24px, com espaçamento adequado entre links adjacentes; prefira 44px+ para alvos de toque primários.

5. Adicionar Camadas Semânticas e de Acessibilidade

• Envolva a seção em uma tag <footer>.
• Use elementos <nav> para clusters de links com aria-labels únicos (ex.: "Recursos do Rodapé").
• Garanta que a taxa de contraste atenda ao WCAG AA (4,5:1).

Regras de Decisão

• A Regra do Sitemap: Se o site tiver mais de 15 páginas, use um "Rodapé Gordo" de múltiplas colunas para auxiliar na descoberta.
• Links Externos: Mídias sociais e recursos externos devem abrir em novas abas (target="_blank") para manter os usuários em seu site.
• Colocação do Copyright: Sempre coloque o copyright e os links legais na parte inferior absoluta (o "Sub-rodapé").
• Prioridade do CTA: Se o rodapé incluir uma inscrição em newsletter, ela deve ser o elemento mais visualmente distinto no rodapé.

Restrições

• Acessibilidade: Deve ser acessível via ordem de Tab do teclado. Todos os links devem ter estados de foco visíveis que nunca sejam obscurecidos por cabeçalhos fixos ou banners de cookies (WCAG 2.2 SC 2.4.11 Foco Não Obscurecido).
• Responsividade: As colunas não devem transbordar ou se tornar muito estreitas (largura mínima).
• Legalidade: Deve incluir links obrigatórios exigidos por regulamentações locais (GDPR, CCPA, etc.).

Padrões Comuns de Falha

• Sobrecarga de Links: Incluir todas as páginas do site, criando uma parede de texto que os usuários ignoram.
• Contraste Ruim: Usar texto cinza claro em fundos escuros que falha nos padrões de acessibilidade.
• O "Beco Sem Saída": Um rodapé muito pequeno ou ausente, deixando usuários que rolam até o fundo sem ter para onde ir.
• Agrupamento Não Padrão: Misturar links não relacionados (ex.: "Carreiras" em "Produtos").

Critérios de Validação

• O rodapé usa tags semânticas <footer> e <nav>.
• Os clusters de links têm cabeçalhos claros e descritivos.
• A visualização em celular empilha as colunas corretamente e mantém alvos de toque.
• A taxa de contraste para todo o texto do rodapé atende ao WCAG AA (4,5:1).
• Links legais e copyright estão presentes e colocados corretamente.
• Links sociais usam ícones reconhecíveis com rótulos de texto acessíveis.