Semantiska listor
Silktide testar att listelementen på dina sidor endast innehåller listelement som direkta underordnade element. När andra element placeras direkt i en lista kan felaktigt rapportera hur många element listan innehåller.
<!-- Fel: div-elementen döljer listelement för skärmläsare -->
<ul>
<div class="group">
<li>Exempel 1</li>
</div>
<div class="group">
<li>Exempel 2</li>
<li>Exempel 3</li>
</div>
</ul>
<!-- Korrigerat: endast listelement direkt i listan -->
<ul>
<li>Exempel 1</li>
<li>Exempel 2</li>
<li>Exempel 3</li>
</ul>
Varför detta är viktigt
När en kommer till en lista meddelar den hur många element listan innehåller – ”lista, 3 element” – vilket berättar för användaren hur mycket innehåll de kan förvänta sig och gör att de tryggt kan hoppa förbi det. Omslutande element i listan bryter denna räkning: exemplet ovan kan meddelas som en lista med två element när den i själva verket innehåller tre. Navigeringsmenyer drabbas oftast, eftersom de vanligtvis byggs som listor.
Så här åtgärdar du problemet
- Ta bort omslutande element som
<div>eller<span>direkt inuti<ul>- och<ol>-element, så att endast<li>-element återstår. - Om du behöver det omslutande elementet för formgivning kan du flytta det inuti
<li>eller formge<li>-elementen direkt. - Om du vill kapsla en lista i en annan placerar du den inre
<ul>- eller<ol>-listan inuti ett överordnat<li>-element.
Så testar Silktide detta
- Hitta alla
<ul>- och<ol>-element på sidan. - Undersök varje lists direkta underordnade element.
- Flagga alla underordnade element som inte är ett listelement (
<li>) eller en kapslad lista. Kommentarer och blanksteg mellan element är tillåtna och ignoreras.