Skip to main content
Version: v6

We detected an element functioning as a list item missing a list item role

We detected an element functioning as a list item missing a list item role — rule summary
FieldValue
Rule codeManual_ListItem_Role_Missing
WCAG conformance levelA
WCAG success criterion4.1.2 Name, Role, Value
Must be fixed at sourceNo

Description

When custom elements are used to create list-like functionality, they must be assigned the appropriate ARIA role to ensure that assistive technologies understand their purpose. Without the proper role, users of screen readers and other assistive technologies may be unable to identify these elements correctly.

How to fix

When creating custom listitem elements, always add role="list" and appropriate ARIA attributes to ensure accessibility:

<div class="custom-list" 
role="list"
> <div class="custom-listitem"
role="listitem"
> Whenever possible, use the native <li> elements instead of creating custom listitems, as it provides built-in accessibility and behavior.