Ramplifica

5.1.1.5 - Requisito para cabeçalho e rótulos

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.

Exemplo : Uma aplicação utiliza cabeçalhos para separar as principais áreas exibidas na tela e rótulos que descrevem o que é exigido nos campos interativos.

sem visão

com manipulação ou força limitadas

com alcance limitado

Rótulo

Título de seção

Cenários para desenvolvimento de interfaces

Ao criar a interface, utilize uma hierarquia visual clara com títulos e rótulos visíveis e bem posicionados, refletindo a estrutura lógica da aplicação.

Estruture o código com cabeçalhos semânticos (usando <h1>, <h2>, etc.) e associe rótulos a campos de formulário via HTML, como <label> e for, garantindo que leitores de tela interpretem corretamente a hierarquia e os dados inseridos.

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Campo de Formulário Acessível</title>
  </head>
  <body>
    <!-- Rótulo claro para o campo de entrada -->
    <label for="nome">Nome completo:</label>
    <input type="text" id="nome" name="nome" placeholder="Ramplifica" aria-label="Digite seu nome completo" required>
  </body>
</html>

Rótulo

Título de seção

Organize o fluxo de trabalho para garantir que os cabeçalhos e rótulos sejam revisados durante o processo de design e desenvolvimento, alinhando as equipes para garantir que a estrutura da aplicação favoreça tanto a acessibilidade quanto a usabilidade.

Assegure-se de que a estrutura de cabeçalhos (por exemplo, h1 a h6 no HTML) siga uma hierarquia lógica que reflita a organização da interface, como títulos de seções e subseções, para que os leitores de tela possam interpretar corretamente a estrutura. Isso facilita a navegação dos usuários entre as seções de conteúdo.

Verifique se cada campo de entrada possui rótulos bem definidos e programaticamente associados, como com o uso do atributo for em formulários HTML ou aria-labelledby para componentes interativos, para que tecnologias assistivas possam identificar e ler corretamente o propósito de cada campo.

Teste a navegação com tecnologias assistivas para confirmar que os cabeçalhos e rótulos permitem aos usuários localizar facilmente o conteúdo desejado, aprimorando a experiência de uso para aqueles que navegam apenas pelo teclado ou com leitores de tela.

Garanta que os títulos e rótulos inseridos sejam claros, descritivos e correspondam ao propósito do conteúdo, ajudando os usuários a localizar e entender as informações com rapidez e precisão. Os títulos podem servir como cabeçalhos para dividir as seções da página, tornando mais fácil para o usuário compreender o conteúdo da aplicação.

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 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

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.

Ver todos os 13 Requisitos sobre componentes com Rótulo

Requisitos para Título de seção

Deve haver indicador de foco de navegação. Os aplicativos devem permitir que recursos de tecnologia assistiva que suportam indicador de foco visível em navegação sequencial, como leitores de tela, exibam esse indicador adequadamente.

Os elementos de interface de itens em sequência ou que exigem paginação devem situar o usuário. Deve ficar claro para o usuário a quantidade de etapas, o intervalo mostrado, o seu posicionamento atual e o número de itens totais quando uma ação exige interação em itens sequenciais.

Os textos e elementos gráficos devem ter contraste suficiente com seus respectivos planos de fundo. Deve haver contraste mínimo entre os textos e seus respectivos planos de fundo. Também deve haver contraste mínimo entre os elementos gráficos relevantes e seus respectivos planos de fundo e/ou entornos. As taxas de contraste devem estar em conformidade mínima com os critérios de sucesso nível AA do WCAG 2.1. Elementos interativos no estado desabilitado não precisam cumprir requisitos de contraste. Elementos gráficos meramente decorativos e logotipos também estão isentos.

Ver todos os 6 Requisitos sobre componentes com Título de seção

Ramplifica

Início

Requisitos

Glossário

Sobre o Projeto

Início

Requisitos

Glossário

Sobre o Projeto

5.1.1.5 - Requisito para cabeçalho e rótulos

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

Hierarquia de cabeçalhos

Rótulos claros e associados

Navegação e localização rápida

Conteudistas

Recomenda-se

Ramplifica

Requisitos

Glossário

Sobre o Projeto