免费在 GitHub 公开中文介绍

dlitem

检查表示术语与说明的HTML结构，协助将单独使用的dt、dd元素归入dl，并提供验证方法，确认屏幕阅读器等辅助技术能识别两者的关系。

原文查看原文说明

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

thedaviddias/Front-End-Checklist

AI 评分100分/ 100 查看安装方法

适用场景

检查术语表的HTML结构
审查并列展示名称和值的结构
修复未包含在dl中的dt和dd
用辅助技术验证术语与说明的关系

中文介绍

功能

此技能检查表示术语与说明的HTML，协助整理为适当的列表结构。它会查找表示术语的<dt>和表示说明的<dd>，确认这些元素是否缺少包围它们的<dl>。发现单独使用的元素后，会指出具体对象，协助将相关的术语与说明组合到<dl>中，并解释为什么需要这种结构。还会提供使用浏览器无障碍检查工具或屏幕阅读器验证修改结果的方法。

适用场景

适合审查术语表，或将项目名称与值并列展示的元数据。页面外观未必能反映HTML中是否存在正确的语义关联，因此也适合检查视觉呈现背后的结构，让辅助技术能够将术语与相应说明联系起来。

使用示例

“找出这个术语表中位于<dl>之外的<dt>和<dd>，并修复结构。”
“检查这些项目名称与说明的排列，告诉我如何用屏幕阅读器验证它们的关系。”

注意事项

没有特别注意事项。

本介绍由 AI（OpenAI Codex）根据公开的 SKILL.md 撰写。准确的规格请查看下方原文。

客观评估

AI 仅根据 SKILL.md 的内容，从 4 个方面进行了评估。星标数和热度不计入评估。

指令清晰度能否看出何时使用、做什么: A良好明确说明查找dl之外的dt和dd元素，并用dl包围它们。
步骤具体性步骤、输入输出和示例是否具体: A良好指定查找目标元素、用dl包围、解释结构，并通过辅助技术验证。
安全性发送数据、删除文件、执行命令等是否有说明: A良好修复内容为用dl包围dt和dd，不涉及外部发送、删除或凭据操作。
安装难易度所需工具和 API 密钥是否少且有说明: A良好涉及HTML、浏览器无障碍工具或辅助技术，未要求API密钥或专用服务。

总分按每项 A=25 分、B=15 分、C=5 分相加。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

如果您认为评估有误，请申请复核

包含的文件（2）

SKILL.md1.7 KB
references/rule.md2.9 KB

SKILL.md（原文）

安装前可以查看交给 AI 代理的指令内容。

Wrap definition items in a definition list

Standalone <dt> or <dd> elements lose their semantic meaning and fail to provide the context needed for assistive technologies to link terms with definitions.

Quick Reference

Place all <dt> (terms) and <dd> (descriptions) within a <dl>
Avoid using description list items as standalone elements
Ensure proper grouping of related metadata or glossary terms

Check

Locate any <dt> or <dd> elements that are not children of a <dl> element.

Fix

Wrap orphaned <dt> and <dd> elements in a parent <dl> container.

Explain

Explain why <dt> and <dd> must be contained within a <dl> for correct semantic association.

Code Review

Review the rendered markup and interactive states that affect Wrap definition items in a definition list. 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/rules/accessibility/dlitem

评价

还没有评价。欢迎分享你的使用感受。

无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。

还没有评论。来写第一条吧。

同一仓库的技能