Acessibilidade

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.

Resources

LogoHow to Meet WCAG (Quickref Reference)www.w3.org
Logo:focus - CSS | MDNMDN Web Docs

Click/Touch Area

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.

  • Ativam durante o estado de hover de um botão

  • Duram enquanto o estado de hover permanece ativo.

Atualizado