Acessibilidade
Um site que funciona para mais gente.
A meta é a WCAG 2.2 no nível AA. Aqui estão os recursos, os atalhos e o que ainda falta.
Barra de acessibilidade
Na borda direita de todas as páginas, o botão Funções de acessibilidade abre uma coluna de ajustes. As escolhas ficam guardadas só no seu navegador e valem para o site inteiro, inclusive a demo.
- Aumentar e diminuir o texto
- Três tamanhos: 100%, 115% e 130%. Os títulos crescem menos, para nada vazar da tela.
- Alto contraste
- Troca as cores por versões mais escuras. Todo texto passa de 7:1 de contraste, o nível mais alto da WCAG.
- Tons de cinza
- Tira as cores do site, para quem se distrai com elas ou enxerga melhor sem.
- Texto mais forte
- Deixa as letras mais grossas, o que ajuda em telas pequenas e para quem tem baixa visão.
- Espaçar o texto
- Aumenta a altura das linhas e o espaço entre letras e palavras, nos valores do critério 1.4.12 da WCAG.
- Destacar links
- Sublinha todos os links, para não depender da cor para achá-los.
- Pausar animações
- Para ondas, painéis animados e transições em todas as páginas.
A barra é um complemento. O site é construído para funcionar sem ela: com teclado, leitor de tela, zoom de 200% e a opção de reduzir movimento do sistema.
Atalhos de teclado
No padrão do eMAG, o modelo de acessibilidade do governo brasileiro. No Firefox, use Alt + Shift + número.
| Teclas | O que faz |
|---|---|
| Alt + 1 | Ir para o conteúdo principal |
| Alt + 2 | Ir para o menu |
| Alt + 3 | Abrir a busca |
| Alt + 4 | Ir para o rodapé |
| Alt + 5 | Abrir esta página |
| Ctrl + K ou / | Abrir a busca |
| Esc | Fechar busca, menus, janelas e a conversa com a Marina |
Como o site foi testado
- Auditoria automática com axe-core (WCAG 2.2 A e AA) nas páginas principais.
- Testes de teclado e foco em menus, janelas, abas, busca, bot e na demo guiada.
- Nenhuma página com rolagem horizontal de 320 a 1440 pixels de largura.
- Narração em áudio dos artigos e das histórias de sucesso.
Limitações conhecidas
O lilás da marca com texto branco nos botões, e como cor de alguns links, fica abaixo de 4,5:1 de contraste. A correção depende de uma decisão de marca. Até lá, o modo Alto contraste resolve.
Fale com a gente
Encontrou uma barreira? Num serviço real, o contato seria acessibilidade@vela-rh.example (endereço fictício).
Empresa fictícia, projeto de portfólio. Os recursos descritos funcionam neste site.