HTML Guide for list

To fix this issue, ensure that an element with role="listitem" is contained within an element with role="list" or role="group". Here’s how you can structure your HTML correctly:

Incorrect Example

<div role="listitem">Item 1</div>
<div role="listitem">Item 2</div>

Correct Example

<div role="list">
  <div role="listitem">Item 1</div>
  <div role="listitem">Item 2</div>
</div>

Alternatively, you can use role="group" if it’s a nested list.

Correct Example with Nested List

<div role="list">
  <div role="listitem">Item 1</div>
  <div role="group">
    <div role="listitem">Item 1.1</div>
    <div role="listitem">Item 1.2</div>
  </div>
  <div role="listitem">Item 2</div>
</div>

This ensures that the role="listitem" elements are correctly contained.

Use a valid landmark or list role: remove role="list" from the section, or replace the element with a proper list (ul/ol) or a container that supports role="list".

The role attribute must use values allowed by ARIA for the given context. A section element is a landmark and must not be given role="list". If you intend to mark up a list of items, use semantic list elements: ul/ol with li. If you truly need ARIA list semantics (e.g., for custom components), use a neutral container (div) with role="list" and child elements with role="listitem". Prefer native HTML lists over ARIA roles because they provide built-in semantics and better accessibility. Examples:

• Native list: use ul + li.
• ARIA list (only if native markup isn’t possible): div role="list" containing div role="listitem".

HTML Examples

Example showing the validation error

<section role="list">
  <div>Item A</div>
  <div>Item B</div>
</section>

Fixed using native list semantics (recommended)

<ul>
  <li>Item A</li>
  <li>Item B</li>
</ul>

Fixed using ARIA roles on neutral elements (when custom UI prevents native lists)

<div role="list">
  <div role="listitem">Item A</div>
  <div role="listitem">Item B</div>
</div>

Remove the role="list" attribute from the ul element.

The ul (unordered list) element is inherently recognized as a list in HTML. As such, it is automatically associated with the semantic role of a list. Adding role="list" to a ul is redundant and can also confuse browsers and screen readers, potentially leading to inconsistent behavior or impaired accessibility. This attribute is unnecessary because the list role is implicitly defined for this element through HTML specifications, and W3C HTML validation flags it to ensure semantic clarity and best practices.

Example of Incorrect role Usage:

<ul role="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

Corrected Example Without Unnecessary role:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

By excluding the role="list", the code adheres to semantic clarity and best practices, complying with W3C standards while maintaining accessibility.