Semantische lijsten
Silktide controleert of lijstelementen op je pagina's uitsluitend lijstitems als directe kinderen bevatten. Wanneer andere elementen rechtstreeks in een lijst worden geplaatst, kan onjuist rapporteren hoeveel items de lijst bevat.
<!-- Fout: de divs verbergen items voor schermlezers -->
<ul>
<div class="group">
<li>Voorbeeld 1</li>
</div>
<div class="group">
<li>Voorbeeld 2</li>
<li>Voorbeeld 3</li>
</div>
</ul>
<!-- Opgelost: alleen lijstitems rechtstreeks in de lijst -->
<ul>
<li>Voorbeeld 1</li>
<li>Voorbeeld 2</li>
<li>Voorbeeld 3</li>
</ul>
Waarom dit belangrijk is
Wanneer een een lijst opent, kondigt deze aan hoeveel items de lijst bevat — "lijst, 3 items" — zodat de gebruiker weet hoeveel inhoud hij of zij kan verwachten en de lijst vol vertrouwen kan overslaan. Wrapper-elementen in de lijst verstoren deze telling: in het bovenstaande voorbeeld kan een lijst met twee items worden aangekondigd, terwijl de lijst in werkelijkheid drie items bevat. Navigatiemenu's zijn het meest voorkomende slachtoffer, omdat ze meestal als lijsten worden opgebouwd.
Zo los je het op
- Verwijder wrapper-elementen zoals
<div>of<span>die rechtstreeks in<ul>- en<ol>-elementen staan, zodat alleen<li>-items overblijven. - Als je de wrapper nodig hebt voor de opmaak, verplaats deze dan naar binnen in het
<li>-element of pas de opmaak rechtstreeks op de<li>-elementen toe. - Als je de ene lijst in een andere lijst wilt nesten, plaats je de binnenste
<ul>of<ol>in een bovenliggend<li>-element.
Hoe Silktide dit controleert
- Zoek elk
<ul>- en<ol>-element op de pagina. - Bekijk alle directe kinderen van elke lijst.
- Markeer elk kind dat geen lijstitem (
<li>) of geneste lijst is. Opmerkingen en witruimte tussen items zijn toegestaan en worden genegeerd.