HTML forms: labels
O curso mostra como ligar legendas a controles de formulário para que navegadores, leitores de tela e quem navega só pelo teclado identifiquem cada campo. Começa explicando por que texto solto acima do input e placeholder não bastam. Depois apresenta labels explícitos com for e id e labels implícitos que envolvem o controle. Segue com o agrupamento de controles com fieldset e legend, a nomeação com aria-label de controles que só têm ícone e com aria-labelledby quando um texto visível já os nomeia, e dicas e erros ligados com aria-describedby. Um form de cadastro final junta todas as técnicas.
O que você vai aprender
- ✓Por que o placeholder não substitui um label
- ✓Como ligar labels a controles com for e id
- ✓Como envolver controles em labels e o que não colocar dentro deles
- ✓Como agrupar controles relacionados com fieldset e legend
- ✓Como nomear controles com aria-label e aria-labelledby
- ✓Como anexar dicas e erros com aria-describedby e aria-invalid
Por que labels importam
Olhe de novo para cada form que você construiu nos últimos dois cursos. Acima de cada input tem uma palavra: "Email", "Senha", "País". Para seus olhos, isso parece uma legenda no lugar certo. Para o mouse, é espaço morto; clicar ali não faz nada. Para um leitor de tela, nem é uma legenda, é só uma…
Ler a aula completa grátis →Currículo
7 aulasPor que labels importam
Mostra por que texto acima do input e placeholder não funcionam como label para leitores de tela e cliques.
Labels explícitos: for e id
Explica labels explícitos com for e id, a regra de IDs únicos, a liberdade de posição e htmlFor.
Labels implícitos: envolvendo o input
Trata de aninhar o controle dentro do label, dos elementos rotuláveis e de evitar links ou títulos ali dentro.
Agrupando controles com fieldset e legend
Agrupa radio buttons e checkboxes com fieldset e legend, incluindo o atributo disabled e fieldsets aninhados.
Quando o label não basta: aria-label e aria-labelledby
Nomeia controles só com ícone ou nomeados pelo contexto usando aria-label e aria-labelledby, e mostra qual nome vence quando há vários.
Dicas, erros e aria-describedby
Liga dicas e mensagens de erro com aria-describedby e aria-invalid, sem depender só da cor para comunicar.
Juntando tudo: um formulário de cadastro acessível
Monta um form de cadastro com todas as técnicas e compara o anúncio do leitor de tela com e sem elas.