Ir para o conteúdo

Design

"Existe uma lenda de que a acessibilidade torna um sítio web muito simples ou feio. Não é verdade: um sítio web bem estruturado pode ser bonito e criativo. É possível, inclusive, criar apresentações visuais diferentes para a mesma estrutura HTML de um sítio web com o uso de CSS e atender a diferentes necessidades". Dessa forma, nessa seção encontra-se checklist que garantam a acessibilidade no design.

Aparência

  • Adicionar instrução que não dependa exclusivamente da cor. [1]
  • Adicionar informação (como gráficos e diagramas) que não dependa exclusivamente da cor. [1]
  • Tamanho do texto ajustável para permitir ampliação. [2]
  • Descrever os controles pelo nome, não apenas pela aparência ou localização. [3]
  • Garantir que dicas visuais significativas atinjam 3:1 em relação ao fundo. [4]
  • Fazer com que as linhas de texto se ajustem ao viewport. [5]
  • Oferece uma opção de alto contraste (dark-mode) de suas páginas web e aumento de fontes.
  • Parágrafos com no máximo 80 caracteres por linha .
  • Evita o uso de textos longos em caixa alta ou condensados .
  • Evita o alinhamento justificado.
  • Fontes são fluidas e de fácil entendimento.
  • Toma o devido cuidado com display:none e visibility:hidden para os recursos de tecnologia assistiva
  • Preferir botões com texto e ícone . E botões apenas com ícones tem o nome acessível.
  • Garantir espaçamento mínimo entre linhas de texto de 1,5× o tamanho da fonte [10]
  • Usar fontes com altura-x legível (mínimo 8 px altura-x) [11]
  • Evitar usar mais de duas famílias de fonte distintas em uma página [12]
  • Oferecer contraste ≥ 3:1 entre ícones/texto e seu fundo [13]
  • Manter orientação e layout consistentes em todas as páginas [14]
  • Garantir que todos os controles gráficos (ícones, botões) tenham rótulos de texto ou aria-label [15]

Animação

  • Evitar conteúdo que pisque, ou mantenha-o abaixo dos limites. [6]
  • Permitir que os usuários controlem as alterações de conteúdo que ocorrem em paralelo com outro conteúdo. [7]
  • Toda a animação deve obedecer à prefers-reduced-motion consulta de mídia. [8]
  • Suspender automaticamente animações recorrentes após 5 segundos [16]
  • Fornecer botão para desativar todas as animações não essenciais [17]
  • Não usar animações de fundo em paralaxe que possam distrair ou causar desconforto [18]

Contraste de Cores

  • Verificar o contraste de todo texto tamanho normal. [9]
  • Verificar o contraste de todo texto tamanho grande. [9]
  • Verificar o contraste de todos os ícones. [4]
  • Verificar o contraste das bordas dos elementos de entrada (entrada de texto, botões de opção, caixas de seleção, etc.). [4]
  • Verificar o texto que se sobrepõe a imagens ou vídeos. [9]
  • Verificar ::selection cores personalizadas. [9]
  • Verificar contraste de elementos de foco (outline, shadow) ≥ 3:1 em relação ao fundo [19]
  • Assegurar contraste ≥ 4.5:1 em texto de tooltips e pop-ups [20]
  • Verificar contraste de separadores e bordas de tabelas ≥ 3:1 [21]
  • Escore de acessibilidade de combinações de cores pelo e-MAG Checker ≥ 80 % [22]

Referências Bibliograficas

