Acessibilidade

Este portal segue o Modelo de Acessibilidade em Governo Eletrônico — eMAG 3.1 (Portaria 3/2007) e as WCAG 2.1 AA para garantir acesso a todos, inclusive pessoas com deficiência. Abaixo explicamos o que é cada recurso e como usar nesta aplicação — onde está o botão, o que acontece ao clicar e como desfazer.

Como usar nesta aplicação

Guia prático dos botões da govbar (topo azul) e da barra de busca

VLibras — tradução para Libras

Botão na govbar, à direita · ícone azul flutuante no canto

O que é: suíte do Governo Federal que traduz texto para Libras com avatar 3D (vlibras.gov.br). Recurso complementar — não substitui intérprete humano.

Como usar aqui:

  1. Clique em VLibras na govbar para ativar. O botão fica pressionado (aria-pressed="true") e o widget aparece no canto inferior direito.
  2. Clique no ícone azul do VLibras para abrir o player, selecione qualquer texto da página e clique em Traduzir.
  3. Para fechar: X do player ou clique novamente no botão VLibras. A escolha fica salva para a próxima visita.
O que é VLibras? · Guia completo

Limitação: tradução automática pode errar siglas (RREO, PNTP) ou PDFs em imagem. Se o ícone não aparecer, verifique bloqueador de scripts ou recarregue com Ctrl+F5.

Alto contraste

Botão na govbar (Alt+4) e na barra de busca · 2º botão à direita

O que é: folha alternativa eMAG §4.2: fundo #000, texto #fff (21:1) e links #ff0 sublinhados — para baixa visão e ambientes muito claros.

Como usar aqui:

  • Clique em Contraste na govbar ou na busca. Ou pressione Alt+4 (Firefox: Alt+Shift+4).
  • Todo o portal vira preto/branco/amarelo imediatamente (html.contrast + Alpine.store('prefs').contrast).
  • Clique novamente para voltar ao tema claro. A preferência é salva em localStorage.
Atalho: Alt+4

Detalhe: imagens ficam em grayscale (exceto logo). Bordas e botões também viram branco/amarelo sobre preto.

Tamanho da fonte (A- / A+)

Barra de busca, abaixo do header · botões A- e A+ (desktop e mobile)

O que é: controle de zoom textual 80%–150% (WCAG 1.4.4 Redimensionar texto) sem quebrar layout.

Como usar aqui:

  • Clique em A+ para aumentar (+10% por clique, até 150%) ou A- para diminuir (até 80%).
  • Funciona em qualquer página; o valor é salvo (fontScale) e reaplicado como html{font-size: X%}.
  • Também pode usar Ctrl+ + / Ctrl+ - do navegador — o portal respeita os dois.

Navegação por teclado

Skip links no topo · accesskeys · drawer mobile com Esc

O que é: acesso total sem mouse, exigido pelo eMAG para usuários com limitação motora ou leitores de tela.

  • Skip links: ao pressionar Tab na primeira linha, surgem “Ir para o conteúdo [1] / menu [2] / busca [3]” — Enter leva ao alvo.
  • Accesskeys: Alt+1 conteúdo (#conteudo), Alt+2 menu (#menu-principal), Alt+3 busca (#busca), Alt+4 contraste.
  • Drawer mobile: botão ☰ abre menu lateral; Esc fecha (x-trap + inert). Foco fica preso dentro do menu enquanto aberto.
  • Foco visível: todo link/botão mostra anel amarelo focus-visible:ring-2 ao navegar com Tab.

Todos os recursos funcionam sem recarregar a página e persistem via localStorage (Alpine persist). Para redefinir, limpe os dados do site ou use os botões “Redefinir/Alternar” desta página.

Recursos disponíveis (resumo eMAG)

  • Skip links + Accesskeys: Alt+1 conteúdo, Alt+2 menu, Alt+3 busca, Alt+4 alto contraste (eMAG §4.1). Primeiro link da página é “Ir para o conteúdo [1]”.
  • Alto contraste 7:1: fundo #000, texto #fff, links #ff0 sublinhados (eMAG §4.2). Botão “Contraste” na govbar e na busca. Persistido via localStorage — ver também VLibras.
  • Fonte escalável 80–150%: botões A-/A+ na busca, persistidos, com clamp WCAG 1.4.4 — use A+ 3× para teste 130%.
  • VLibras: botão na govbar ativa o widget vlibras.gov.br/app/vlibras-plugin.js (tradução para Libras). Guia completo em /vlibras/.
  • Navegação por teclado: todos interativos com focus-visible:ring-2, drawer com x-trap e Esc para fechar, tabindex="-1" no conteúdo para skip.
  • Leitores de tela: landmarks (banner, navigation, contentinfo), aria-current, aria-label em breadcrumb/busca, ícones decorativos aria-hidden, aria-live="polite" para contraste/VLibras.
  • Mapa do site: /mapa-do-site/ — lista hierárquica das categorias (eMAG §4.4).

Alto contraste — especificação técnica

Folha de alto contraste obedece eMAG §4.2 e é aplicada em 18 componentes do tema:

  • Fundo preto #000000, texto branco #FFFFFF (contraste 21:1)
  • Links amarelo #FFF333 (ou #FF0) sempre sublinhados
  • Ícones em branco, bordas brancas, imagens em grayscale exceto logo (on-contrast-force-white)
  • Ativado por document.documentElement.classList.toggle('contrast') + Alpine.store('prefs').contrast

Pressione Alt+4 para testar via teclado.

Atalhos de teclado (eMAG)

AtalhoDestinoComo usar aqui
Alt+1Conteúdo (#conteudo)Foca o container principal; Firefox: Alt+Shift+1
Alt+2Menu (#menu-principal / #sidebar)No mobile abre o foco no drawer; feche com Esc
Alt+3Busca (#busca)Foca o campo “Pesquisar”
Alt+4Alto contrasteMesmo que clicar em “Contraste” na govbar

Não há repetição de accesskey na mesma página (eMAG Content). No macOS use Ctrl+Option+N.

Testes realizados

  • ✓ Validador automático ASES — alvo 0 erros em /, /category/receita/
  • ✓ axe DevTools — alvo 0 violações WCAG 2.1 AA
  • ✓ Navegação só teclado — 3 ciclos completos (skip→menu→busca→cards→footer)
  • ✓ Leitor NVDA / VoiceOver — landmarks + aria-labels, aria-live para contraste/VLibras
  • ✓ Zoom 200% e 400% — sem scroll 2D (WCAG 1.4.10 Reflow), govbar 12px (WCAG 1.4.12)
  • ✓ VLibras — botão toggleVlibras() + widget vlibras.gov.br/app — guia de uso do VLibras
  • ✓ Validação Turmalina turmalina.tcepb.tc.br — JSON-LD GovernmentOrganization

Padrões e legislação

Este portal atende: CF art.37, LRF LC 101/2000, LC 131/2009, LAI 12.527/2011 art.8º VIII + Dec. 7.724, RN-TC 04/2022, PNTP/ATRICON, eMAG 3.1 (Portaria 3/2007) e WCAG 2.1 AA.

Se encontrar barreira de acessibilidade, entre em contato via e-SIC ou Ouvidoria. Para dúvidas específicas sobre Libras, veja /vlibras/.

Última atualização: 05/09/2026 · VLibras · Mapa do site · Voltar ao início