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. [17]
  • Parágrafos com no máximo 80 caracteres por linha . [10]
  • Evita o uso de textos longos em caixa alta ou condensados . [10]
  • Evita o alinhamento justificado. [10]
  • Fontes são fluidas e de fácil entendimento. [10]
  • Toma o devido cuidado com display:none e visibility:hidden para os recursos de tecnologia assistiva. [18]
  • Preferir botões com texto e ícone . E botões apenas com ícones têm o nome acessível. [19]
  • Links devem ter aparência distinta (como texto sublinhado e cor diferente). [11]
  • Todos os botões devem possuir nome acessível (label, alt ou texto visível). [12]
  • Área de clique dos botões com no mínimo 44x44 px. [13]
  • Design deve prever ampliação de zoom em até 200% sem perda de informação. [14]
  • Não usar imagens com texto, pois isso prejudica a legibilidade e acessibilidade. [15]

Animação

  • Evitar conteúdo que pisque, ou mantê-lo 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]
  • Evitar parallax e animações de tela inteira. Se usar, permitir pausas e controle pelo teclado. [16]

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]

Checklists de Design - ABNT NBR 17225:2025

Contraste de Cores

  • Verificar o contraste de todo texto tamanho normal. [33]
  • Verificar o contraste de todo texto tamanho grande. [34]
  • Verificar o contraste de todos os ícones. [35]
  • Verificar o contraste das bordas dos elementos de entrada (entrada de texto, botões de opção, caixas de seleção, etc.). [36]
  • Verificar o texto que se sobrepõe a imagens ou vídeos. [37]
  • Verificar ::selection cores personalizadas. [38]

Checklists de Design - Guia de Boas Práticas para Acessibilidade Digital

Design

  • Desenho Universal: Garantir que o design do site ou aplicativo seja acessível para todas as pessoas sem a necessidade de adaptações. [39]
  • Design Responsivo: Certificar-se de que o design é responsivo e se adapta a diferentes dispositivos, incluindo móveis e desktops. [40]
  • Cores e Contrastes: Escolher combinações de cores que sejam acessíveis, considerando as necessidades de pessoas com deficiência visual, como daltonismo. [41]
  • Uso adequado de fontes e espaçamento: Usar fontes de fácil leitura e garantir que o tamanho e o espaçamento das fontes sejam acessíveis. [42]

Referências Bibliográficas

1. WCAG 2.2 Understanding Docs. SC 1.4.1 Use of Color (Level A).

2. WCAG 2.2 Understanding Docs. SC 1.4.4 Resize Text (Level AA).

3. WCAG 2.2 Understanding Docs. SC 1.3.3 Sensory Characteristics (Level A).

4. WCAG 2.2 Understanding Docs. SC 1.4.11 Non-text Contrast (Level AA).

5. WCAG 2.2 Understanding Docs. SC 1.4.10 Reflow (Level AA).

6. WCAG 2.2 Understanding Docs. SC 2.3.1 Three Flashes or Below Threshold (Level A).

7. WCAG 2.2 Understanding Docs. SC 2.2.2 Pause, Stop, Hide (Level A).

8. WCAG 2.2 Understanding Docs. SC 2.3.3 Animation from Interactions (Level AAA).

9. WCAG 2.2 Understanding Docs. SC 1.4.3 Contrast (Minimum) (Level AA).

10. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 43–44. Disponível em: https://www.gov.br/governodigital/pt-br/acessibilidade-e-usuario/acessibilidade-digital

11. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 45. Links com aparência distinta e foco de teclado evidente.

12. ABNT NBR 17225:2025, item 5.8.3 – Texto, alt ou nome acessível para botões.

13. ABNT NBR 17225:2025, item 5.8.6 – Área de acionamento mínima de 44px. Reforçado por: UK-BR p. 36–37.

14. Guia UK-BR, p. 29. Redimensionamento de texto com zoom em até 200%.

15. Guia UK-BR, p. 50. Não usar texto dentro de imagens.

16. Guia UK-BR, p. 45. Evitar parallax e dar controle de animação ao usuário.

17. WCAG 2.2 Understanding Docs. SC 1.4.8 Visual Presentation (Level AAA). Opções de apresentação visual incluindo alto contraste.

18. WCAG 2.2 Understanding Docs. SC 4.1.2 Name, Role, Value (Level A). Uso adequado de display:none e visibility:hidden.

19. ABNT NBR 17225:2025, item 5.8.3 – Nome acessível para botões e controles interativos.

33. ABNT NBR 17225:2025, item 5.5.1 – Contraste mínimo para texto normal.

34. ABNT NBR 17225:2025, item 5.5.2 – Contraste mínimo para texto grande.

35. ABNT NBR 17225:2025, item 5.5.3 – Contraste para elementos gráficos.

36. ABNT NBR 17225:2025, item 5.5.4 – Contraste para bordas de elementos interativos.

37. ABNT NBR 17225:2025, item 5.5.5 – Contraste para texto sobreposto.

38. ABNT NBR 17225:2025, item 5.5.6 – Contraste para seleção de texto.

39. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 20. Princípios do desenho universal.

40. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 38. Design responsivo e adaptativo.

41. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 35. Combinações de cores acessíveis.

42. Guia de Boas Práticas para Acessibilidade Digital (UK-BR), p. 43. Tipografia e espaçamento acessível.

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

ABNT. NBR 17225:2025 – Acessibilidade em interfaces digitais baseadas em web. Rio de Janeiro, 2025.

Histórico de Versões

Versão Descrição Autor(es) Data Revisor(es) Data de revisão
1.0 Adição de WCAG 2.2 e conformidade ABNT NBR 17225:2025 Gabriel Lopes 17/06/2025 Uires Carlos 17/06/2025
1.1 Correção em conformidade WCAG 2.2 e ABNT NBR 17225:2025 Taynara Vitorino 23/06/2025 Gabriel Lopes 23/06/2025
1.2 Adicionando mais itens sobre a ABNT NBR 17225:2025 Uires Carlos 23/06/2025 Gabriel Lopes 23/06/2025