Accessibility
Guia de acessibilidade WCAG 2.1 para o design system TLX. Contrast checker, keyboard navigation e ARIA patterns.
O design system TLX segue WCAG 2.1 Level AA. Todos os tokens de cor foram validados para contraste minimo.
Requisitos basicos de acessibilidade.
Nivel alvo do design system TLX. Contraste validado em todos os tokens.
Nivel mais alto. Atingido em combinacoes primary/base.
Verifique o contraste entre duas cores. Insira valores HEX para calcular a ratio WCAG.
Foreground (texto)
Background (fundo)
Presets TLX
TLx Digital
Inteligencia de mercado para marcas ambiciosas.
--color-accent: #F5F5F5
Matriz de contraste pre-calculada para tokens do tema Cosmic (default).
| Texto | Fundo | Ratio | AA | AAA |
|---|---|---|---|---|
--color-primary | --color-base | 18.2:1 | ||
--color-primary | --color-surface | 17.2:1 | ||
--color-accent | --color-base | 6.5:1 | ||
--color-accent | --color-surface | 6.1:1 | ||
--color-secondary | --color-base | 7.8:1 | ||
--color-secondary | --color-surface | 7.4:1 | ||
--color-muted | --color-base | 4.1:1 | ||
--color-muted | --color-elevated | 3.6:1 | ||
--color-success | --color-base | 10.4:1 | ||
--color-error | --color-base | 5.3:1 |
Todos os componentes interativos devem ser acessiveis via teclado.
Atributos ARIA requeridos para cada tipo de componente TLX.
| Componente | Role | ARIA Attrs |
|---|---|---|
| Theme Toggle | radiogroup | aria-label, aria-checked per button |
| FAQ Accordion | region | aria-expanded, aria-controls, aria-labelledby |
| Sidebar Nav | navigation | aria-label, aria-current='true' |
| Mobile Menu | dialog | aria-modal, aria-label, focus trap |
| Code Block | region | aria-label='code example' |
| Color Swatch | img | aria-label='{color name} {hex value}' |
| Download Link | link | download attr, aria-label with file type |
Respeitar prefers-reduced-motion. Todas as animacoes TLX desativam automaticamente.
/* globals.css — ja implementado */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Framer Motion — FadeIn component */
const shouldReduceMotion = useReducedMotion();
// Se true: sem animacao, conteudo visivel imediato