List Item Check

Description

The “List Item Check” evaluates whether all <li> (list item) elements are placed within a valid list structure.

Example outcome

I noticed that all <li> elements are contained within a list.

Impact

• Visual Impairments: Screen readers may fail to correctly interpret and announce the list structure if <li> elements are not properly enclosed.
• Cognitive Disabilities: Users may struggle to understand the relationship between list items if the structure is broken.
• Learning Disabilities: Misplaced list items can confuse users, making it difficult to comprehend the content.

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