Ordered and Unordered Lists
If you see a flag related to an unordered <ul> or ordered <ol> list, check the following:
Lists must only directly contain
<li>,<script>or<template>content elements.Sometimes you will see the following:
List element has direct children that are not allowed: xyz
Withxyzletting you know which element was found that cannot be a direct child of a list.List items,
<li>, must be wrapped inside of<ul>or<ol> parent elements. If they aren't, the screen reader cannot inform the listener they are listening to a list.
Examples
The following bad code snippet shows an incorrect direct child of a <ul> , the <p>, in the HTML of a page:
Flagged:
<ul>
<li>Child Element 1 </li>
<li>Child Element 2 </li>
<li>Child Element 3 </li>
<p> This paragraph is also a child element of the <ul>, but is not allowed
as a direct child of an unordered list. </p>
<li>Child Element 4 </li>
</ul>
Corrected by fixing HTML elements:
<ul>
<li>Child Element 1 </li>
<li>Child Element 2 </li>
<li>Child Element 3 </li>
<li><p> This paragraph is also a child element of the <ul>, but is not
allowed as a direct child of an unordered list. </p></li>
<li>Child Element 4 </li>
</ul>
Hiding Semantics with the presentation Role - for more complicated lists that need to override the semantic structure of a list
Definition Lists
Correctly structured definition lists <dl> follow the format below.
<dl>
<dt>term</dt>
<dd>
definition for term
</dd>
<dt>term</dt>
<dd>
definition for term
</dd>
</dl>
If you have a flag related to a definition list, check the following:
Ensure the list has a
<dl>parent element<dl>elements must only directly contain properly-ordered<dt>and<dd>groups,<script>, <template>or<div>elementsWhen not empty, the
<dl>element must have at least one<dt>element followed by at least one<dd>element
Nested Lists
If you use a list embedded within another list, it is crucial to pay attention to the syntax. If you don't nest the lists correctly, the list won't be correctly relayed to accessible browsers. The most common errors we see are
not using a closing tag for the 'second-level' list before continuing with the first-level list, or
not closing the list item (</li>) before continuing the top-level list, example below.
Semantically incorrect list:
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
<li>Vegetables
</li>
</ul>
The nested Fruits list above is missing the closing </li> tag that is needed before continuing to list Vegetables.
Semantically correct list:
<ul>
<li>Fruits
<ul>
<li>Apple</li>
<li>Banana</li>
</ul>
</li>
<li>Vegetables
</li>
</ul>
Learn about Semantically Correct Lists: The Basics.
Resources
Basic HTML Lesson on Creating Lists from MDN web docs
Learn about Semantics in HTML from MDN web docs
Learn More with WCAG
DubBot Flags:
Ensures that lists are structured correctly, <ul> and <ol> must only contain <li>, <script>, or <template elements>
Ensures <li> elements are used semantically, <li> elements must be contained in a <ul> or <ol>.
If you have questions, please contact our DubBot Support team via email at help@dubbot.com or via the blue chat bubble in the lower right corner of your screen. We are here to help!