用途
该技能用于确保 HTML 文档中的列表项 <li> 元素始终位于合法的列表容器内，从而保证屏幕阅读器能够正确播报列表结构和项目数量。它属于前端可访问性检查规则，适用于代码审查、可访问性审计以及日常前端开发中的结构校验。
主要能力
- 检查 DOM 中所有
<li>元素的直接父元素是否为<ul>、<ol>或<menu>。 - 标记父元素为
<div>、<section>、<nav>、<span>或其他非列表容器的孤立<li>。 - 检查
role='listitem'元素，确保其最近的列表相关角色祖先是role='list'。 - 识别因
list-style: none导致浏览器移除列表语义的情况，并提示通过添加role='list'恢复语义。
使用方式
在代码审查或可访问性检查流程中，扫描渲染后的标记和交互状态，定位违反规则的 <li> 元素、角色、标签、焦点行为或键盘交互，并记录如何通过浏览器可访问性工具或辅助技术验证修复效果。完整实现细节、代码示例和框架特定指南参见 references/rule.md。规则页面：https://frontendchecklist.io/en/rules/accessibility/listitem
适用场景
- 前端代码审查中检查列表结构合法性。
- 可访问性审计中验证屏幕阅读器能否正确播报列表。
- 使用自定义 ARIA 列表时确保角色归属正确。
- 导航菜单等使用
list-style: none的场景中恢复列表语义。
限制
该技能仅针对 <li> 元素与列表容器的结构关系及 ARIA 角色归属进行检查，不涉及其他可访问性规则。具体修复需结合项目实际框架和标记结构。资料中未提供收费、价格、平台或效果相关信息。