免费在 GitHub 公开中文介绍

aria-hidden-focus

检查对屏幕阅读器隐藏的区域内，是否仍有可通过键盘聚焦的链接、按钮或输入框，指出导致焦点位置不明的问题，并提供修改方案和验证方法。

原文查看原文说明

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Remove focusable elements from aria-hidden containers. Check native semantics first, then inspect keyboard behavior, focus flow, accessible names, and screen-reader output where relevant.

thedaviddias/Front-End-Checklist

实测评分未实测

查看安装方法

适用场景

检查隐藏区域中残留的交互元素
排查键盘导航时朗读中断的原因
审查通用界面组件的无障碍支持

中文介绍

功能

检查设有 aria-hidden="true"、对屏幕阅读器隐藏的区域，确认其中是否仍有能通过键盘获得焦点的元素。找出链接、按钮、输入框等，具体指出哪些元素存在问题，以及它们会造成什么操作障碍。提供使用 tabindex="-1" 或 inert 的修改方案，并说明如何通过浏览器的无障碍检查工具或辅助技术验证结果。

适用场景

适合排查按 Tab 键移动时朗读中断，或无法判断当前操作位置的问题。也可用于审查通用界面组件，以及随状态改变显示内容的组件。检查时先确认 HTML 元素本身的语义，再查看焦点移动顺序和实际朗读内容。

使用示例

“检查 aria-hidden 区域内是否还留有可获得焦点的元素。”
“找出键盘导航时不会被朗读的元素，并提出修改方案。”

注意事项

添加 aria-hidden 并不能阻止键盘焦点进入内部元素。不能只看源文件，还需检查实际渲染的 HTML 和组件状态，必要时使用屏幕阅读器验证修改结果。

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

文档检查

AI 根据 SKILL.md 的内容检查了需要注意的操作和使用前提。评分只依据实际运行的结果（实测对比）。

安全性发送数据、删除文件、执行命令等是否有说明: A良好范围为标记和交互状态的检查与修改，未记载删除或读取凭据的操作。
安装难易度所需工具和 API 密钥是否少且有说明: A良好提及用于验证的浏览器无障碍工具和辅助技术，未指定密钥或付费服务。

不计入评分。由 AI（OpenAI Codex）于 2026年10月23日评估。仅供参考，安装前请同时查看原文。

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

包含的文件（2）

SKILL.md1.8 KB
references/rule.md3.0 KB

SKILL.md（原文）

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

Remove focusable elements from aria-hidden containers

When a keyboard user tabs into an aria-hidden element, the screen reader remains silent, leaving the user with no idea where their focus is or what they can interact with.

Quick Reference

Elements with aria-hidden="true" must not contain focusable children
Focusing on a hidden element creates a 'ghost' focus for screen reader users
Use tabindex="-1" or inert to properly hide interactive elements

Check

Scan aria-hidden="true" containers for focusable elements like links, buttons, or inputs.

Fix

Add tabindex="-1" to focusable children inside aria-hidden containers or use the inert attribute.

Explain

Explain why focusable elements inside aria-hidden containers cause confusion for keyboard and screen reader users.

Code Review

Review the rendered markup and interactive states that affect Remove focusable elements from aria-hidden containers. 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-focus

评价

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

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

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

同一仓库的技能