global header
Topo padrão de produtos Casa Hacker: barra de acessibilidade (32px) + header dos (48px com brand + nav). WCAG-compliant por padrão.
layout
Stack vertical fixo no topo. A barra de acessibilidade fica acima (z-index ultra-alto), o header de produto logo abaixo. Total de 80px de altura reservados.
barra de acessibilidade — obrigatória
Componente desenvolvido pela própria Casa Hacker: github.com/casahacker/barra-acessibilidade ↗. Não é opcional — todo produto Casa Hacker deve incluir. Já vem ligada por padrão no shell.js deste design system.
12 features WCAG-aligned
| feature | função | WCAG |
|---|---|---|
| tema claro/escuro | preferência visual | — |
| alto contraste | aumenta diferença texto/fundo | 1.4.6 |
| fonte 14/16/18px | 3 tamanhos de texto | 1.4.4 |
| fonte para dislexia | Atkinson Hyperlegible | — |
| régua de leitura | barra horizontal que segue o cursor | 1.4.8 |
| modo foco | escurece elementos secundários | 1.4.8 |
| cursor ampliado | SVG customizado maior | — |
| vlibras | tradução em Língua Brasileira de Sinais | 1.2.6 |
| sem animação | pausa transitions e animations | 2.3.3 |
| foco realçado | contorno persistente em elementos focados | 2.4.7 |
| alvos ampliados | botões mínimo 44×44px | 2.5.8 |
| links sublinhados | todos os links com underline | 1.4.1 |
override visual Casa Hacker
A barra upstream usa azul IBM (#0F62FE) por padrão. Neste design system fazemos override
pros tokens da marca: fundo --ch-dos, ativo
--ch-code (verde brand). O override está em
styles.css, seção "ACCESSIBILITY BAR".
use
não use
header dos
Fundo --ch-dos, texto --ch-css.
Brand à esquerda (H pixelado + nome do produto). Ações secundárias à direita
(conta, ajuda, links externos).
- Altura fixa 48px
- Sticky no topo da janela (mas abaixo da barra de acessibilidade — top: 32px)
- Logo brand à esquerda: H + " / " + nome do produto
- Ações à direita em
.t-label-01(mono uppercase) - Borda inferior sutil (rgba(255,255,255,0.06))
- Em mobile: hambúrguer à esquerda + brand + 1 ação principal
anatomia completa
- Barra de acessibilidade · 32px · fundo --ch-dos · z-index 2147483600 · OBRIGATÓRIA
- Header dos · 48px · brand à esquerda · ações à direita · sticky logo abaixo da barra
- Conteúdo do produto · começa em 80px de offset do topo
variantes do header dos
Default
Brand + ações simples à direita. Padrão de sites institucionais e ferramentas pequenas.
Com nav horizontal
Para produtos com seções top-level. Nav entre brand e ações.
Mobile
Hambúrguer + brand + 1 ação. Sidebar vira drawer.
A barra de acessibilidade não tem variante: é sempre a mesma, em todos os produtos, sem customização visual além do override de cor pros tokens da marca.
integração
no design system (já incluso)
Este DS já carrega a barra automaticamente via shell.js.
Qualquer página que inclua <script src="shell.js">
ganha a barra sem código adicional.
em produto novo
em react / vue / next
Use o pacote npm ou wrappers de framework. Veja o README do repo upstream ↗.
em wordpress
Plugin oficial em plugin-wp/casa-hacker-a11y/ do repo. Faz upload do ZIP via painel de plugins → ativa → configura.
acessibilidade
- A própria barra é WCAG 2.1 AA · 1.2.6 · 1.4.4 · 1.4.6 · 1.4.8 · 2.3.3 · 2.4.7 · 2.5.8
- Preferências do usuário são persistidas em localStorage (key prefixed
ch-a11y-) - Funciona via teclado integralmente (Tab + Enter)
- Compatível com leitores de tela (NVDA, VoiceOver, JAWS)
- VLibras é integração oficial do governo brasileiro
- z-index isolado pra não conflitar com modais e overlays do produto