Identificação de erros

O Silktide examina campos obrigatórios de formulários que parecem usar validação personalizada em vez da verificação integrada do navegador e avisa quando não há uma forma aparente de a mensagem de erro chegar às pessoas que usam tecnologia assistiva.

Por que isso é importante

Quando um formulário rejeita uma resposta inválida, os utilizadores que veem geralmente observam um contorno vermelho ou uma mensagem junto ao campo. Um utilizador de não recebe nada disso, a menos que a página exponha o erro no código: o formulário simplesmente recusa o envio, sem explicar o que correu mal ou onde. O resultado é um formulário que bloqueia silenciosamente o acesso de alguns visitantes.

Os navegadores anunciam automaticamente as próprias mensagens de validação integradas. O risco surge quando uma página desativa essa funcionalidade ou a substitui pela própria validação e se esquece de ligar a substituição à .

Como corrigir

Dê a cada campo validado de forma personalizada um caminho programático para a sua mensagem de erro, usando :

<!-- Problema: validação personalizada sem um canal de erro acessível -->
<form novalidate>
  <input type="text" required>
  <span class="error">Introduza o seu nome</span>
</form>

<!-- Correção: o campo aponta para a sua mensagem de erro -->
<form novalidate>
  <input type="text" required aria-describedby="name-error">
  <span id="name-error" class="error">Introduza o seu nome</span>
</form>

Qualquer uma destas opções satisfaz a verificação:

aria-errormessage no campo, apontando para o elemento que preenche com o texto do erro (defina aria-invalid="true" quando o erro for apresentado).
aria-describedby no campo, apontando para o elemento da mensagem.
Uma dentro do formulário — um elemento com role="alert", role="status" ou aria-live — na qual a validação escreve o texto do erro.

Como alternativa, remova a personalização e deixe o navegador utilizar a validação nativa para comunicar os erros, que é acessível por predefinição.

Como o Silktide faz esta verificação

Encontra campos obrigatórios visíveis — campos de entrada, áreas de texto e menus de seleção — marcados com required ou aria-required="true".
Mantém apenas os campos com indícios de que a validação nativa do navegador foi ignorada ou substituída: o formulário tem novalidate, um controlo de envio tem formnovalidate, o campo está marcado com aria-invalid, utiliza aria-required sem o atributo nativo required ou o campo ou formulário contém indicações de validação personalizada, como atributos relacionados com erros ou contentores de mensagens de erro.
Para cada campo desse tipo, procura qualquer canal de erro acessível: uma referência aria-errormessage válida, uma referência aria-describedby válida ou uma região dinâmica dentro do formulário.
Avisa sobre os campos que não têm nenhum. Isto é um aviso, e não uma falha confirmada, porque o comportamento da validação em tempo de execução não pode ser totalmente observado a partir do código da página.

Resolução de problemas

Os meus erros são anunciados corretamente

A verificação procura a estrutura que torna os anúncios possíveis, não o anúncio em si. Se a sua estrutura injeta uma região dinâmica ou as referências ARIA apenas no momento em que ocorre um erro, a página carregada não apresenta nenhum canal e o campo é sinalizado. Adicionar antecipadamente o elemento da mensagem (vazio) e a referência resolve o problema e também é uma opção mais robusta.

O elemento da mensagem referenciado ainda não existe

As referências têm de apontar para elementos que existam na página. Um aria-describedby que aponta para um ID criado apenas mais tarde conta como nenhum canal.