Ramplifica

Início

Requisitos

Glossário

Sobre o Projeto

Início

Requisitos

Glossário

Sobre o Projeto

5.1.1.4 - Requisito para elementos interativos e de interface

Descriçã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.
Exemplo : Um campo de formulário que exige o nome do usuário precisa ter um rótulo “Nome” relacionado ao campo que exige a entrada de texto.

Desempenho funcional

sem visão
com visão limitada
sem audição
com audição limitada
com cognição limitada

Componentes aplicáveis

Imagem
Vídeo
Campo de Formulário
Botão
Controle
Rótulo
Link

Cenários para desenvolvimento de interfaces

Designers

Assegure que todos os componentes interativos e de interface usados tenham rótulos claros e informativos, explicando a função ao usuário de forma que ele compreenda de forma familiar, concreta, com linguagem que lhe é adequada.

Desenvolvedores

Codifique os rótulos de maneira que estejam diretamente associados aos elementos interativos, usando atributos como aria-label ou aria-labelledby, conforme necessário. Isso assegura a correta interpretação dos rótulos por tecnologias assistivas.

Exemplo de código

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Exemplo Acessível</title> </head> <body> <!-- Campo de formulário com rótulo claro e relação com o campo --> <label for="nome">Nome completo:</label> <input type="text" id="nome" name="nome" placeholder="Ramplifica" aria-label="Digite seu nome completo"> <!-- Botão com rótulo claro que descreve sua funcionalidade --> <button type="submit" aria-label="Enviar formulário de cadastro"> Enviar</button> <!-- Campo de formulário com rótulo descritivo --> <label for="email">E-mail:</label> <input type="email" id="email" name="email" placeholder="exemplo@ramplifica.com" aria-label="Digite seu e-mail para contato"> </body> </html>

Gerentes

Garanta que a equipe configure rótulos para todos os elementos interativos e revise a aplicação para verificar se todos os componentes possuem rótulos informativos.

Testadores

Clareza e precisão dos rótulos

Valide se todos os elementos interativos (botões, campos de formulário, ícones, etc.) possuem rótulos que descrevem claramente sua funcionalidade e estado. Cada rótulo deve ser informativo e direto para que os usuários compreendam o propósito do elemento sem ambiguidade.

Associação programática

Verifique se os rótulos estão corretamente vinculados aos elementos interativos por meio de código, como o uso de aria-label, aria-labelledby, for (em rótulos de formulário), ou outras práticas de acessibilidade programática. Esse vínculo garante que tecnologias assistivas leiam corretamente os rótulos durante a navegação.

Consistência na navegação assistiva

Teste a navegação com leitores de tela e outros recursos de acessibilidade para assegurar que os rótulos dos elementos interativos estejam claros e que a descrição da funcionalidade, estado ou operação do elemento seja facilmente compreendida. Certifique-se de que os rótulos sejam consistentes e acessíveis em diferentes fluxos de navegação.

Conteudistas

Defina textos de rótulos compreensíveis, resumidos e descritivos para cada campo de formulário, botões e outros elementos interativos, explicando a função ou o estado quando aplicável, a ser aplicado por meio de código de programação.

POR VOCÊ TER ACESSADO ESTE REQUISTO

Recomenda-se

Requisitos para Imagem

5.1.1.1-Requisito para elementos não textuais
Elementos não textuais devem ter um texto alternativo que descreva o seu significado. Elementos não textuais, como imagens, cujo significado é essencial para a compreensão do que é exibido na tela, devem ter uma alternativa textual a ser interpretada por recursos de tecnologia assistiva. Elementos meramente decorativos devem ser ignorados por recursos de tecnologia assistiva.
5.1.1.6-Requisito para organização de elementos funcionais e nomes acessíveis
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
5.1.1.7-Requisitos para nomes acessíveis
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 15 Requisitos sobre componentes com Imagem

Requisitos para Campo de Formulário

5.1.1.7-Requisitos para nomes acessíveis
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.
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.
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.

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

Ramplifica

Acessibilidade para todos a partir da tecnologia

Requisitos

Glossário

Sobre o Projeto

© 2024 Erik Henrique da Costa Nunes.

Este site é produto da dissertação para Mestrado produzida por Erik Henrique da Costa Nunes, com Orientação da Dra. Ingrid Teixeira Monteiro e Co-orientação do Dr. David Campelo.

Foi construído no Mestrado em Computação da UFC em Quixadá.