Inappropriate List Item Check

Description

The “Inappropriate List Item Check” evaluates whether there is any <li> (list item) element that is not contained within a valid list structure.

Example outcome

I located 1 <li> element that is not contained within a list.

Impact

• Visual Impairments: Screen readers will not interpret the <li> element correctly if it’s outside a list, leading to loss of context or misinterpretation.
• Cognitive Disabilities: Users may fail to recognize that the content is part of a list, reducing comprehension of the structure.
• Learning Disabilities: Misplaced list items make it difficult for users to understand the relationship between items, increasing cognitive load.

Fixes

To address inappropriate <li> elements:

1. Locate the inappropriate <li> element.
2. Wrap it with a list strcture element, if it should be inside a list.
3. Replace the <li> tag with one that correctly serves the purpose, if not.

Resources

• WCAG 2.2: Understanding Success Criteria 1.3.1
• WCAG 2.2 Techniques: Technique H48: Using ol, ul and dl for lists or groups of links
• WebAIM: Semantic Structure: Regions, Headings, and Lists