Por que um site precisa ser utilizável por todas as pessoas e quais recursos o ReTech adota para isso.
Inclusão digital
Acessibilidade digital é a possibilidade de pessoas com deficiência visual, auditiva, motora, cognitiva ou de fala perceberem, entenderem, navegarem e interagirem com um site. Quando o conteúdo depende só do mouse, só da cor ou só do som, parte do público fica de fora.
As mesmas práticas ajudam outras pessoas: quem usa o celular sob o sol, quem navega com uma mão só, quem tem uma conexão lenta, pessoas idosas ou quem está aprendendo a língua. Em um projeto que busca conscientizar a população em geral, isso faz parte do objetivo.
Sem promessa de conformidade total. O ReTech aplica boas práticas dessas referências, mas não declara conformidade completa com nenhum padrão, porque isso exigiria uma avaliação completa, incluindo testes com pessoas e tecnologias assistivas.
No próprio site
Todos os links, botões, campos e controles de mídia podem ser acessados com a tecla Tab. Com foco em um link do menu principal, as setas direcionais movem o foco entre os itens; Enter abre o link. No início de cada página há o link “Pular para o conteúdo”. Em telas pequenas, o menu abre e fecha pelo botão e a tecla Esc o fecha.
O elemento em foco recebe um contorno espesso, em cor que se destaca do fundo: azul em áreas claras, branco sobre o verde e âmbar no rodapé escuro.
As combinações de cores de texto e fundo foram calculadas pela fórmula de contraste das WCAG, com a meta de pelo menos 4,5:1 para textos. Os valores medidos estão na documentação do projeto.
Imagens informativas, como as da galeria, descrevem o conteúdo no atributo alt. Imagens que só repetem o texto ao lado, como as dos cartões de projetos, usam alt="" para não gerar ruído.
Cada campo do formulário de contato tem rótulo associado e tipo adequado. O JavaScript valida os campos, impede o envio padrão, mostra mensagens específicas e destaca os campos com erro. Um rascunho é salvo no LocalStorage do navegador; os dados não são enviados a um servidor ou e-mail.
Todas as páginas usam header, nav, main e footer, um único título h1, subtítulos em ordem e lang="pt-BR". A página atual é marcada no menu com aria-current="page".
O vídeo e o áudio têm controles, alternativa em texto e não tocam automaticamente. O vídeo ainda não tem legendas (CC); o texto exibido nos slides está disponível na página. O mapa incorporado tem um título descritivo.
As tabelas têm legenda, células de cabeçalho com escopo definido e, em telas estreitas, rolagem horizontal dentro da própria tabela, que também pode ser acessada pelo teclado.
O layout é fluido e usa unidades relativas, o que permite ampliar o texto sem quebrar a página. Respeitamos a preferência do sistema por menos movimento: animações e transições são reduzidas.
ARIA é usado apenas onde o HTML nativo não basta: aria-current no menu, aria-expanded e aria-controls no botão do menu móvel, e rótulos nas regiões de tabela que rolam.
Como usar
| Tecla | O que faz |
|---|---|
| Tab | Vai para o próximo link, botão ou campo. |
| Setas ← → ↑ ↓ | Com foco em um link do menu principal, move o foco entre os itens do menu na direção escolhida. |
| Shift + Tab | Volta ao item anterior. |
| Enter | Abre o link selecionado ou aciona um botão. |
| Espaço | Aciona botões e inicia ou pausa o vídeo e o áudio, quando o controle está em foco. |
| Esc | Fecha o menu em telas pequenas. |
| Ctrl + mais (ou Cmd + mais) | Amplia a página no navegador. |
Para ser honesto sobre o estado do projeto: a equipe fez verificações automáticas de estrutura e de cores, mas alguns testes dependem de pessoas e de equipamentos.
O que foi realmente verificado, e o que está pendente, fica registrado em docs/acessibilidade.md e docs/testes.md.
Encontrou uma barreira neste site? Conte pela página de contato.
