About This HTML Issue
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>
<li role="tab">Dashboard</li>
<li role="tab">Settings</li>
<li role="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:
<div role="tablist">
<button role="tab" aria-selected="true">Dashboard</button>
<button role="tab" aria-selected="false">Settings</button>
<button role="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>
Find issues like this automatically
Rocket Validator scans thousands of pages in seconds, detecting HTML issues across your entire site.