Use correct list structure
SkillMedialist-structure is a skill for AI agents that reviews rendered HTML, interactive components, and design-system patterns for correct list markup. It checks that lists use proper native semantics so assistive technology reads them correctly, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
Available today. Use it from your connected AI after setup.
No other account needed.
Have an AI agent set up that can load skills.
Then ask your AI: use the Use correct list structure skill
What your AI can do with it
- Review rendered HTML for correct list structure
- Check interactive components and design-system patterns for list semantics
- Verify native semantic markup is used before alternatives
- Inspect keyboard behavior of list components
- Check focus flow and accessible names
- Assess screen-reader output where relevant
Getting started
- Have an AI agent set up that can load skills.
- Add the list-structure skill to the agent's available skills.
- Ask the agent to review a rendered page, component, or design-system pattern for correct list structure.
- Review the agent's findings on semantics, keyboard behavior, focus flow, accessible names, and screen-reader output.
What this skill tells your AI
The instructions your AI receives, as published by thedaviddias/front-end-checklist in skills/list-structure/SKILL.md and read by ahel’s review.
Screen readers rely on a specific parent-child relationship for lists to correctly announce the number of items and the user's current position within the list.
Quick Reference
- Unordered (
<ul>) and ordered (<ol>) lists must only contain<li>elements - Do not put other elements like
<div>or<p>directly inside a list - Ensure nested lists are also properly contained within an
<li>element
Check
Check the structure of all lists to ensure only <li> elements are direct children of <ul> or <ol>.
Fix
Remove or move any non-li elements from within <ul> and <ol> tags.
Explain
Explain why assistive technology needs a consistent list structure to provide accurate navigation information.
Code Review
Review the rendered markup and interactive states that affect Use correct list structure. Flag exact elements, roles, labels, focus behavior, or keyboard interactions that violate the rule, and note how to verify the fix with browser accessibility tooling or assistive tech.
For full implementation details, code examples, and framework-specific guidance,
see references/rule.md.
Rule page: https://frontendchecklist.io/en/rules/accessibility/list-structure
Signals
- GitHub stars
- 74k
- Forks
- 7k
- Last commit
- Aug 2026
Questions
- When should this skill be used?
- Use it when reviewing rendered HTML, interactive components, or design-system patterns related to correct list structure.
- What does it check first?
- It checks native semantics first, then inspects keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.
- Why does list semantics matter?
- Proper semantic markup lets assistive technology read lists correctly to users.
Advanced
- Item type
- skill
- Key
list-structure- Source
- github.com/thedaviddias/front-end-checklist