Semantyczne listy
Silktide sprawdza, czy elementy list na Twoich stronach zawierają jako bezpośrednie elementy podrzędne wyłącznie elementy listy. Gdy inne elementy są umieszczane bezpośrednio wewnątrz listy, mogą nieprawidłowo informować o liczbie elementów listy.
<!-- Nieprawidłowo: elementy div ukrywają elementy przed czytnikami ekranu -->
<ul>
<div class="group">
<li>Przykład 1</li>
</div>
<div class="group">
<li>Przykład 2</li>
<li>Przykład 3</li>
</div>
</ul>
<!-- Poprawnie: bezpośrednio wewnątrz listy znajdują się tylko elementy listy -->
<ul>
<li>Przykład 1</li>
<li>Przykład 2</li>
<li>Przykład 3</li>
</ul>
Dlaczego to jest ważne
Gdy przechodzi do listy, informuje, ile elementów zawiera lista — „lista, 3 elementy” — co mówi użytkownikowi, jakiej ilości treści może się spodziewać, i pozwala mu pewnie ją pominąć. Elementy opakowujące wewnątrz listy zaburzają to liczenie: powyższy przykład może zostać ogłoszony jako lista dwóch elementów, choć w rzeczywistości zawiera trzy. Menu nawigacyjne jest najczęstszą ofiarą tego problemu, ponieważ zazwyczaj jest tworzone jako lista.
Jak to naprawić
- Usuń elementy opakowujące, takie jak
<div>lub<span>, znajdujące się bezpośrednio wewnątrz elementów<ul>i<ol>, tak aby pozostały tylko elementy<li>. - Jeśli element opakowujący jest potrzebny do stylizacji, przenieś go do wnętrza elementu
<li>lub ostyluj bezpośrednio elementy<li>. - Aby zagnieździć jedną listę w drugiej, umieść wewnętrzny element
<ul>lub<ol>wewnątrz nadrzędnego elementu<li>.
Jak Silktide to sprawdza
- Znajdź każdy element
<ul>i<ol>na stronie. - Sprawdź każde bezpośrednie dziecko listy.
- Oznacz każde dziecko, które nie jest elementem listy (
<li>) ani zagnieżdżoną listą. Komentarze i białe znaki między elementami są dozwolone i ignorowane.