Esta tradução ainda não foi revista editorialmente. A versão alemã é vinculativa. Deutsche Fassung →
Barrierefreiheit
Como um website apresenta corretamente os erros de formulário?
Um website apresenta erros de formulário corretamente, nomeando o campo afetado e descrevendo o erro em palavras: «Por favor, insira o seu endereço de email». Um quadro vermelho sozinho não é suficiente — visitantes cegos não o veem, visitantes daltónicos podem não vê-lo. O critério WCAG 3.3.1 exige que os erros de entrada detetados sejam automaticamente descobertos e comunicados ao visitante sob a forma de texto.
Um quadro vermelho sozinho deixa os visitantes adivinhar
Imagine um formulário de contacto que volta com a mensagem «Por favor, verifique as suas entradas» — é tudo o que diz. Um visitante que vê procura quadros vermelhos. Um visitante cego tem também esta oportunidade não: o seu leitor de ecrã lê textos em voz alta, não cores. Ele passa por cada campo novamente e adivinha onde está o problema. Muitos desistem neste ponto — e perde uma consulta ou uma encomenda. Uma boa mensagem de erro diz três coisas: qual campo é afetado, o que está errado nele e, melhor ainda, como fica correto. Além disso, a mensagem deve estar tecnicamente ligada ao campo para que os leitores de ecrã a anunciem no campo.
Assim o serviço de verificação mede o reconhecimento de erros
O serviço de verificação testa o seu formulário num browser real com uma tentativa controlada: procura um formulário com campos obrigatórios e envia-o intencionalmente vazio. Depois observa a reação. Se os campos obrigatórios são marcados como errados e a descrição de erro está tecnicamente ligada aos campos, o critério é considerado cumprido — o relatório observa quantos campos foram corretamente nomeados. Barras de pesquisa puras e formulários sem campos obrigatórios são deliberadamente deixados de fora para não desencadear nada indesejado no seu website; tais casos são apontados no relatório como ponto de verificação manual. No padrão Gold, um humano verifica além disso se os textos de erro são formulados compreensivamente.
Beispiele
Fehler ohne Ort und Text
<p class="rot">Bitte Eingaben prüfen.</p>
<input name="iban"><label for="iban">IBAN</label>
<input id="iban" name="iban" aria-invalid="true" aria-describedby="iban-fehler">
<p id="iban-fehler">IBAN: 20 Zeichen erwartet, 18 eingegeben.</p>Die Meldung nennt das Feld und den Fehler und ist mit dem Feld verbunden, damit das Vorleseprogramm sie beim Feld ansagt.
- Envie o seu formulário de contacto intencionalmente vazio uma vez e leia a mensagem de erro com os olhos de um estranho.
- Formule cada mensagem de erro segundo o padrão: nome do campo, problema, solução — «Endereço de email: Por favor, insira um endereço com um símbolo @.»
- Peça à sua agência para ligar tecnicamente as mensagens de erro ao campo respetivo, para que os leitores de ecrã as anunciem.
- Nunca se fie apenas na cor — cada quadro vermelho precisa de um texto explicativo ao lado.