HTML Guide for group

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.

The value group is not a valid value for the role attribute on an li element according to the W3C HTML specification.

The role attribute defines the semantic purpose of an element for assistive technologies. Common valid ARIA roles for li elements are listitem, not group. The role group is intended for container elements such as ul, ol, or div when grouping related widgets, not for individual list items.

To fix this, remove the role="group" attribute from the li element.

Incorrect:

<ul>
  <li role="group">Item 1</li>
  <li role="group">Item 2</li>
</ul>

Correct:

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

For most cases with HTML lists, native semantics suffice and no role attribute is needed for li.

This W3C HTML Validator issue indicates that you have assigned a role="group" attribute to a <fieldset> element. In HTML, the <fieldset> element already has an implicit role of group so it’s redundant and unnecessary to explicitly specify it.

To resolve this issue, you simply need to remove the role="group" attribute from the <fieldset> element.

Example of the Issue

Here is an example of problematic HTML:

<form>
  <fieldset role="group">
      <legend>Personal Information</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="age">Age:</label>
      <input type="number" id="age" name="age">
  </fieldset>
</form>

Fixed HTML

To fix this issue, remove the role="group" attribute from the <fieldset> element:

<form>
  <fieldset>
      <legend>Personal Information</legend>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name">
      <br>
      <label for="age">Age:</label>
      <input type="number" id="age" name="age">
  </fieldset>
</form>