Semantische Listen
Silktide prüft, ob Listenelemente auf Ihren Seiten als direkte Kindelemente ausschließlich Listeneinträge enthalten. Wenn andere Elemente direkt in einer Liste platziert werden, können die Anzahl der Einträge in der Liste falsch wiedergeben.
<!-- Falsch: Die divs verbergen Einträge vor Screenreadern -->
<ul>
<div class="group">
<li>Beispiel 1</li>
</div>
<div class="group">
<li>Beispiel 2</li>
<li>Beispiel 3</li>
</div>
</ul>
<!-- Korrigiert: Nur Listeneinträge direkt innerhalb der Liste -->
<ul>
<li>Beispiel 1</li>
<li>Beispiel 2</li>
<li>Beispiel 3</li>
</ul>
Warum das wichtig ist
Wenn ein eine Liste betritt, kündigt er an, wie viele Einträge die Liste hat – „Liste, 3 Einträge“ – was den Nutzenden verrät, wie viel Inhalt zu erwarten ist, und ihnen erlaubt, sie sicher zu überspringen. Umschließende Elemente innerhalb der Liste verfälschen diese Zählung: Im obigen Beispiel könnte eine Liste mit tatsächlich drei Einträgen als Liste mit zwei Einträgen angekündigt werden. Navigationsmenüs sind am häufigsten betroffen, da sie üblicherweise als Listen aufgebaut sind.
So beheben Sie das Problem
- Entfernen Sie umschließende Elemente wie
<div>oder<span>direkt innerhalb von<ul>- und<ol>-Elementen, sodass nur noch<li>-Einträge verbleiben. - Wenn Sie den Wrapper für die Gestaltung benötigen, verschieben Sie ihn in das
<li>, oder gestalten/stylen Sie die<li>-Elemente direkt. - Um eine Liste in eine andere zu verschachteln, platzieren Sie die innere
<ul>oder<ol>innerhalb eines übergeordneten<li>.
So testet Silktide dies
- Silktide findet jedes
<ul>- und<ol>-Element auf der Seite. - Untersucht die direkten Kindelemente jeder Liste.
- Kennzeichnet alle Kindelemente, die kein Listeneintrag (
<li>) oder eine verschachtelte Liste sind. Kommentare und Leerraum zwischen Einträgen sind unproblematisch und werden ignoriert.