In this Article
Ordered and Unordered Lists
If you are seeing 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
With xyz letting 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 code snippet shows what a list's direct child looks like in the HTML of a page:
<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>
Hiding Semantics with the presentation Role - for more complicated lists needing 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
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!