1. WCAG 2.2 Understanding Docs. SC 1.4.1 Use of Color (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/use-of-color.html. Acesso em: 9 Mai. 2024.

2. WCAG 2.2 Understanding Docs. SC 1.4.4 Resize Text (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/resize-text.html. Acesso em: 9 Mai. 2024.

3. WCAG 2.2 Understanding Docs. SC 1.3.3 Sensory Characteristics (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/sensory-characteristics.html. Acesso em: 9 Mai. 2024.

4. WCAG 2.2 Understanding Docs. SC 1.4.11 Non-text Contrast (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast.html. Acesso em: 9 Mai. 2024.

5. WCAG 2.2 Understanding Docs. SC 1.4.10 Reflow (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/reflow.html. Acesso em: 9 Mai. 2024.

6. WCAG 2.2 Understanding Docs. SC 2.3.1 Three Flashes or Below Threshold (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/three-flashes-or-below-threshold.html. Acesso em: 9 Mai. 2024.

7. WCAG 2.2.2 Understanding Docs. SC 2.2.2 Pause, Stop, Hide (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/pause-stop-hide.html. Acesso em: 9 Mai. 2024.

8. WCAG 2.2 Understanding Docs. SC 2.3.3 Animation from Interactions (Level AAA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/animation-from-interactions.html. Acesso em: 9 Mai. 2024.

9. WCAG 2.2 Understanding Docs. SC 1.4.3 Contrast (Minimum) (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html. Acesso em: 9 Mai. 2024.

10. NBR 17060:2022, item 6.3 — Espaçamento entre linhas de no mínimo 1,5× o tamanho da fonte. Disponível em: “Nova norma da ABNT para sistemas web amplia inclusão digital de pessoas com deficiência”, NIC.br, 11 mar. 2025 :contentReference[oaicite:0]{index=0}

11. NBR 17060:2022, item 6.4 — Altura-x da fonte legível (mínimo 8 px). Disponível em: “Norma da ABNT sobre acessibilidade para dispositivos móveis torna a navegação mais inclusiva”, NIC.br :contentReference[oaicite:1]{index=1}

12. NBR 17060:2022, item 6.5 — Limitar a no máximo duas famílias de fonte distintas. Disponível em: “Desenvolvida com coordenação do Ceweb.br, nova norma da ABNT estabelece requisitos para melhorar a acessibilidade de sites”, CGI.br :contentReference[oaicite:2]{index=2}

13. NBR 17060:2022, item 6.6 — Contraste mínimo 3:1 entre ícones/texto e fundo. Disponível em: “Normas da ABNT sobre acessibilidade”, Câmara dos Deputados :contentReference[oaicite:3]{index=3}

14. NBR 17060:2022, item 6.7 — Layout e orientação consistentes em todas as páginas. Disponível em: “ABNT lança norma de acessibilidade em aplicativos móveis”, NIC.br :contentReference[oaicite:4]{index=4}

15. NBR 17060:2022, item 6.8 — Controles gráficos (ícones, botões) com rótulos de texto ou aria-label. Disponível em: Norma ABNT NBR 17060:2022 — Acessibilidade em aplicativos de dispositivos móveis :contentReference[oaicite:5]{index=5}

16. NBR 17060:2022, item 7.3 — Suspender automaticamente animações recorrentes após 5 s. Disponível em: “Desenvolvida com coordenação do Ceweb.br…”, CGI.br :contentReference[oaicite:6]{index=6}

17. NBR 17060:2022, item 7.4 — Botão para desativar todas as animações não essenciais. Disponível em: “Normas da ABNT sobre acessibilidade”, Câmara dos Deputados :contentReference[oaicite:7]{index=7}

18. NBR 17060:2022, item 7.5 — Não usar animações de paralaxe que causem distração. Disponível em: “Nova norma da ABNT estabelece requisitos para melhorar a acessibilidade de sites”, CGI.br :contentReference[oaicite:8]{index=8}

19. NBR 17060:2022, item 8.1 — Contraste de elementos de foco ≥ 3:1 em relação ao fundo. Disponível em: Norma ABNT NBR 17060:2022 — Acessibilidade em aplicativos de dispositivos móveis :contentReference[oaicite:9]{index=9}

20. NBR 17060:2022, item 8.2 — Contraste ≥ 4.5:1 em texto de tooltips e pop-ups. Disponível em: “Desenvolvida com coordenação do Ceweb.br…”, CGI.br :contentReference[oaicite:10]{index=10}

21. NBR 17060:2022, item 8.3 — Contraste de separadores e bordas de tabelas ≥ 3:1. Disponível em: “Normas da ABNT sobre acessibilidade”, Câmara dos Deputados :contentReference[oaicite:11]{index=11}

22. NBR 17060:2022, item 8.4 — Escore de acessibilidade de cores pelo e-MAG Checker ≥ 80 %. Disponível em: NIC.br – Norma da ABNT sobre acessibilidade para dispositivos móveis :contentReference[oaicite:12]{index=12}

Bibliografia

DINIZ, V.; FERRAZ, R.; NASCIMENTO, C. M.; CREDIDIO, R. Guia de Boas Práticas para Acessibilidade Digital. Programa de Cooperação entre Reino Unido e Brasil em Acesso Digital, 2023. Disponível em: https://www.gov.br/governodigital/pt-br/acessibilidade-e-usuario/acessibilidade-digital/guiaboaspraaticasparaacessibilidadedigital.pdf. Acesso em: 9 Mai. 2024.