Mensagens de erro

As mensagens de erro são um aspecto importante da interação do utilizador. 

Em geral, erros de implementação acessíveis incluem o seguinte:

  • Injetar mensagens de erro na ordem de leitura correta no DOM.
  • Se existir uma sugestão para corrigir um erro, deve estar associada ao input usando aria-describeby.
  • Definir o atributo aria-invalid como “true” em elementos com um erro de entrada (e remover assim que o erro for corrigido).

Usar alert role ou aria-live para exibir mensagens de erro que não têm foco.

Exemplo:

<label for “email”>Email*</label>
<input id=”email” type=”text” required aria-describedby=”errmsg” aria-invalid=”true”>
<span aria-live=”polite” id=”errmsg”>Please enter an email address</span>