Acessibilidade não é feature opcional — é fundamento. Conheça todas as práticas implementadas no Dev Showcase.
Recursos de acessibilidade presentes em todo o projeto.
Link invisível no topo da página que permite pular a navegação e ir direto ao conteúdo principal. Aparece ao pressionar Tab.
Uso correto de header, main, nav, section, article e footer. Hierarquia de headings h1→h2→h3 em todas as páginas.
role='navigation', role='status', aria-label, aria-live='polite' em elementos dinâmicos. Screen readers recebem contexto adequado.
Todos os elementos interativos são acessíveis via Tab, Enter e Escape. Foco visível com outline consistente.
Focus traps em modais e menus mobile. Foco retorna ao elemento de origem ao fechar diálogos.
Cores primárias e de texto seguem as diretrizes WCAG AA. Dark mode mantém contraste adequado.
Fontes escaláveis com rem/em. Suporte a zoom de até 200% sem quebra de layout.
Animações Framer Motion respeitam prefers-reduced-motion. Usuários sensíveis veem transições simplificadas.
Antes de submeter um PR, verifique estes itens de acessibilidade.
Ferramentas recomendadas para validar acessibilidade no projeto.
Auditoria integrada no Chrome DevTools. Rode no modo 'Accessibility' para score e sugestões.
Extensão do navegador que detecta violações WCAG automaticamente. Identifica contraste, ARIA e semântica.
Teste com NVDA (Windows), VoiceOver (Mac) ou Orca (Linux). Navegue pela página só com teclado e áudio.
Navegue pelo site usando apenas Tab e Shift+Tab. Verifique se a ordem é lógica e se todos os elementos são alcançáveis.
Use WebAIM Contrast Checker ou as ferramentas do DevTools para verificar ratios de contraste.
Referências e diretrizes que guiam nossas decisões de acessibilidade.
Web Content Accessibility Guidelines — padrão internacional de acessibilidade. Seguimos o nível AA.
Especificação de roles, states e properties para enriquecer a semântica de componentes interativos.
Recurso comunitário com checklists, artigos e boas práticas acessíveis.