Referência de UI | Versão 1.0
Sistema de Design do Educa
Objetivo
A finalidade da ferramenta é servir como referência para decisões estratégicas, desenvolvimento de novas funcionalidades, interfaces e propriedades que impactam a plataforma, além de priorizar a consistência do produto ao longo do tempo.
Estilos
Cores
Neutras
#F3F3F3
#CDCDCD
#9A9A9B
#676767
#343435
#000000
Principais
#F5F6F7
#D6D9DE
#ADB4BE
#848D9C
#5B677B
#31415A
Secundárias
#FCFAF3
#F3EACE
#E8D59C
#DCC069
#D0AB37
#C49602
(Em teste)
#253248
#2a3a54
#4c5c7a
#31415a
#e1a100
#f4b200
#f9c746
#C49602
Tipografia
Usaremos para a plataforma a família “Roboto” para os títulos de <h1> à <h5> e “Nunito” para <h6> e demais conteúdos textuais, como nos exemplos a seguir:
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
Parágrafo
Legenda
Input
Placeholder
Tooltip
Elementos
Botões
Formulários
Exemplo de campos
Acordeões
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti.
Acessibilidade
Melhores práticas
Estrutura e navegação
- Usar títulos hierárquicos (h1, h2, h3…) em ordem lógica.
- Garantir que a ordem de navegação pelo teclado (tab) faça sentido.
- Fornecer atalhos de navegação (ex.: link “Ir para o conteúdo”).
- Evitar menus ou componentes que dependam exclusivamente do mouse.
Conteúdo e texto
- As fontes devem ter o tamanho de, no mínimo, 14px.
- Usar contraste de cores adequado (mínimo 4.5:1 para texto normal, 3:1 para títulos grandes).
- Permitir ajuste de tamanho de fonte sem quebrar o layout.
- Escrever textos claros e objetivos.
- Evitar transmitir informações apenas por cor, forma ou posição.
Imagens e multimídia
- Adicionar texto alternativo (alt) descritivo em imagens.
- Fornecer descrições detalhadas ou versões em tabela para gráficos complexos.
- Adicionar legendas sincronizadas em vídeos.
- Oferecer transcrição de áudio.
- Usar audiodescrição quando necessário.
Formulários e interações
- Associar labels a todos os campos de formulário.
- Fornecer mensagens de erro claras e indicar como corrigir.
- Evitar usar apenas cores para indicar erros (usar ícones ou texto também).
- Garantir que os botões sejam grandes e clicáveis, com espaçamento adequado.
Compatibilidade com tecnologias assistivas
- Implementar o recurso V Libras disponibilizado pelo Governo Digital (o código de implementação está disponível em Scripts).
- Usar HTML semântico em vez de apenas div e span.
- Marcar corretamente links, listas, botões, tabelas.
- Utilizar atributos ARIA apenas quando necessário, para complementar e não substituir HTML semântico.
- Testar a página com leitores de tela (NVDA, JAWS, VoiceOver).
Design responsivo e inclusivo
- Garantir que todo o conteúdo funcione em diferentes tamanhos de tela.
- Verificar se o site continua funcional com zoom de até 200%.
- Evitar interações dependentes de gestos complexos (ex.: arrastar em dispositivos móveis).
Tempo e animações
- Permitir que usuários controlem ou pausem animações e carrosséis.
- Evitar efeitos de piscar (para prevenir crises epilépticas).
- Dar tempo suficiente para preenchimento de formulários.
Teste e validação
- Validar a página com o WAVE ou AXE Accessibility.
- Seguir as diretrizes WCAG 2.1 (nível AA recomendado).
- Realizar testes com usuários reais com diferentes deficiências.
Alertas
Alertas
Scripts
V Libras
Deve-se utilizar o script a seguir para implementar a funcionalidade do V Libras nas páginas do Educa. Esse é um widget de tradução automática para tornar a Web mais acessível para as pessoas surdas.
<body> <!-- Inicio do corpo da página -->
... <!-- Conteúdo da página -->
<div vw class="enabled">
<div vw-access-button class="active">x</div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
<script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
<script>
new window.VLibras.Widget('https://vlibras.gov.br/app');
</script>
</body> <!-- Fim do corpo da página -->
Recursos
Arquivos para baixar
Logotipo
Arquivo .zip com as principais versões do logotipo do Educa a serem utilizadas na nova plataforma.
Arquivo .zip com as versões de apoio do logotipo do Educa a serem utilizadas na nova plataforma.
