Desenvolvimento

"Nessa fase, é importante garantir que a equipe de desenvolvimento saiba como implementar acessibilidade, verificá-la e usar as ferramentas disponíveis no mercado para testes e padronizações. Também é importante que a equipe saiba como as pessoas com deficiência usam os sítios web e aplicativos". Nesse caso, foram incluídas técnicas relacionadas ao desenvolvimento e também formas de verificar.

Imagens

  • Adicionar alt para imagens, botões-imagem, gráficos e imagens de mapas com pontos de acesso. [1]
  • Adicionar alt="" para imagens decorativas que não tem significado. [1]
  • Incluir a descrição no alt para imagens que contém texto. [1]

Vídeos

  • Adicionar legendas para áudio em vídeos existentes. [2]
  • Evitar conteúdo com flashes (gatilhos para convulsões) ou manter abaixo dos limites. [3]

Controles

  • Adicionar href para links. [4]
  • Adicionar underline nos links. [5]
  • Adicionar estados de foco em campos de entrada, botões, e elementos interativos. [6]
  • Adicionar type="button" nos botões. [4]
  • Adicionar skip-link (link para pular) para o conteúdo principal. [7]
  • Identifique e comunique links que abrem em uma nova guia ou janela. [8]

Formulário

  • Adicionar label para os campos de entradas associadas ao elemento correspondente. [9]
  • Adicionar <fildset> e <legend> para seção no formulário. [4]
  • Adicionar autocomplete para campos de entrada. [10]
  • Exibir errors (erros) de entrada acima do formulário, após envio. [11]
  • Adicionar aria-describedby para os campos de entrada. [11]
  • Exibir mensagens de erro e sucesso não só visualmente. [5]

Mídia

  • Impedir autoplay para vídeos e audios. [12]
  • Adicionar type para botões e entradas. [4]
  • Adicionar pausa para todas as mídias. [13]
  • Adicionar transcrição para audios. [1]

Semântica

  • Uso de elementos nativos HTML.
  • Fluxo continuo e Lógico.
  • Tem descrições que podem ser facilmente compreendidas.
  • Tem a semântica correta.
  • É objetivo nos rótulos.

Texto

  • Evitar o uso de textos dentro de imagens.
  • Redimensiona os textos na página, aumentando o zoom em até 200%.
  • Alturas das fontes não é fixa .

Teclado

  • Funcionalidades da página web estão disponíveis por teclado .
  • Quando se tem o mouseover é permitido o uso de teclado .
  • Foco visível remova elementos focalizáveis ​​invisíveis.
  • Adicione o .hover, .focus { } para tornar o foco visível.
  • Permite/visa o uso de Atalhos de teclado como o TAB.
  • Primeiro item interativo da página é um link para o conteúdo principal .

Título

  • A hierarquia de conteúdo da página é definida por sua lógica não pelo tamanaho do texto. [17]
  • Use elementos de título h1 h2 h3 para apresentar o conteúdo.[17]
  • Não pular níveis lógicos.
  • Toda página contem um título h1 descrevendo a página. [17][19]

Tabela

  • Use o table para elementos em formato de tabela. [4]
  • Insira cabeçalhos para explicar os dados, use th com scope correto.[15]
  • Use o captione lemento para fornecer um título para a tabela.[17]

Modais

  • Deve ser fácil fechar .[19]
  • Permiti o uso da tecla escape ESC.[19]
  • A interação é uma tarefa simples.[19]
  • Evita modais em tela cheia .[19]
  • Não abrir um modal a partir de outro modal .[19]

Dispositivo Móvel e tocável

  • O site pode ser rotacionado para qualquer orientação. [15]
  • Impedir rolgem horizontal. [16]
  • Garantir que botões e links possam ser ativados facilmente. [18]
  • Garantir espaço suficiente entre elementos interativos. [7]

Ferramentas e extras

  • Permiti pausar, parar ou ocultar conteúdo em movimento .
  • Usar Breadcrumbs informando a localização atual nas páginas.
  • Colocar página ou área de esclarecimento de dúvidas e dicas de acessibilidade .
  • Áreas clicáveis com no mínimo 44px (pixels) de altura e 44px de largura .
  • No caso de captcha garanta que seja simples de entender e tenha alternativas para pessoas com deficiência.
  • Incluir um campo de busca .

Referência Bibliográfica

1. WCAG 2.2 Understanding Docs. SC 1.1.1 Non-text Content (Level A) . Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/non-text-content.html. Acesso em: 9 Mai. 2024.

2. WCAG 2.2 Understanding Docs. SC 1.2.2 Captions (Prerecorded) (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/captions-prerecorded.html. Acesso em: 9 Mai. 2024.

3. 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.

4. WCAG 2.2 Understanding Docs. SC 1.3.1 Info and Relationships (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/info-and-relationships.html. Acesso em: 9 Mai. 2024.

5. 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.

6. WCAG 2.2 Understanding Docs. SC 2.4.7 Focus Visible (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/focus-visible.html. Acesso em: 9 Mai. 2024.

7. WCAG 2.2 Understanding Docs. SC 2.4.1 Bypass Blocks (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/bypass-blocks.html. Acesso em: 9 Mai. 2024.

8. WCAG 2.2 Understanding Docs. G201 Giving users advanced warning when opening a new window. Disponível em: https://www.w3.org/WAI/WCAG22/Techniques/general/G201. Acesso em: 9 Mai. 2024.

9. WCAG 2.2 Understanding Docs. SC 3.2.2 On Input (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/on-input.html. Acesso em: 9 Mai. 2024.

10. WCAG 2.2 Understanding Docs. SC 1.3.5 Identify Input Purpose (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html. Acesso em: 9 Mai. 2024.

11. WCAG 2.2 Understanding Docs. SC 3.3.1 Error Identification (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/error-identification.html. Acesso em: 9 Mai. 2024.

12. WCAG 2.2 Understanding Docs. SC 1.4.2 Audio Control (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/audio-control.html. Acesso em: 9 Mai. 2024.

13. WCAG 2.2 Understanding Docs. SC 2.1.1 Keyboard (Level A). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/keyboard.html. Acesso em: 9 Mai. 2024.

14. WCAG 2.2 Understanding Docs. SC 1.3.4 Orientation (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/orientation.html. Acesso em: 9 Mai. 2024.

15. WCAG 2.2 Understanding Docs. SC 4.1.1 Orientation (Level). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/parsing.html. Acesso em: 9 Mai. 2024.

16. 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.

17. WCAG 2.2 Understanding SC 2.4.6 Headings and Labels (Level AA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/headings-and-labels.html. Acesso em: 9 Mai. 2024.

18. WCAG 2.2 Understanding Docs. SC 2.5.5 Target Size (Enhanced) (Level AAA). Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.html. Acesso em: 9 Mai. 2024.

19. GUIA DE BOAS PRÁTICAS PARA ACESSIBILIDADE DIGITAL. Disponível em: https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced.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.