Listas semânticas
A Silktide verifica se os elementos de lista nas suas páginas contêm apenas itens de lista como filhos diretos. Quando outros elementos são colocados diretamente dentro de uma lista, a pode informar incorretamente quantos itens a lista contém.
<!-- Incorreto: as divs ocultam os itens dos leitores de ecrã -->
<ul>
<div class="group">
<li>Exemplo 1</li>
</div>
<div class="group">
<li>Exemplo 2</li>
<li>Exemplo 3</li>
</div>
</ul>
<!-- Corrigido: apenas itens de lista diretamente dentro da lista -->
<ul>
<li>Exemplo 1</li>
<li>Exemplo 2</li>
<li>Exemplo 3</li>
</ul>
Por que isso é importante
Quando um entra numa lista, anuncia quantos itens ela contém — "lista, 3 itens" —, o que informa ao utilizador quanto conteúdo esperar e permite avançar pela lista com confiança. Os elementos de agrupamento dentro da lista interrompem essa contagem: o exemplo acima pode ser anunciado como uma lista de dois itens quando, na realidade, tem três. Os menus de navegação são os mais afetados, pois normalmente são criados como listas.
Como corrigir
- Remova elementos de agrupamento, como
<div>ou<span>, de dentro de elementos<ul>e<ol>, para que restem apenas itens<li>. - Se precisar do elemento de agrupamento para aplicar estilos, mova-o para dentro do
<li>ou aplique os estilos diretamente aos elementos<li>. - Para aninhar uma lista dentro de outra, coloque a
<ul>ou<ol>interna dentro de um<li>pai.
Como a Silktide faz esta verificação
- Encontra todos os elementos
<ul>e<ol>na página. - Examina cada filho direto da lista.
- Sinaliza qualquer filho que não seja um item de lista (
<li>) nem uma lista aninhada. Comentários e espaços em branco entre os itens são permitidos e ignorados.