免费在 GitHub 公开中文介绍

label-content-name-mismatch

对照按钮和链接的可见文字与辅助技术使用的无障碍名称，指出不一致的元素，提供ARIA属性修改及验证方法，让语音操作用户能说出所见文字来操作。

原文查看原文说明

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Align visible labels with accessible names. 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 查看安装方法

适用场景

对照按钮文字与无障碍名称
检查难以通过语音操作的链接
使用无障碍工具验证修改

中文介绍

功能

此技能对照按钮或链接上可见的文字与“无障碍名称”，即辅助技术用来识别操作对象的名称。它检查通过aria-label或aria-labelledby设置的名称是否包含可见文字，指出不一致的具体元素，并指导将屏幕上的原始文字放在名称开头。

适用场景

适合排查使用语音识别软件说出屏幕上的名称，却无法操作对应元素的情况。也可用于整理通用按钮和链接，或检查屏幕阅读器读出的内容是否与屏幕显示一致。必要时，还会检查HTML的原生语义、键盘操作和焦点移动。

使用示例

“对照按钮文字与aria-label，指出不一致的地方。”
“提出修改建议，让链接的无障碍名称包含其可见文字。”
“说明修改后如何通过辅助技术进行验证。”

注意事项

修改结果需要通过浏览器的无障碍检查工具或辅助技术验证。检查重点是名称是否包含原本显示的文字，不能只把这些文字换成另一种说法。

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

客观评估

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

指令清晰度能否看出何时使用、做什么: A良好明确说明比较可见文字与无障碍名称，修正影响语音操作的不一致。
步骤具体性步骤、输入输出和示例是否具体: A良好列明比较ARIA属性、将可见文字置于名称开头，以及通过辅助技术验证。
安全性发送数据、删除文件、执行命令等是否有说明: A良好范围是检查和修改HTML及ARIA属性，没有对外发送数据或删除的指示。
安装难易度所需工具和 API 密钥是否少且有说明: A良好列出浏览器无障碍工具或辅助技术用于验证，未要求API密钥或付费服务。

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

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

包含的文件（2）

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

SKILL.md（原文）

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

Align visible labels with accessible names

When the visible label doesn't match the accessible name, voice control users may find it impossible to interact with the element by speaking its name.

Quick Reference

Visible text should be part of the accessible name (ARIA label)
Ensure speech-to-text users can trigger controls by their visible name
Maintain consistency between what is seen and what is read by tech

Check

Compare the visible text of buttons and links with their 'aria-label' or 'aria-labelledby' attributes to ensure the visible text is included in the accessible name.

Fix

Update the ARIA attribute to include the exact string of the visible label text at the beginning of the accessible name.

Explain

Explain how a mismatch between visible labels and accessible names breaks the experience for users of voice recognition software.

Code Review

Review the rendered markup and interactive states that affect Align visible labels with accessible names. 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/label-content-name-mismatch

评价

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

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

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

同一仓库的技能