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.

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.