Acessibilidade garante que pessoas com diferentes habilidades possam usar, entender e navegar pela interface de forma inclusiva.
✅ Atualizado (03/01/2025) - Ver detalhes
Dezembro
25/11/24
Criada documentação do estado focused.
Navegação alternativa
A navegação de forma geral necessita ter fluxos de tarefas claros, com etapas mínimas, controles fáceis de localizar e rotulagem intuitiva.
↳ Focused State
A imagem acima representa um estado genérico de estado focused.
O estilo do estado vai depender do sistema/navegador do usuário.
Um dos nossos princípios básicos é a utilização dos status focused em todos os componentes interativos.
Nos nossos componentes não existe um estilo de focus para cada tipo. Optamos por utilizar sempre o focused do sistema e/ou navegador utilizado, afim de manter a consistência e requisitar o mínimo de cognição do usuário para garantir que ele tenha uma experiência padrão entre sistemas.
O estilo de foco (focus) é ativado de forma nativa na web por meio do pseudoelemento :focus do CSS. Quando um usuário interage com um componente usando o teclado (como a tecla Tab) ou outros dispositivos de navegação, o navegador aplica automaticamente um estilo padrão para destacar o elemento que recebeu o foco.
A click area está dentro do componente no Figma, porém oculta para não atrapalhar o processo de criação.
Os touch/click/target areas são as áreas da tela que respondem à interação do usuário, indo além dos limites visuais de um elemento. Por exemplo, um ícone pode ter 24 x 24px, mas a área de toque total, incluindo o preenchimento ao redor, pode atingir 48 x 48px.
No Compasso decidimos utilizar a àrea mínima de toque de 48 x 48px para garantir a usabilidade. Caso o elemento ultrapasse esse valor, então permanece a área de toque respectiva do elemento.
Tooltips
Uma tooltip oferece contexto adicional para um elemento da interface do usuário. São ideais para rotular elementos sem texto, como botões com ícones ou campos. Essas dicas devem permanecer temporariamente na tela, mesmo depois que o cursor se afasta do elemento.
↳ Comportamento
Quando o elemento já possuir uma label, o tooltip terá o papel complementar para descrever melhor a ação.
Necessário em todos os botões que não possuirem label.
