Olá Mateus
Associar programaticamente etiquetas a todos os controles de formulário. O método recomendado para a maioria das circunstâncias é usar o elemento <label> e uma associação explícita usando os atributos for e id. Os exemplos aqui são ordenados da solução mais aceitável e comum para a solução menos aceitável e menos comum.
<label for="firstname">Nome:</label> <input type="text" id="firstname">
A etiqueta também pode ser implícita, envolvendo o elemento <input> com o elemento <label>:
<label>Nome: <input type="text"></label>
Se o <input> já estiver rotulado visualmente de alguma outra forma, como através de um ícone de lupa em um botão de envio de pesquisa, pode ser aceitável usar aria-label para criar uma etiqueta de texto invisível para leitores de tela lerem:
<input type="text" aria-label="Pesquisar">
Um método alternativo (usado às vezes quando adicionar uma tag <label> quebraria a funcionalidade ou o estilo, ou quando vários rótulos se aplicam ao mesmo <input>) é usar aria-labelledby:
<div id="firstname">Nome:</div> <input type="text" aria-labelledby="firstname">
<!-- etiquetas visuais podem estar em outro lugar no conteúdo, como nos cabeçalhos de tabelas -->
<div id="temperature">Temperatura:</div>
<div id="high">Alta:</div>
<div id="low">Baixa:</div>
<!-- os inputs -->
<input type="text" aria-labelledby="temperature low">
<input type="text" aria-labelledby="temperature high">
Por fim, o atributo placeholder pode ser usado para dar aos inputs de texto um nome acessível. No entanto, isso não é uma solução recomendada, pois a etiqueta visual (o texto do espaço reservado) será removida quando o usuário digitar texto no input, fazendo com que eles não saibam para que serve o input.
<input type="text" placeholder="Pesquisar">
Certifique-se de que todos os elementos id sejam exclusivos em cada página e que o texto da etiqueta faça sentido para quem os ouve com um leitor de tela.
Elementos de formulário que devem ter etiquetas são:
<input type="text">, <input type="password"> e <textarea><input type="radio"><input type="checkbox">As únicas exceções para esse requisito são:
type definido como "hidden" (por exemplo, type="hidden"). Esses inputs estão ocultos e não estão disponíveis para a entrada do usuário, portanto, não precisam de uma etiqueta.Ao adicionar etiquetas, evite o seguinte:
Nome: <input type="text" name="fname">
Esse código produz uma caixa de texto com as palavras "Nome:" ao lado dela. Os usuários com visão não têm problemas para associar o texto ao campo de input. No entanto, essa conexão não é tão clara para usuários sem visão, especialmente em formulários mais longos e complexos. Essa ambiguidade pode aumentar a probabilidade de erros, especialmente quando as informações necessárias são mais complexas do que apenas um nome.
É importante implementar esses vários métodos de rotulagem para tornar os formulários acessíveis. As etiquetas são essenciais para que os leitores de tela identifiquem os campos do formulário corretamente e evitem ambiguidades. A ausência de etiquetas impede que os campos recebam foco quando lidos por leitores de tela, e os usuários com controle motor prejudicado não obtêm o benefício de uma área clicável maior para o controle, uma vez que clicar na etiqueta ativa o controle.