HTML Guides for ol

An <li> element inside a <ul>, <ol>, or <menu> must not be assigned any ARIA role other than listitem.

When an <li> sits inside a standard list container (<ul>, <ol>, or <menu>) that has no explicit role attribute, the browser already treats the <li> as having an implicit role of listitem. Assigning a different role, such as role="presentation", role="option", or role="tab", contradicts the semantics of the parent-child relationship between the list and its items. Screen readers and other assistive technologies rely on this relationship to convey list structure to users.

The same restriction applies when the parent element has role="list" set explicitly. In that context, child <li> elements are still expected to carry only the listitem role.

If you need a different role on the items, restructure the markup. For example, use <div> elements instead of <ul> and <li>, and apply the appropriate roles directly. Or, if the items genuinely are list items, remove the conflicting role attribute.

Examples

Invalid: li with a non-listitem role inside a ul

<ul>

<lirole="tab">Dashboard</li>

<lirole="tab">Settings</li>

<lirole="tab">Profile</li>

</ul>

Fixed: use appropriate elements when a different role is needed

If the items are tabs, drop the list markup and use elements that match the intended semantics:

<divrole="tablist">

<buttonrole="tab"aria-selected="true">Dashboard</button>

<buttonrole="tab"aria-selected="false">Settings</button>

<buttonrole="tab"aria-selected="false">Profile</button>

</div>

Fixed: keep the list but remove the conflicting role

If the content really is a list, remove the extra role:

<ul>

<li>Dashboard</li>

<li>Settings</li>

<li>Profile</li>

</ul>

Text content cannot be placed directly inside an ol element. All text within an ordered list must be wrapped in li elements.

The ol element accepts only li, script, and template elements as children. Any bare text node placed directly between <ol> and </ol> (or between </li> and <li>) is invalid. This includes whitespace-only text nodes in some edge cases, but the validator typically flags visible text content.

This error often appears when list items are missing their <li> tags, or when extra text (like a heading or description) is placed inside the ol instead of before or after it.

Invalid example

<ol>

Some introductory text

<li>First item</li>

<li>Second item</li>

</ol>

Valid example

Move the text outside the ol, or wrap each piece of text in an li element:

<p>Some introductory text</p>

<ol>

<li>First item</li>

<li>Second item</li>

</ol>

The role="list" attribute is redundant on an <ol> element because it already has an implicit ARIA role of list.

HTML elements come with built-in (implicit) ARIA roles that convey their purpose to assistive technologies. The <ol> and <ul> elements both have an implicit role of list, so explicitly adding role="list" is unnecessary and creates noise in your markup.

That said, there's a well-known reason some developers add this role intentionally. Safari removes list semantics when list-style: none is applied via CSS. Adding role="list" is a common workaround to restore those semantics for VoiceOver users. If this is your situation, the W3C warning is technically correct but you may choose to keep the role for accessibility reasons.

If you don't need the Safari workaround, simply remove the role attribute.

Before

<olrole="list">

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>

After

<ol>

<li>First item</li>

<li>Second item</li>

<li>Third item</li>

</ol>