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.

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]

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]

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.

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.