O que é
Um rótulo (label) corretamente codificado é um texto explicitamente associado a um campo específico do formulário no código subjacente da página (normalmente através de um atributo for que corresponde ao id do campo), de modo que um leitor de ecrã anuncia esse rótulo assim que o visitante coloca o foco nesse campo — por exemplo, "Endereço de email, campo de texto". Este é um requisito mais rigoroso e técnico do que simplesmente ter texto com aparência de rótulo visível perto do campo, que é o ângulo abordado no nosso guia geral sobre rótulos de formulário focado em taxas de conversão.
Um campo pode parecer perfeitamente rotulado para um visitante vidente (texto colocado mesmo ao lado da caixa) sem que exista qualquer ligação real no código entre esse texto e o campo — e é exatamente essa lacuna que esta verificação de acessibilidade procura identificar.
Por que importa
Um leitor de ecrã não vê o layout visual de uma página — lê a estrutura do código subjacente, por isso um rótulo que está apenas visualmente próximo de um campo, mas não explicitamente ligado a ele no código, pode nunca ser anunciado quando um utilizador de leitor de ecrã chega a esse campo. Sem ouvir para que serve um campo, ficam apenas a adivinhar ou a saltá-lo, o que pode significar que um utilizador de leitor de ecrã simplesmente não consegue concluir um formulário que um visitante vidente acha perfeitamente simples.
Este é um dos requisitos mais bem estabelecidos e especificamente nomeados na WCAG (as diretrizes padrão de acessibilidade que muitas organizações são legalmente obrigadas a cumprir), precisamente porque os formulários são centrais para concluir qualquer tarefa na web — registar-se, finalizar uma compra, entrar em contacto.
Como corrigir
- Para cada campo de formulário, adiciona um elemento
<label>com um atributoforque corresponda exatamente ao atributoiddesse campo. - Em alternativa, envolve o campo diretamente dentro da própria tag
<label>, o que cria a mesma ligação explícita sem precisar de IDs correspondentes. - Para um campo sem rótulo visível por design (por exemplo, um campo de pesquisa apenas com ícone), usa
aria-label="Pesquisar"diretamente no campo, para que um leitor de ecrã continue a anunciar o seu propósito. - Evita depender apenas do texto de preenchimento (placeholder) como substituto de um rótulo real — os leitores de ecrã tratam esse texto de forma inconsistente, e ele desaparece assim que se introduz texto.
- Testa navegando pelo formulário apenas com o teclado e um leitor de ecrã gratuito (NVDA, VoiceOver) para confirmar que cada campo anuncia um propósito claro.