Semantic lists
Silktide tests that list elements on your pages contain only list items as their direct children. When other elements are placed directly inside a list, can misreport how many items the list contains.
<!-- Wrong: the divs hide items from screen readers -->
<ul>
<div class="group">
<li>Example 1</li>
</div>
<div class="group">
<li>Example 2</li>
<li>Example 3</li>
</div>
</ul>
<!-- Fixed: only list items directly inside the list -->
<ul>
<li>Example 1</li>
<li>Example 2</li>
<li>Example 3</li>
</ul>
Why this matters
When a enters a list, it announces how many items the list has - "list, 3 items" - which tells the user how much content to expect and lets them skip past it with confidence. Wrapper elements inside the list break that count: the example above may announce as a list of two items when it really has three. Navigation menus are the most common casualty, as they are typically built as lists.
How to fix it
- Remove wrapper elements such as
<div>or<span>from directly inside<ul>and<ol>elements, so only<li>items remain. - If you need the wrapper for styling, move it inside the
<li>, or style the<li>elements directly. - To nest one list inside another, place the inner
<ul>or<ol>inside a parent<li>.
How Silktide tests this
- Find every
<ul>and<ol>element on the page. - Examine each of the list's direct children.
- Flag any child that is not a list item (
<li>) or a nested list. Comments and whitespace between items are fine and are ignored.