Conformidade com WCAG 2.2

O widget de prova-de-trabalho da ALTCHA é projetado com acessibilidade em mente, aderindo completamente às diretrizes do WCAG 2.2 para conformidade no nível AA. Este guia fornece passos acionáveis para integrar a ALTCHA de forma inclusiva em seu site.

Introdução

As Diretrizes de Acessibilidade para Conteúdo da Web (WCAG) 2.2 delineiam padrões para tornar o conteúdo digital mais acessível para pessoas com deficiências. A conformidade com o WCAG 2.2 garante a inclusão, protege contra riscos legais e melhora a experiência do usuário em geral. Este guia detalha como a ALTCHA atende a esses requisitos e fornece passos práticos para uma integração adequada.

Perceptível

Alternativas de Texto

• Conteúdo não textual:
  Forneça descrições acessíveis para a funcionalidade da ALTCHA para ajudar os usuários que dependem de leitores de tela.

  Exemplo:

  <form aria-label="Protegido pela ALTCHA: Um widget de prova-de-trabalho protege este formulário contra spam.">

• Texto explicativo:
  Adicione uma explicação clara próxima aos formulários para informar os usuários sobre o processo da ALTCHA:

  “Este formulário é protegido por um processo de verificação invisível. Nenhuma ação é necessária.”

Dica

Use a propriedade de configuração auto para verificar automaticamente sem interação do usuário.

Distinguível

• Padrões de Contraste:
  Mensagens de status, como “Verificação em andamento”, devem atender à relação de contraste mínima de 4,5:1 em relação ao seu fundo.

• Estados de Foco ou Hover:
  Garanta que as atualizações de conteúdo, como “Processando…”, permaneçam visíveis ao passar o mouse ou ao focar.

Operável

Acessibilidade do Teclado

• A ALTCHA deve suportar navegação completa por teclado, permitindo que os usuários naveguem pelos formulários e os enviem sem usar um mouse.

Navegável

• Ordem de Foco Lógica:
  Defina uma ordem lógica de tabulação através do formulário — de rótulos para entradas até o botão de envio.

• Indicadores de Foco:
  Destaque visualmente os elementos em foco (por exemplo, usando uma borda ou contorno).

Compreensível

Legível

• Use linguagem simples e clara para todas as mensagens de status da ALTCHA:

  “Verificando envio. Este processo garante que seu formulário seja seguro.”

Assistência de Entrada

• Exiba mensagens de erro amigáveis ao usuário quando a verificação falhar.
  Exemplo:

  <div role="alert" style="color: red;">
      Verificação falhou. Por favor, recarregue a página e tente novamente.
  </div>

• Sugira ações de solução de problemas, como habilitar JavaScript, se necessário.

Lista de Verificação de Implementação

1. Rótulos Acessíveis:
   Adicione atributos descritivos aria-label para entradas e formulários.

2. Feedback de Atividade em Segundo Plano:
   Comunique atualizações de status aos usuários, principalmente durante processos de verificação.

Dica

Use eventos para rastrear o progresso da ALTCHA e atualizar os usuários conforme necessário. O próprio widget usa role="status" aria-live="polite" para atualizações de status dentro do widget.

3. Mensagens de Erro:
   Inclua mensagens de erro acionáveis com orientações para etapas corretivas.

4. Compatibilidade com Dispositivos:
   Teste sua integração em vários dispositivos, navegadores e tecnologias assistivas.

Recomendações de Teste

Garanta conformidade com uma ampla gama de casos de uso testando a integração da ALTCHA em:

• Dispositivos: Desktop, tablet e dispositivos móveis.
• Navegadores: Navegadores modernos como Chrome, Firefox, Safari e Edge.
• Tecnologias Assistivas: Leitores de tela como NVDA ou VoiceOver e navegação apenas com o teclado.

Conclusão

Ao implementar essas medidas, sua integração com a ALTCHA permanecerá acessível e em conformidade, garantindo uma experiência inclusiva para todos os usuários. Isso também demonstra seu compromisso com a acessibilidade, beneficiando tanto seus usuários quanto sua marca.