Rótulos de campos

O Silktide verifica se todos os campos de formulário e botões das suas páginas têm um nome que o software consegue ler. As pessoas que não conseguem ver o formulário dependem destes nomes para saber o que cada campo solicita.

Um visitante que consegue ver determina o significado de um campo pelo texto junto a ele. Essa associação visual não tem significado no código: o nome tem de estar associado ao próprio campo, mais frequentemente com um elemento <label> em .

<!-- Problema: o texto parece um rótulo, mas não está associado ao campo -->
<p>Nome completo</p>
<input type="text">

Porque isto é importante

Um anuncia cada campo pelo seu à medida que o visitante percorre um formulário. Um campo sem nome é anunciado apenas como "editar texto" — o visitante tem de adivinhar o que escrever com base no contexto e, num formulário mais longo, isso torna-se rapidamente impossível. Campos sem rótulo são uma das razões mais comuns pelas quais não é possível preencher um formulário sem visão, o que significa perda de inscrições, encomendas e pedidos de informação.

Como corrigir

Associe um <label> a cada campo, quer através de um ID quer envolvendo o campo:

<!-- Associado por ID -->
<label for="name">Nome completo</label>
<input type="text" id="name">

<!-- Ou envolvendo o campo -->
<label>Nome completo <input type="text"></label>

Os botões dão nome a si próprios através do respetivo texto ou value — não é necessário nenhum elemento de rótulo:

<button>Enviar mensagem</button>
<input type="submit" value="Enviar mensagem">

Quando um rótulo visível não for prático, utilize um atributo de , como aria-label ou aria-labelledby. Tenha em atenção que isto ajuda apenas as — os visitantes que conseguem ver não o verão.

Não utilize texto de placeholder como rótulo: desaparece assim que o visitante começa a escrever e não é tratado de forma consistente como um nome.

Como o Silktide testa isto

Encontre os controlos de formulário em cada página: entradas, áreas de texto, listas suspensas e botões, além de elementos aos quais foi atribuída uma função de controlo de formulário com ARIA (como role="button" ou role="checkbox").
Ignore os controlos que não precisam de um nome: entradas ocultas, campos inseridos por widgets de terceiros conhecidos (como serviços de , ou os formulários ocultos que os scripts de acompanhamento e tradução adicionam para uso próprio) e elementos cuja função ARIA não exige um rótulo.
Determine o nome acessível de cada controlo a partir do respetivo rótulo, atributos ARIA, texto do botão ou valor.
Indique cada controlo cujo nome acessível está vazio.

Resolução de problemas

O campo tem texto junto a ele

O texto próximo não dá nome a um campo, a menos que esteja associado no código — utilize um <label> com um atributo for ou envolva o campo no rótulo.

O campo é decorativo ou gerido por um plugin

Campos inseridos por widgets que não controla podem ser difíceis de corrigir diretamente. Verifique se o plugin oferece uma definição de acessibilidade ou uma atualização; se o campo realmente não afetar os visitantes, pode o resultado.