Guia de Acessibilidade

1. Formulários

• Formularios identificados: todo campo deve ter sua finalidade explicada
• Explicar erros: em caso de dados informados de forma incorreta, o erro deve ser explicado, alem de apontar o campo do qual o erro originou
• Evitar retrabalho: em caso de dados informados de forma incorreta, ao recarregar a página, os dados informados devem permanecer nos campos preenchidos

Conceito 📖

Forulários devem ser de facil preenchimento e, no caso de erros, devem evitar retrabalho ao maximo e explicar a todo momento para o usuário o que aconteceu. [1]

---

2. Modais

• Tamanho de diálogos modais: janelas de pop up de diálogos modais devem ter tamanho apropiado independente do tamanho da tela
• Em telas menores: devem cobrir toda a tela de modo a impedir interações acidentais com o resto da página

Conceito 📖

As caixas de diálogos modais devem puxar o foco do usuario para si enquanto estiverem sendo usadas, devendo ser bloqueada a interação com o resto do site para evitar erros por parte do usuário. [2]

---

4. Wireframes

• Facilidade de navegação: usuários devem navegar com facilidadde e facilmente saber onde estão a qualquer momento
• Estrutura de páginas: estrutura deve ser facilmente entendível para os usuários
• Conteudos de importancia claros: os conteudos mais relevantes devem ser facilmente reconhecíveis, especialmente elementos interativos
• Mensagens de erro: em casos de erro do sistema, deve ser especificado o que aconteceu para o usuário

Conceito 📖

O usuário deve ser capaz de se localizar dentro da página a qualquer momento e deve ser capaz de entender a ordem dos elementos e como facilmente chegar a onde ele quer acessar. [3]

---

4. Links e botões

• Links devem ser sinalizados: deve ser obvio links clicáveis
• Botões devem ter aparencia de clicaveis: botões devem ser obvios, alem de seguirem um padrão para evitar confusão
• tamanho de botões: botões devem ter tamanho apropiado para serem clicados e ao mesmo tempo não cobrirem outros conteudos

Conceito 📖

Elementos interativos como links e botões devem ser destacados de forma sua funcionalidade estar aparente, alem de deverem ser padronizados para que o usuário sempre saiba o que esperar quando for interagir com algo. [4]

---

5. Pausar, parar ou ocultar conteúdo

• Autoplay de mídia: evitar usar mídia que comece automaticamente
• Pausar mídia: toda midia deve ser pausavel se possivel
• Mutar mídia: toda midia deve ser possivel de desligar o som
• Evitar uso de mídia que segue o usuário: evitar usar ou permitir que seja fechado

Conceito 📖

Midias devem ser possiveis de desligar para evitar cansaço e sobreccarregamento sensorial, expecialmente para pessoas com problemas sensoriais e neurologicos, que são mais vulneraveis a isso. [5]

---

Referências

1. w3c. Disponível em: https://www.w3.org/WAI/tutorials/forms/. Acesso em: 25 Jan. 2025.

2. w3c. Disponível em: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/. Acesso em: 25 Jan. 2025.

3. deque. Disponível em: https://accessibility.deque.com/applying-accessibility-heuristics-to-a-wireframe. Acesso em: 25 Jan. 2025.

4. w3c. Disponível em: https://www.w3.org/TR/WCAG21/. Acesso em: 25 Jan. 2025.

5. w3c. Disponível em: https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide.html. Acesso em: 25 Jan. 2025.