免费在 GitHub 公开中文介绍

aria-hidden-body

检查body上的aria-hidden是否导致整个页面被屏幕阅读器忽略，找出弹窗等交互中的错误设置，并协助改为仅隐藏相关背景容器。

原文查看原文说明

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Do not use aria-hidden on the document body. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

thedaviddias/Front-End-Checklist

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

适用场景

检查弹窗打开时的屏幕朗读
排查页面无法被朗读的原因
检查状态变化时的body属性

中文介绍

功能

检查<body>上可能使整个页面对屏幕阅读器不可见的设置。aria-hidden="true"用于让辅助技术忽略某个元素；如果设置在<body>上，整个页面都会受到影响。因此，检查不仅覆盖页面初次显示时，还包括用户操作引起的状态变化过程，确认这些过程中是否添加了该属性。

适用场景

适合调查打开模态弹窗后屏幕阅读器无法朗读的问题，也适合排查屏幕上可见的内容为何无法被屏幕阅读器识别。审查界面组件或设计系统时，也可用于检查隐藏背景内容的处理方式以及焦点移动情况。

使用示例

“检查打开和关闭模态弹窗时，是否给<body>添加了aria-hidden="true"。”
“建议移除隐藏整个页面的设置，并在弹窗显示期间仅隐藏相关背景容器。”

注意事项

将该属性设置在<body>上会使辅助技术无法访问整个页面，因此使用过程中的临时状态也在检查范围内。资料提出，修复后应使用浏览器的无障碍检查工具或辅助技术进行验证。

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

客观评估

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

指令清晰度能否看出何时使用、做什么: A良好明确要求检查各状态下body的aria-hidden，并改为仅应用于背景容器。
步骤具体性步骤、输入输出和示例是否具体: B部分不足明确指定待检查属性和修正对象，但未提供操作步骤或修正代码示例。
安全性发送数据、删除文件、执行命令等是否有说明: A良好修改范围为body和背景容器，并要求使用浏览器无障碍工具或辅助技术验证。
安装难易度所需工具和 API 密钥是否少且有说明: A良好验证工具为浏览器无障碍工具或辅助技术，未要求特定产品或API密钥。

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

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

包含的文件（2）

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

SKILL.md（原文）

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

Do not use aria-hidden on the document body

Setting aria-hidden="true" on the body effectively silences the entire application for screen reader users, rendering the site completely unusable.

Quick Reference

The <body> element should never have aria-hidden="true"
Hiding the body makes the entire page invisible to assistive technologies
Often happens accidentally when managing modal states

Check

Check if the <body> element has aria-hidden="true" applied at any point in the lifecycle.

Fix

Remove aria-hidden="true" from the <body> and use it only on specific background containers when modals are open.

Explain

Explain the catastrophic impact of hiding the body element from assistive technologies.

Code Review

Review the rendered markup and interactive states that affect Do not use aria-hidden on the document body. 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/aria-hidden-body

评价

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

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

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

同一仓库的技能