Ramplifica

5.1.1.11 - Requisitos para rótulos de campos de formulário

Os rótulos de campos de formulário devem estar posicionados na ordem usual. Os rótulos de formulários devem ser posicionados adjacentemente ao seu respectivo campo. Em campos de formulário gerais, como os de entrada de textos e/ou números, o rótulo deve ser posicionado antes do campo, ou seja, à esquerda ou acima. Em formulários de botão de rádio (radio button) e caixas de marcação (checkboxes), os rótulos devem estar após as respectivas opções, à direita. A ordem destes itens no código deve coincidir com a ordem visual, para manter a experiência independentemente da forma de navegação do usuário. Esse tipo de posicionamento melhora a previsibilidade da leitura do formulário, usando visão e tecnologias assistivas, além de evitar desalinhamentos acidentais.

Exemplo : O rótulo “nome” vem antes do campo de formulário que requer esse dado do usuário.

sem visão

com visão limitada

com cognição limitada

Rótulo

Campo de Formulário

Cenários para desenvolvimento de interfaces

Organize os rótulos dos formulários de forma previsível e intuitiva, colocando-os à esquerda ou acima dos campos de texto e à direita dos botões de rádio e checkboxes, garantindo uma experiência visual clara e fácil de seguir.

No código, certifique-se de que a ordem dos rótulos e dos campos de formulário siga a ordem visual, posicionando os rótulos próximos aos campos correspondentes, garantindo que a navegação com tecnologias assistivas ocorra de forma coerente.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo de Formulário Acessível</title>
  </head>
  <body>
    <form>
      <!-- Rótulo e campo de texto -->
      <label for="nome">Nome completo:</label>
      <input type="text" id="nome" name="nome" placeholder="Digite seu nome" required>
      <!-- Rótulo e campo de e-mail -->
      <label for="email">E-mail:</label>
      <input type="email" id="email" name="email" placeholder="Digite seu e-mail" required>
      <!-- Rótulo e opções de botão de rádio -->
      <fieldset>
        <legend>Escolha seu plano:</legend>
        <label for="plano_basico">Plano Básico</label>
        <input type="radio" id="plano_basico" name="plano" value="basico">
        <label for="plano_avancado">Plano Avançado</label>
        <input type="radio" id="plano_avancado" name="plano" value="avancado">
      </fieldset>
      <!-- Rótulo e caixa de seleção -->
      <label for="newsletter">Receber novidades por e-mail</label>
      <input type="checkbox" id="newsletter" name="newsletter">
      <!-- Botão de envio -->
      <button type="submit">Enviar</button>
    </form>
  </body>
</html>

Rótulo

Campo de Formulário

Garanta que haja uma revisão sistemática dos formulários para assegurar que o posicionamento dos rótulos e campos siga padrões consistentes, tanto no design quanto na implementação, favorecendo a acessibilidade e usabilidade da interface.

Os rótulos estão posicionados de forma intuitiva, ou seja, à esquerda ou acima dos campos de entrada, e à direita em checkboxes e botões de rádio, de acordo com as diretrizes de usabilidade. Isso facilita a identificação dos campos para todos os usuários.

O fluxo de leitura sequencial, tanto visual quanto no código HTML, deve ser testado para assegurar que tecnologias assistivas leiam os campos na mesma ordem em que aparecem visualmente, prevenindo desorientação durante o preenchimento.

Insira textos de rótulo de maneira clara e informativa, conforme padrões já estabelecidos no mercado. Cuide para que estejam sempre posicionados sempre antes do campo de formulário a que se refere, facilitando a compreensão dos usuários, pois isso torna mais fácil a navegação por tecnologias assistivas.

POR VOCÊ TER ACESSADO ESTE REQUISTO

Recomenda-se

Requisitos para Rótulo

Elementos interativos e de interface do usuário devem ter rótulos que descrevem o elemento, sua funcionalidade, estado ou operação. Elementos de interface interativos, como botões e campos de formulário, devem conter um rótulo que descreve a sua função. Os rótulos devem estar relacionados com o elemento por meio de código de programação. Nem todos os elementos possuem todas essas características, mas eles devem ser compreensíveis para a operação do usuário.

Deve haver cabeçalhos e rótulos para organizar a estrutura da aplicação. A aplicação deve estar estruturada por meio de elementos de cabeçalho em títulos de seção e rótulos em campos de entradas de dados, permitindo que usuários de tecnologia assistiva compreendam melhor sua organização. O uso desses recursos possibilita a localização do conteúdo de forma mais rápida.

Deve ser mantida a mesma organização de elementos funcionais e nomes acessíveis ao longo de toda a aplicação. Os elementos funcionais devem manter-se na mesma posição e com a mesma descrição acessível. Isso facilita a compreensão e acelera o aprendizado do usuário

Ver todos os 13 Requisitos sobre componentes com Rótulo

Requisitos para Campo de Formulário

Os nomes acessíveis devem conter os rótulos dos elementos. Para os elementos que possuam rótulos em texto ou imagens de texto, o nome acessível deve conter todo o rótulo. Sempre que possível, o texto do rótulo deve estar no começo do nome acessível.

Elementos de interface interativos devem descrever sua funcionalidade de forma clara, para a compreensão mesmo fora do contexto. Elementos como botões, links e ícones devem ser compreendidos mesmo fora do contexto. Esses elementos devem ter atributos ou alternativas textuais que descrevem sua funcionalidade aos usuários de tecnologia assistiva. Em caso de elementos que se repetem na interface, cada um deles deve fazer referência a qual objeto ou contexto a ação ou funcionalidade está relacionada.

Ver todos os 17 Requisitos sobre componentes com Campo de Formulário

Ramplifica

Início

Requisitos

Glossário

Sobre o Projeto

Início

Requisitos

Glossário

Sobre o Projeto

5.1.1.11 - Requisitos para rótulos de campos de formulário

Descrição

Desempenho funcional

Componentes aplicáveis

Cenários para desenvolvimento de interfaces

Designers

Desenvolvedores

Exemplo de código

Aprenda a fazer com conteúdos selecionados para você

Gerentes

Testadores

Manutenção dos padrões de marcado nos campos de formulário

Correspondência entre ordem visual e ordem no código

Conteudistas

Recomenda-se

Ramplifica

Requisitos

Glossário

Sobre o Projeto