Acessibilidade

O GCM tem preferências de acessibilidade em duas camadas: cada usuário pode ajustar o app às próprias necessidades (tamanho de fonte, contraste, movimento, fonte dyslexic, etc.), e administradores podem definir padrões da organização que valem para quem ainda não personalizou. A mesma página cuida das duas — a seção do usuário no topo, a seção de admin no rodapé.

O módulo de acessibilidade é um módulo de recurso, então precisa estar ativado em Módulos para a página aparecer na barra lateral.

Abrir a página de acessibilidade

Clique em Acessibilidade na barra lateral (ou abra por Configurações → Acessibilidade — a página é renderizada igual nos dois caminhos). O formulário se divide em quatro seções voltadas ao usuário mais uma seção de admin no rodapé.

Cartão de prévia ao vivo

O cartão no topo da página renderiza texto, botões e links de exemplo usando suas preferências pendentes atuais. À medida que você marca os toggles abaixo, a prévia atualiza em tempo real para você ver o efeito antes de salvar. O próprio app também atualiza imediatamente — as mudanças pendentes valem para o DOM enquanto você faz.

TIP

Se uma preferência deixar o app ilegível, clique em Descartar no cabeçalho da página (que aparece assim que você tem alterações não salvas) para reverter. A preferência fica em buffer no estado pendente até você clicar em Salvar — então pode experimentar sem medo.

Tamanho visual

Escala da UI

Um seletor de quatro opções (Padrão, Grande, Maior, Máximo) que escala tudo na interface. Por padrão, segue o zoom do navegador; aumente se 100% parecer pequeno.

A escala afeta tamanhos de fonte, padding, altura de botões e tamanho de ícones proporcionalmente — o layout não quebra, só cresce.

Conforto de leitura

Altura de linha

Três opções — Normal, Relaxada, Folgada. Aumenta o espaço vertical entre linhas de texto. Útil para usuários com dislexia ou fadiga.

Espaçamento entre letras

Ative para adicionar ~0.05em entre as letras. Alguns usuários com dislexia acham mais fácil de varrer.

Texto em negrito

Ative para deixar todo o corpo de texto em semi-negrito. Ajuda usuários com baixa visão. Evite combinar com alto contraste se ficar sobrecarregado.

Fonte dyslexic

Troca a fonte do corpo para OpenDyslexic — uma tipografia desenhada para leitores com dislexia, com bases mais pesadas e formas de letra menos ambíguas.

Cor e contraste

Alto contraste

Alterna para um esquema de cores de alto contraste — fundos pretos, texto branco, destaques mais brilhantes. Útil sob luz forte ou para usuários com baixa visão.

Modo daltônico

Um dropdown com opções para protanopia (cego para vermelho), deuteranopia (cego para verde) e tritanopia (cego para azul). Cada opção aplica um filtro CSS ao app inteiro que desloca matizes para uma faixa que o modo daltônico escolhido distingue. Escolha Nenhum para desativar.

Movimento e navegação

Movimento reduzido

Desativa animações e transições por todo o app — transições de página, aberturas de dropdowns, deslizamentos de toast. Espelha a media query prefers-reduced-motion do navegador mas sobrescreve explicitamente. Útil para usuários com transtornos vestibulares.

Destacar links

Sublinha cada link no app e usa uma cor mais brilhante. Ajuda usuários que usam varredura periférica para navegar.

Foco realçado

Substitui o anel de foco padrão por um anel mais grosso e com mais contraste. Visível em cada elemento interativo. Essencial para usuários de teclado.

Cursor grande

Aumenta o cursor do sistema ao passar por dentro do app. Funciona em navegadores baseados em Chromium e Safari. Firefox não oferece dimensionamento personalizado de cursor, então o toggle não tem efeito lá — o texto de descrição avisa.

Salvar preferências de usuário

Clique em Salvar alterações na barra de cabeçalho (ou no fim do formulário). O estado pendente é commitado em user_accessibility_preferences e na próxima vez que você entrar, as mesmas preferências se aplicam.

Se mudar de ideia, clique em Descartar para voltar ao que foi salvo por último no servidor. O DOM volta a esse estado.

Você também pode clicar em Restaurar para padrões da organização no rodapé para apagar suas preferências de usuário por completo — o próximo carregamento usa o que o admin definiu como padrão. Útil se você esteve experimentando e quer começar do zero.

Padrões da organização (apenas admins)

A seção de admin aparece após um separador. São os padrões que valem para qualquer usuário que ainda não definiu as próprias preferências. Surtem efeito para novos usuários no primeiro login, e para usuários existentes que restauraram para os padrões.

O painel de padrões da organização é menor que o do usuário — só os padrões mais pedidos ficam expostos:

• Escala da UI
• Alto contraste
• Movimento reduzido
• Texto em negrito

Os padrões são salvos enquanto você alterna (sem botão de salvar separado — updateOrgDefault grava imediatamente em org_accessibility_defaults). As preferências do próprio usuário sempre sobrescrevem o padrão da organização quando definidas.

WARNING

Mudar um padrão da organização não sobrescreve usuários que já personalizaram — eles mantêm as próprias preferências. O padrão só afeta usuários que ainda não escolheram nada, ou que clicaram em Restaurar para padrões da organização.

Como as preferências são aplicadas

O hook useAccessibilityPrefs lê três fontes e resolve por prioridade:

1. Preferências salvas do usuário (user_accessibility_preferences)
2. Padrões da organização (org_accessibility_defaults)
3. Padrões do sistema (valores sensatos no código)

A preferência resolvida é aplicada ao DOM ao adicionar classes ao elemento <html> (a11y-scale-large, a11y-high-contrast, etc.) e definir propriedades CSS customizadas. As classes utilitárias do Tailwind então reagem a isso — data-[a11y=high-contrast]:bg-black e por aí vai.

Isso significa que as preferências carregam antes do primeiro render — não há flash de conteúdo sem estilo nem em um login novo.

O que é salvo onde

• user_accessibility_preferences — uma linha por usuário. Colunas para cada preferência (ui_scale, line_height, letter_spacing, etc.). O RLS é escopado em auth.uid().
• org_accessibility_defaults — uma linha por organização. Colunas para o subconjunto de preferências que tem padrão a nível de organização. O RLS é escopado por current_org_id().

Armadilhas comuns

"Liguei o alto contraste e agora não vejo os seletores de cor em Identidade visual." Sim, é o trade-off — o alto contraste sobrescreve cores personalizadas. Defina sua identidade visual primeiro, depois ligue o alto contraste.

"Troquei a fonte dyslexic mas meus PDFs de recibo ainda usam a padrão." PDFs são renderizados no servidor e não pegam as preferências de acessibilidade do usuário. Só a renderização no app é afetada.

"Movimento reduzido não desativa a animação do toast." Uma pequena lista de micro-animações essenciais (o spinner de carregamento, a entrada da barra de alterações não salvas) ignora movimento reduzido porque tirá-las remove feedback útil. O resto respeita o toggle.

"O padrão da organização para alto contraste não pegou em um colega." Ele já definiu a própria preferência (mesmo implicitamente — o primeiro login congela os padrões da organização naquele momento). Ele pode clicar em Restaurar para padrões da organização para puxar o novo padrão.

Próximos passos

• Identidade visual — escolha cores amigáveis ao alto contraste.
• Módulos — acessibilidade é um módulo de recurso; ative aqui primeiro.