Uso de listas
O que a norma pede
Listas são usadas só para agrupar itens de mesma natureza, e não como recurso de leiaute, como recuo ou alinhamento.
- 1.3.1 (A)
Parecido na NBR 17060
A NBR 17060 trata de aplicativos. Se o seu serviço também tem app, veja o que a Bússola da NBR 17060 diz sobre o mesmo assunto:
Visões por perfil
Escolha um perfil para ver o que o requisito pede de quem ocupa esse papel:
Agrupe em lista só itens da mesma natureza e não use lista para criar recuo ou marcador decorativo. Itens de tipos diferentes vão em blocos separados.
Bloco de contato
Um bloco reúne telefone, e-mail e endereço.
Errado: Lista misturada
Na especificação
Lista com: título “Fale conosco”, telefone, parágrafo sobre horários e botão “Enviar mensagem”.
A lista não tem itens de mesma natureza.
Certo: Lista coerente
Na especificação
Título fora da lista; lista com telefone, e-mail e endereço; botão depois.
A lista agrupa só os canais de contato.
Crie recuos e espaçamentos com margin e padding, e não com ul ou li. Coloque em li só os itens do grupo e não use role="list" em blocos de leiaute.
Recuo de um parágrafo
Um parágrafo de observação precisa aparecer recuado.
Errado: Lista para recuar
<ul><li>Observação: o prazo pode mudar.</li></ul>O leitor anuncia uma lista de 1 item sem motivo.
Certo: CSS para recuar
<p class="observacao">Observação: o prazo pode mudar.</p> /* .observacao { margin-left: 1.5rem; } */O recuo é visual; a estrutura continua correta.
Inclua o uso correto de listas no padrão de componentes e revise os templates antigos durante migrações. Listas usadas como leiaute geram anúncios falsos para quem usa leitor de tela.
Template legado
O template antigo usa listas para montar colunas.
Errado: Mantido na migração
Decisão
Template migrado sem mudança.
O leitor anuncia listas em toda a página.
Certo: Corrigido na migração
Decisão
Colunas refeitas com CSS grid; listas só onde há itens.
A estrutura fica limpa.
Percorra as listas da página com o leitor de tela e confira se os itens de cada uma são do mesmo tipo. Registre listas de um item só sem motivo e listas que contêm títulos ou blocos inteiros.
Bloco de observação
O leitor de tela chega a uma observação.
Errado: Lista falsa
Leitor de tela anuncia: “Lista, 1 item. Observação: o prazo pode mudar.”
Não há lista de fato.
Certo: Parágrafo
Leitor de tela anuncia: “Observação: o prazo pode mudar.”
O anúncio corresponde ao conteúdo.
Antes de criar uma lista, confira se todos os itens completam a mesma frase de introdução. Se não completarem, prefira um parágrafo; também não use lista para destacar uma frase só.
O que levar ao atendimento
A página lista o que levar.
Errado: Itens de natureza diferente
No editor
Leve: RG / Chegue 15 minutos antes / CPF / O atendimento é gratuito
Mistura documentos com orientações.
Certo: Itens paralelos
No editor
Leve: RG / CPF. Parágrafo: “Chegue 15 minutos antes. O atendimento é gratuito.”
A lista tem só documentos.