Produto

Acessibilidade

Princípios para tornar a experiência Agenu mais perceptível, compreensível e operável.

Princípio de produto

Acessibilidade não é
uma camada final.

Uma interface só funciona de verdade quando pode ser percebida, compreendida e operada com clareza.

Perceber, compreender e operar

Acessibilidade faz parte da experiência desde a estrutura, da linguagem e da interação. Ela reforça clareza operacional, hierarquia, continuidade, densidade com propósito e previsibilidade em diferentes condições de uso.

01

Perceber

A informação, o estado e a mudança aparecem por mais de um sinal: contraste, texto, estrutura, cor, ícone ou posição.

02

Compreender

Contexto, linguagem e consequência tornam claro onde a pessoa está, o que aconteceu e o que pode fazer.

03

Operar

A tarefa continua disponível sem depender de mouse, hover, precisão extrema ou movimento rápido.

Não é um framework fechado. É uma forma de perguntar se a experiência continua útil em contextos como zoom elevado, luz forte, uso com uma mão, conexão lenta ou dispositivos diferentes.

Contraste e cor

Contraste sustenta leitura, hierarquia e interação. Texto principal, secundário e muted precisam continuar legíveis no próprio contexto; o mesmo vale para botões, campos, seleção, foco, disabled e erro.

Exemplo de princípioAgendamento confirmado

Quarta-feira, 14:30 · Clínica Centro

Confirmado

Agenu Green reforça prioridade, seleção, foco ou presença de marca — não é sinônimo de sucesso. Use as combinações já aprovadas em Fundamentos → Cor; dark mode não é uma solução universal de acessibilidade.

Tipografia e leitura

Leitura

Texto precisa continuar legível quando amplia.

Montreal mantém a voz da Agenu. Evite texto desnecessariamente pequeno, baixo contraste usado apenas por estética e blocos longos em caixa alta.

Estrutura

Hierarquia visual acompanha a relação entre conteúdos.

Títulos representam seções reais; largura controlada ajuda leitura contínua sem impor limites rígidos a tabelas e superfícies operacionais.

Foco, teclado e alvos interativos

Se algo pode receber foco, o foco precisa ser perceptível. Hover e foco são estados diferentes: ações essenciais permanecem operáveis por teclado e seguem uma ordem lógica de leitura.

Exemplo de princípioFoco perceptível

O contorno acompanha o controle ativo sem depender de hover.

Confirmar agendamento
Operação
  • Prefira elementos nativos quando eles já oferecem o comportamento necessário.
  • Controles têm área de interação confortável e espaço entre ações próximas.
  • Overlays mantêm contexto e devolvem o foco a um ponto lógico ao fechar.

Não remova outline sem uma alternativa clara. Evite controles que dependem de precisão extrema, gesto específico ou mouse para concluir uma tarefa.

Labels, nomes e formulários

Placeholder não substitui label. Cada controle precisa ter um nome que explique sua função, e instruções críticas devem estar disponíveis antes da ação — não escondidas em tooltip.

Exemplo de princípioInforme o serviço antes de confirmar o agendamento.

Escolha um serviço ou procedimento. Este campo precisa ser preenchido para confirmar o agendamento.

Um erro identifica o campo e orienta a correção além da cor. Se uma falha geral impedir o envio, preserve os dados preenchidos e explique a consequência conhecida sem culpar a pessoa ou inventar uma causa.

Estados, conteúdo dinâmico e recuperação

Estados

Seleção, loading, disabled e status precisam ser reconhecíveis.

Um controle indisponível não parece normal e sem resposta. Quando o motivo ajuda a tarefa, ele aparece no próprio contexto.

Conteúdo dinâmico

Mudanças importantes precisam ser percebidas.

Erro, salvamento, resultado carregado ou mudança de status precisam permanecer compreensíveis, inclusive para tecnologias assistivas. Toast não é sinônimo de feedback.

Recuperação

Um erro acessível ajuda a retomar a tarefa.

Explique o que aconteceu, o que foi afetado e qual é o próximo passo. Em ações destrutivas, deixe claras consequência, confirmação e cancelamento.

Movimento, zoom e responsividade

Movimento

Movimento nunca é necessário para compreender a interface. Ele permanece preciso, natural, contido, contínuo e funcional; redução de movimento preserva a tarefa.

Zoom e reflow

Ampliar não deve quebrar a tarefa. Texto, labels, botões e mensagens toleram expansão sem depender de alturas fixas ou áreas cortadas.

Responsividade

Responsivo não é apenas caber. No mobile, toque, zoom, ordem de leitura, priorização e teclado virtual continuam fazendo parte da experiência.

Semântica e conteúdo

Estrutura nativa primeiro

Headings, listas, tabelas e formulários comunicam relações quando usados no contexto certo. ARIA entra quando necessário, não para corrigir uma base semântica ruim.

Imagens e ícones

Imagem informativa precisa de alternativa textual adequada. Elementos decorativos não devem gerar ruído; um ícone sozinho não substitui o nome de uma ação essencial.

Dados e status

Tabelas preservam a relação entre cabeçalhos e células. Status usa texto compreensível; gráficos também precisam de contraste, labels e alternativas claras.

Faça / Evite

FaçaUse texto e cor para comunicar estado.

Mantenha foco visível, labels associados e controles nativos quando fizer sentido.

EviteDepender de hover, placeholder ou mensagem temporária.

Não corte conteúdo com altura fixa nem recrie controles com elementos genéricos.

Antes de publicar

  1. A informação depende apenas de cor para ser percebida?
  2. O foco é visível e as ações essenciais funcionam por teclado?
  3. Os controles possuem nomes claros e labels continuam disponíveis?
  4. A ordem de leitura, o zoom e o reflow preservam a tarefa?
  5. Movimento é dispensável para compreensão?
  6. Erros ajudam a recuperar a tarefa e estados dinâmicos continuam perceptíveis?