# Acessibilidade

<details>

<summary>✅ Atualizado (03/01/2025)  - Ver detalhes</summary>

## Dezembro

* **25/11/24**

  Criada documentação do estado focused.

</details>

## 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

<figure><img src="/files/bfqODC56wqImJja80QEX" alt=""><figcaption><p>A imagem acima representa um estado genérico de estado focused.<br>O estilo do estado vai depender do sistema/navegador do usuário.</p></figcaption></figure>

Um dos nossos princípios básicos é a utilização dos status **focused** em todos os componentes interativos.

{% hint style="danger" %}
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.
{% endhint %}

> 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

{% embed url="<https://www.w3.org/WAI/WCAG22/quickref/?versions=2.1#focus-visible>" %}

{% embed url="<https://developer.mozilla.org/pt-BR/docs/Web/CSS/:focus>" %}

## Click/Touch Area

<figure><img src="/files/5bYeaIGkSgbJNfJaez7t" alt=""><figcaption><p>A click area está dentro do componente no Figma, porém oculta para não atrapalhar o processo de criação.</p></figcaption></figure>

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.

{% hint style="danger" %}
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.
{% endhint %}

## Tooltips

<figure><img src="/files/eSEhIDA4HI97AP6pBcqB" alt=""><figcaption></figcaption></figure>

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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://compasso.studiosol.com.br/foundations/acessibilidade.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.