5.1.1.16 - Requisitos para elementos de interface de itens em sequência
Descrição
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.
Exemplo
Um formulário dividido em três etapas (dados pessoais, endereço residencial e endereço comercial) exibe de forma clara ao usuário a etapa atual de preenchimento e quantas etapas restantes ele ainda tem.
Desempenho funcional
Cenários para desenvolvimento de interfaces
Escolha um perfil para ver as orientações específicas:
Projete interfaces de paginação ou fluxos com múltiplas etapas, exibindo claramente o progresso, como números de páginas ou indicadores de passos, além de destacar o item ou página atual. Isso ajuda o usuário a entender onde está e quanto falta para concluir a interação.
Mostre onde a pessoa está na sequência
Indique a etapa atual, o total e o que falta.
Certo: Progresso explícito
anotação de especificação
Indicador "Etapa 2 de 3: Endereço", com etapas concluídas marcadas.
Errado: Progresso escondido
anotação de especificação
Só um botão "Próximo", sem indicar etapa atual nem total.
No código, implemente componentes de navegação com elementos que indicam o progresso atual, como barras de progresso ou contadores (por exemplo, "Página 1 de 5"), garantindo que esses elementos sejam acessíveis e compreensíveis, inclusive para usuários de tecnologias assistivas.
O que o leitor de tela anuncia
Exponha a posição atual no código, não só no visual.
Certo: Etapa atual marcada
<ol aria-label="Etapas do cadastro"> <li>Dados pessoais</li> <li aria-current="step">Endereço</li> <li>Pagamento</li> </ol>Leitor de tela anuncia: "Endereço, etapa atual, 2 de 3"
Errado: Etapa atual só por cor
<div class="passo">Dados</div> <div class="passo ativo">Endereço</div> <div class="passo">Pagamento</div>Leitor de tela anuncia: "Endereço": sem indicar que é a etapa atual
Aprenda a fazer com conteúdos selecionados para você
Certifique-se de que a equipe esteja alinhada em fornecer feedback claro sobre o progresso ao longo de itens paginados ou sequenciais, para que os usuários possam navegar de forma eficiente e com uma boa compreensão do processo.
Revise fluxos com várias etapas
Liste os fluxos e paginações e confira se todos situam a pessoa.
Checklist do requisito 5.1.1.16: fluxos sequenciais
- etapa X de Y
Cadastro em 3 etapas
formulário
- mostra intervalo
Lista de pedidos
paginação
- pendente
Galeria de fotos
carrossel
2 de 3 fluxos em conformidade, 1 pendente de revisão.
Exibir a quantidade total de etapas ou itens
Certificar-se de que o aplicativo mostra claramente o número total de etapas ou itens a serem percorridos em uma sequência.
Indicar o posicionamento atual
Garantir que o usuário veja claramente em qual etapa ou posição ele está durante a navegação em elementos sequenciais ou paginados. Isso pode ser feito por meio de números (ex.: “3 de 5”) ou indicadores visuais, como barras de progresso.
Incluir informações de intervalo
Quando aplicável, exibir a faixa de itens mostrada na página atual (ex.: “Mostrando 10-20 de 100”).
Implementar navegação clara
Criar botões e links de navegação com rótulos acessíveis que expliquem as ações (ex.: “Próxima página”, “Etapa anterior”), permitindo que os usuários saibam para onde estão indo.
Validar com tecnologias assistivas
Testar a funcionalidade com leitores de tela e outras ferramentas de assistência para confirmar que as informações de posição e etapa são lidas corretamente e situam o usuário.
Usar elementos de interface consistentes
Garantir que a apresentação dos elementos de interface seja consistente em todas as páginas ou etapas, evitando que o usuário fique confuso durante a navegação.
Testar a clareza visual e textual
Verificar se a disposição visual das informações sobre o posicionamento, número de etapas e itens está clara e de fácil compreensão em diferentes dispositivos e resoluções.
Percorra a sequência com leitor de tela
Avance e volte nas etapas e confira se a posição é anunciada.
Certo: Pessoa situada
"Etapa 2 de 3, Endereço"
"Mostrando 11 a 20 de 57 pedidos"
"Próxima página, botão"
Posição, intervalo e total sempre claros.
Errado: Pessoa perdida
"Endereço"
"Pedidos"
"Próximo, botão"
Não se sabe quanto falta.
Forneça descrições claras e consistentes nos rótulos de etapas ou páginas, garantindo que o usuário entenda facilmente o contexto, o número total de itens ou passos, e a etapa em que se encontra.
Nomeie as etapas e mostre o total
Use nomes que descrevam cada etapa e informe a contagem.
Certo: Etapa nomeada
indicador de etapa
"Etapa 2 de 3: Endereço de entrega"
Posição, total e assunto.
Errado: Etapa sem contexto
indicador de etapa
"Passo 2"
De quantos? Sobre o quê?
Requisitos relacionados
Outros requisitos que se aplicam aos mesmos componentes.