Acessibilidade em formulários
A seguir estão listadas algumas práticas recomendadas para garantir a acessibilidade nos formulários do Bootstrap.
Uso adequado de <label>
Sempre associe um <label> a cada campo do formulário para fornecer uma descrição acessível. Isso pode ser feito explicitamente usando o atributo for do <label> que se refere ao id do controle correspondente.
<label for="nomeUsuario">Nome de Usuário:</label>
<input type="text" id="nomeUsuario" class="form-control">Texto descritivo para botões
Ao usar botões, inclua um texto descritivo significativo dentro do elemento <button> para que a função do botão seja clara para usuários de tecnologias assistivas.
<button type="submit" class="btn btn-primary">Enviar Formulário</button>Alternativas para situações sem <label> visível
Em casos em que não é possível incluir um <label> visível, há alternativas para garantir uma descrição acessível:
- Use elementos
<label>ocultos visualmente, ao utilizar a classe.visually-hidden. - Aponte para um elemento existente que pode atuar como rótulo usando
aria-labelledby. - Forneça um atributo
title. - Configure explicitamente o nome acessível usando
aria-label.
<!-- Exemplo com label visualmente oculto -->
<label for="campoEscondido" class="visually-hidden">Meu Campo:</label>
<input type="text" id="campoEscondido" class="form-control">
<!-- Exemplo com aria-labelledby -->
<span id="rotuloCampoEscondido" class="visually-hidden">Meu Campo:</span>
<input type="text" aria-labelledby="rotuloCampoEscondido" class="form-control">Atributo placeholder como último recurso
Se nenhum desses métodos estiver disponível, algumas tecnologias assistivas podem usar o atributo placeholder como um último recurso. No entanto, isso não é aconselhável, pois o placeholder não é um substituto ideal para rótulos acessíveis.
Observação
Lembre-se de que embora o uso de conteúdo visualmente oculto (
.visually-hidden),aria-labeleplaceholderpossa beneficiar usuários de tecnologias assistivas, a presença de rótulos visíveis ainda é a melhor prática. A inclusão de rótulos visíveis melhora não apenas a acessibilidade, mas também a usabilidade geral do formulário.