Um campo de formulário sem um rótulo corretamente associado é o erro mais comum que encontramos em formulários de contacto, etapas de compra e ecrãs de início de sessão. O rótulo está muitas vezes presente, visualmente bem posicionado acima ou ao lado do campo de entrada, mas na código-fonte não está tecnicamente associado a esse campo. Um leitor de ecrã lê então o campo como "editar, vazio" sem indicar para que serve o campo.
O problema surge geralmente porque um rótulo e um campo de entrada parecem pertencer visualmente um ao outro, mas o programador (ou o sistema de construção) não estabeleceu uma relação técnica entre ambos. Para um utilizador que vê: não faz diferença, vê simplesmente o rótulo. Para alguém que usa um leitor de ecrã, essa proximidade visual não existe. O que conta é a associação no código, e essa está frequentemente ausente, até em sites que parecem bem construídos.
Três variantes do mesmo erro
A forma mais comum é o rótulo que aparece no ecrã mas existe isolado do campo no código, sem associação técnica. A segunda forma é o uso de um texto de espaço reservado no próprio campo como única explicação: assim que o utilizador começa a escrever, esse texto desaparece, e além disso um leitor de ecrã não trata sempre um espaço reservado como um rótulo adequado. A terceira forma vê-se especialmente em ícones: um campo de busca apenas com um ícone de lupa, ou um botão apenas com um pictograma, sem texto que um leitor de ecrã possa ler.
Todas estas variantes têm em comum que o erro habitualmente não é intencional. Ninguém constrói um formulário para o tornar inacessível. Acontece porque um rótulo visualmente está correto e o construtor assume que está pronto, enquanto a associação técnica é um passo separado que se perde facilmente, especialmente sob pressão de tempo ou com um modelo que originalmente não foi construído tendo em conta a acessibilidade.
Porque isto tem mais peso do que parece
Um formulário é frequentemente o ponto onde um visitante quer realmente resolver algo: concluir uma compra, criar uma conta, entrar em contacto. Se o rótulo está em falta precisamente nesse momento, o processo trava para parte dos seus visitantes, enquanto o resto do site funciona bem. Os reguladores e avaliadores frequentemente verificam primeiro este tipo de pontos críticos em formulários, porque têm um impacto direto na possibilidade de alguém usar um serviço.
Além disso, este erro dissemina-se facilmente. Um rótulo sem associação num único modelo para um campo de morada surge frequentemente em dezenas de páginas ao mesmo tempo, porque a mesma componente é reutilizada por toda a parte. Uma associação perdida na base afecta assim toda a etapa de compra ou todo o ecrã de início de sessão.
Como testar isto, e onde uma verificação automática tem limitações
Uma verificação automática detecta bem parte destes erros: vê se um rótulo está tecnicamente associado a um campo e se um campo de entrada não tem nenhum nome. O que uma verificação tem mais dificuldade em avaliar é se um rótulo faz sentido do ponto de vista do conteúdo, se um espaço reservado como única explicação é suficientemente claro, e se a ordem de leitura para um leitor de ecrã é lógica. É exactamente por isso que em cada relatório indicamos o que uma verificação automática consegue e o que não consegue; assim sabe o que ainda precisa de ser visto manualmente.
Se quer ter uma primeira impressão por conta própria, o teste mais simples é percorrer o formulário apenas com o teclado e verificar se cada campo recebe um nome claro quando o selecciona com a tecla de tabulação. Para uma visão mais completa, incluindo a etapa de compra e o fluxo de início de sessão, ajuda a verificação completa que vai além da página inicial ver onde faltam rótulos ou estão isolados do seu campo.
O que um widget de sobreposição não consegue resolver aqui
Um widget de acessibilidade colado sobre o site não consegue corrigir uma associação em falta entre um rótulo e um campo; essa associação está na própria código-fonte e tem de ser corrigida lá. Esta é uma das razões pelas quais não vendemos sobreposições: escondem este tipo de erros à vista, mas um leitor de ecrã não nota nada.
A solução em si geralmente é limitada em escopo: o desenvolvedor vincula o rótulo ao campo, substitui um placeholder usado como rótulo por um rótulo real, ou adiciona texto invisível a um botão de ícone. Não é uma grande reformulação, mas é trabalho que deve ser feito de forma direcionada, por formulário e por modelo. Em a base de conhecimento com explicações por tema você lê como esses e erros semelhantes se relacionam com os requisitos da EN 301 549.
Após o reparo: documentar e monitorar
Um rótulo que você corrige agora pode desaparecer novamente na próxima modificação do modelo, por exemplo, quando um designer reformula o formulário sem verificar novamente a vinculação. Por isso, uma correção não deve apenas ser resolvida tecnicamente, mas também incluída no plano de melhoria, para que fique claro quem é responsável e quando será verificado novamente. Como organizamos essa verificação e repetição está explicado em a página sobre como a avaliação é realizada.
Se você duvida se seus próprios formulários contêm esse erro, isso geralmente pode ser visto em poucos minutos com navegação por teclado. Se você quer isso de forma estruturada e com uma lista priorizada, isso começa com a verificação rápida gratuita, ou você primeiro consulta as perguntas frequentes sobre o que uma verificação faz e não controla.