Acessibilidade

Todas as páginas deste design system atendem WCAG 2.1 Nível AAA. Esta página demonstra os quatro pilares de a11y ao vivo: navegação por teclado, contraste, modo high-contrast e estrutura para leitor de tela.

WCAG 2.1 AAA aplicado em todas as páginas geradas.

Navegação por teclado

Navegue por Tab em cada elemento focalizável abaixo. Cada um deve exibir um anel de foco visível que atende AAA (mínimo 3:1 contra cores adjacentes). Nenhum elemento pode ser inacessível pelo teclado.

botão
input
link Link inline
checkbox
select

Todos os elementos interativos recebem um outline de 2px offset na cor de acento ao receber foco. Sem JS — CSS :focus-visible puro.

Amostras de contraste

Cada par de tokens abaixo é verificado AAA (7:1 para texto normal). As amostras renderizam ao vivo usando as custom properties CSS ativas — troque o tema para verificar os modos escuro e claro.

Body text Texto no fundo da página --kdr-text --kdr-bg
Accent btn Label em botão acento --kdr-accent-on --kdr-accent
Muted Texto muted no fundo --kdr-text-muted --kdr-bg
Surface Texto em card surface --kdr-text --kdr-surface
Surface 2 Texto em surface-2 --kdr-text --kdr-surface-2

Renderizado com as vars CSS ativas da página. Ratios são verificados em build time pelo gate pa11y (tools/a11y-test/).

Preset high-contrast

O preset de UI style `high_contrast` inverte todas as superfícies para um par quase-preto/quase-branco e aumenta as espessuras de borda. Útil para usuários com baixa visão ou visualização externa com muita luz.

Amostra de texto no modo high-contrast. Bordas são nítidas; sem gradientes.

Link inline

O preset high_contrast faz parte da biblioteca canônica de 19 presets em specs/themes/ui-style.kmd.

Estrutura para leitor de tela

Toda página gerada inclui skip-link, regiões landmark (header, main, nav, footer) e uma hierarquia de títulos que um leitor de tela pode percorrer como outline do documento.

Este outline é gerado a partir da estrutura real de headings desta página — não é hard-coded. Leitores de tela produzem a mesma lista em qualquer página gerada.

Considerações sobre daltonismo

O design system evita codificação de informação exclusivamente por cor. Todo status é reforçado com forma, texto ou ícone.