Ramplifica

Todas os Requisitos

5.1.1.8 - Requisitos para descrição de elementos de interface interativos

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.

Exemplo : Um ícone de uma “casa” que leva o usuário para a página inicial precisa de um texto alternativo “voltar para o início”. Uma imagem “+” precisa ter o texto alternativo “Botão Adicionar Despesa” (em uma tela de cadastro de despesas).

sem visão

com visão limitada

com audição limitada

com cognição limitada

Botão

Link

Campo de Formulário

Controle

Cenários para desenvolvimento de interfaces

Crie botões, ícones e links com rótulos textuais claros e específicos, de modo que o usuário possa entender a função do elemento mesmo sem contexto adicional. Evite o uso de ícones sem texto explicativo, especialmente em ações críticas.

Utilize atributos como aria-label, aria-describedby, ou alt para fornecer descrições claras de botões e links, garantindo que a funcionalidade de cada elemento seja entendida por usuários de tecnologia assistiva mesmo fora do seu contexto visual.

<!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 Elementos Interativos Acessíveis</title>
  </head>
  <body>
    <!-- Botão com descrição acessível -->
    <button aria-label="Enviar formulário de cadastro">Enviar</button>
    <!-- Link com descrição acessível -->
    <a href="https://www.ramplifica.com" aria-label="Ir para o site da Ramplifica">Acesse nosso site</a>
    <!-- Ícone de carrinho de compras com descrição acessível -->
    <a href="/carrinho" aria-label="Ir para o carrinho de compras">
      <img src="carrinho.png" alt="Ícone de carrinho de compras">
    </a>
  </body>
</html>

Estabeleça e revise práticas de nomenclatura e descrição claras e consistentes para todos os elementos interativos, garantindo que as equipes criem interfaces rm que a função de cada elemento seja compreendida por todos os tipos de usuários, inclusive fora de contexto.

Certifique-se de que cada elemento interativo, como botões, links e ícones, possui uma descrição acessível que indique sua função de forma completa, permitindo ao usuário entender sua ação sem precisar de contexto adicional. Por exemplo, um botão que redireciona para um formulário de contato deve ser rotulado como "Abrir formulário de contato" em vez de apenas "Abrir".

Teste se elementos repetidos têm descrições específicas que indiquem o contexto ou a função diferenciada de cada um. Isso é importante para evitar que o usuário fique confuso sobre qual ação cada elemento executa. Por exemplo, botões "Excluir" devem indicar o objeto a que estão associados, como "Excluir foto de perfil".

Utilize tecnologias assistivas para verificar se cada elemento é lido corretamente e de forma clara, possibilitando que os usuários identifiquem a função sem ambiguidade.

Ao escrever textos para botões ou links, descreva claramente a ação ou o objeto a que se refere, evitando termos genéricos como "Clique aqui". Use descrições específicas como "Enviar formulário de contato" ou "Baixar relatório de vendas".

POR VOCÊ TER ACESSADO ESTE REQUISTO

Recomenda-se

Requisitos para Botão

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 Botão

Requisitos para Link

Ver todos os 13 Requisitos sobre componentes com Link

Requisitos para Campo 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.

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

Requisitos para Controle

Ver todos os 25 Requisitos sobre componentes com Controle

Ramplifica

Início

Requisitos

Glossário

Sobre o Projeto

Início

Requisitos

Glossário

Sobre o Projeto

5.1.1.8 - Requisitos para descrição de elementos de interface interativos

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

Descrição completa e independente

Distinção de elementos repetidos

Validação com leitores de tela

Conteudistas

Recomenda-se

Ramplifica

Requisitos

Glossário

Sobre o Projeto