On each web page, is each list correctly structured?
A screen reader like NVDA announces "list of 4 items" when it encounters a <ul>. Without semantic markup, the user receives a sequence of texts with no indication that they are linked together. The structure disappears, so does navigation.
RGAA distinguishes three types of lists. Unordered lists use <ul> and <li> — or role="list" with role="listitem" on child elements. Ordered lists use <ol> and <li>, with the same possible ARIA alternative. Description lists must use <dl>, <dt>, and <dd> — no ARIA equivalent is accepted for this type.
In practice, identify anything that looks like a list visually — bullets, numbers, feature grids, glossaries, navigation menus — and verify that the code reflects this structure. CSS doesn't count: adding list-style to <div> creates the appearance of a list, never its semantics.
What you see as a list must also be one in the code.
3 tests to verify the correct marking of lists
Unordered list <ul>
- Identify on the page all blocks of items presented visually as an unordered list (with bullets, icons, or simple vertical grouped alignment).
- For each list identified, verify that the structure uses one of these two approaches:
<ul>containing<li>,- a parent element with
role="list"whose all direct children haverole="listitem".
- If each unordered list respects one of these two structures, the test is validated. A single deviation fails it.
Ordered list <ol>
- Identify on the page all blocks of items presented visually as an ordered list (numbered, or whose order has meaning: process steps, ranking, procedure).
- For each list identified, verify that the structure uses one of these two approaches:
<ol>containing<li>,- a parent element with
role="list"whose all direct children haverole="listitem".
- If each ordered list respects one of these two structures, the test is validated.
Description list <dl>
- Identify on the page all blocks presented as a description list: glossaries, term/definition pairs, contact data (name/value), structured FAQs.
- For each list identified, verify that the structure mandatorily uses
<dl>as container,<dt>for each term, and<dd>for each associated description. - Unlike unordered and ordered lists, no ARIA alternative is accepted for this type. If each description list uses
<dl>/<dt>/<dd>, the test is validated.
Examples
❌ Non-compliant : Visual list implemented with <div>
<div class="features">
<div class="feature-item">Mobile compatibility</div>
<div class="feature-item">Automatic updates</div>
<div class="feature-item">24/7 support</div>
</div>Visually, these three items form a list. But a screen reader reads three independent text blocks: no announcement of "list of 3 items", no way to navigate from item to item with dedicated shortcuts. Semantic structure is missing.
✅ Compliant : Same content structured with <ul> and <li>
<ul class="features">
<li>Mobile compatibility</li>
<li>Automatic updates</li>
<li>24/7 support</li>
</ul>NVDA announces "list of 3 items" on entry, then "item 1", "item 2", etc. The user knows they are navigating a group of related items and can jump from one list to another.
❌ Non-compliant : Description list with incorrect structure
<dl>
<li>NVDA</li>
<li>Screen reader for Windows, free</li>
<li>VoiceOver</li>
<li>Screen reader built into macOS and iOS</li>
</dl><li> is not a valid child of <dl>. The markup is incorrect HTML and the term/description relationship is lost. A screen reader cannot announce that NVDA and its definition are linked.
✅ Compliant : Description list correctly structured with <dl>, <dt>, and <dd>
<dl>
<dt>NVDA</dt>
<dd>Screen reader for Windows, open source and free</dd>
<dt>VoiceOver</dt>
<dd>Screen reader built into macOS and iOS</dd>
</dl>NVDA announces each term (<dt>) followed by its description (<dd>). The user immediately understands the relationship between the software name and its definition. Navigation between definitions is possible with screen reader shortcuts.
Tips and pitfalls
⚠️ list-style: none may lose semantics in Safari
When you remove bullets with list-style: none, Safari with VoiceOver may no longer report the element as a list. This is known behavior: Apple considers a <ul> without bullets not to be presented as a list. To avoid this problem, explicitly add role="list" to the affected <ul> or <ol> element.
⚠️ role="list" without role="listitem" on children
Using role="list" on the container but forgetting role="listitem" on child elements makes test 9.3.1 or 9.3.2 non-compliant. Both attributes are inseparable: the ARIA structure must be complete to be valid.
⚠️ No ARIA equivalent for <dl>
Unlike unordered and ordered lists, description lists have no ARIA alternative accepted by RGAA 9.3.3. If you implement a description list with <div> and roles, the test fails systematically. Use <dl>, <dt>, and <dd>, period.
💡 A list with one item remains compliant
RGAA does not set a minimum number of items. A <ul> with a single <li> is valid. If your content is by nature an enumeration that can sometimes be reduced to one item (search results, tags, categories), keep the list structure without condition on the number of items.
⚠️ Navigation menus are lists
A navigation menu is a list of links. RGAA 9.3 applies: the <nav> must contain a <ul> with <li> elements. This is a common error on horizontal menus built with <div> and direct <a> elements, where the visual menu appearance masks the absence of semantic structure.
Frequently asked questions
Why can a list with a single item be problematic according to RGAA?
It doesn't. Criterion 9.3 specifies no minimum number of items. A list with a single <li> is semantically valid. If the content naturally represents an enumeration (even if circumstantially reduced to one), keep the list structure. The announcement "list of 1 item" may seem redundant, but it is correct.
How do you audit RGAA criterion 9.3 on lists on a web page?
In your browser's DevTools, visually look for areas that resemble lists (feature grids, menus, glossaries, steps, results) and inspect the HTML. The presence of <div> or <span> where you expect <ul>, <ol>, or <dl> is an immediate warning sign. You can also use an accessibility bookmarklet or Firefox's accessibility inspector to visualize the semantic tree.
What is the difference between role="list" and <ul> or <ol> tags for RGAA?
Yes, for unordered lists (test 9.3.1) and ordered lists (test 9.3.2): role="list" on the container with role="listitem" on each child is a valid alternative. However, for description lists (test 9.3.3), no ARIA alternative is accepted. Only <dl>, <dt>, and <dd> allow validation of this test.
Why can hiding bullets with CSS (list-style: none) be a RGAA problem?
It's not, from the perspective of criterion 9.3: RGAA evaluates HTML structure, not visual appearance. Removing bullets with CSS remains compliant. But on Safari with VoiceOver, this style can lose list semantics. Add role="list" to the <ul> element to ensure correct rendering on all screen readers.
How does RGAA criterion 9.3 apply to link lists in a <nav>?
Yes. A navigation menu is a list of links, and criterion 9.3 applies to it. The correct structure is <nav> containing a <ul> with <li> and <a> elements. Building a menu with <div> and direct <a> elements without <ul> or <li> is a non-compliance with test 9.3.1.