HTML Guide for li

Due to an issue in the W3C validator, this is identified as an error but it’s not. This issue has been notified, and we’ll update our validator as soon as there’s a fix.

According to the WAI-ARIA 1.2 spec:

The aria-setsize property defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.

Authors MUST set the value of aria-setsize to an integer equal to the number of items in the set. If the total number of items is unknown, authors SHOULD set the value of aria-setsize to -1.

A <li> element, used to define a list item, does not accept the button role.

This HTML code is invalid because the <li> elements can’t have role="button":

<ul>
  <li role="button">One</li>
  <li role="button">Two</li>
</ul>

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.

A textbox role is not valid for a li (list item) element. If the intention is to create a textual input area, a different approach, such as using the input element or the textarea element, is recommended.

The textbox role is used to identify an element that allows the input of free-form text. Whenever possible, rather than using this role, use an <input> element with type="text", for single-line input, or a <textarea> element for multi-line input.

Here’s an example of how to use the textbox role on a <div> element:

<!-- Simple text input field -->

<div id="txtboxLabel">Enter your five-digit zipcode</div>
<div
  role="textbox"
  contenteditable="true"
  aria-placeholder="5-digit zipcode"
  aria-labelledby="txtboxLabel"></div>

A closing tag </li> has been found, but there were open elements nested inside the <li>. You need to close the nested elements before you close the <li>.

A closing tag </li> has been found, but there were open elements nested inside the <li>. You need to close the nested elements before you close the <li>.

For example:

<li>
  <span>example
</li>

The above is invalid because you need to close the <span> tag before you close the <li>.

This would be valid:

<li>
  <span>example</span>
</li>

A <li> element is used to define an item of a list, so adding the listitem role to it is redundant.

The ARIA listitem role can be used to identify an item inside a list of items. It is normally used in conjunction with the list role, which is used to identify a list container.

<section role="list">
  <div role="listitem">List item 1</div>
  <div role="listitem">List item 2</div>
  <div role="listitem">List item 3</div>
</section>

When possible, you should use the appropriate semantic HTML elements to mark up a list and its list items — <ul> or <ol>, and <li>. For example:

<ul>
  <li>List item 1</li>
  <li>List item 2</li>
  <li>List item 3</li>
</ul>