OpenParable
Skip to content
← Back to skills

List Structure

Design
list-structure

List Structure is an Agent Skill for design published in the thedaviddias/Front-End-Checklist repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Use correct list structure. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

View on GitHub ↗
QUICK START

How to use this skill

Bring this guide into your coding agent with a prompt tailored to the tool you use.

  1. Open your project in Codex.
  2. Copy and paste the prompt below.
  3. Review files and risks before approving any action.
Prompt to paste
Inspect the Agent Skill at https://github.com/thedaviddias/Front-End-Checklist/blob/HEAD/skills/list-structure/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/list-structure, but wait for my approval before writing files or running scripts.

Copying this prompt does not install or run the skill. Review third-party files before use.

Use correct list structure

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