免费在 GitHub 公开中文介绍

focus-not-obscured

检查固定页眉、横幅等是否遮挡键盘当前选中的控件，同时查看放大显示和移动端布局，并提出间距及滚动调整方案，使控件和焦点指示都保持可见。

原文查看原文说明

Use when reviewing sticky navigation, consent banners, chat widgets, skip links, or any fixed-position UI. Validate the actual tab order and viewport behavior at realistic zoom levels.

thedaviddias/Front-End-Checklist

实测评分未实测

查看安装方法

适用场景

检查固定页眉附近的键盘操作
测试横幅和聊天窗口打开时的页面
检查放大及移动端布局中的遮挡
调整间距以显示当前焦点控件

中文介绍

功能

检查通过键盘选中的按钮、输入框等控件，是否被固定页眉、页脚或横幅遮挡。除了表示当前位置的焦点框，还会确认控件本身是否可见。检查结果会指出有问题的选择器、屏幕宽度和显示状态，并提出使用 scroll-padding 预留空间、调整重叠区域高度或改变滚动行为等修正方案。

适用场景

适合检查带有跟随导航、Cookie 同意横幅或聊天组件的页面，也涵盖常规显示下不易发现的放大显示和移动端布局遮挡。需要在各种横幅打开时使用 Tab 键，核对实际焦点移动顺序和可见区域时，可以使用此技能。

使用示例

“请用 Tab 键检查这个带固定页眉的页面，找出选中控件被遮挡的位置。”
“请打开 Cookie 横幅和聊天窗口，检查放大显示及移动端布局。”
“请提出间距或滚动行为的修改方案，让被遮挡的输入框保持可见。”

注意事项

没有特别注意事项。

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

文档检查

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

安全性发送数据、删除文件、执行命令等是否有说明: A良好范围为检查及布局、滚动修正，没有对外发送或删除的指令。
安装难易度所需工具和 API 密钥是否少且有说明: A良好主要通过 Tab 导航和放大布局检查，未指定专用工具或 API 密钥。

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

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

包含的文件（2）

SKILL.md1.9 KB
references/rule.md3.3 KB

SKILL.md（原文）

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

Keep focused elements unobscured

A visible focus ring is not enough if the focused element sits behind a sticky header or footer. Keyboard users need to see the actual focused control and the focus indicator at the same time in order to continue the task.

Quick Reference

Sticky UI must not cover the focused control while keyboard users tab through the page
Use scroll-padding or equivalent spacing when fixed headers or footers are present
Test with cookie banners, chat widgets, and consent bars open
Re-test at zoomed and mobile layouts where overlap problems usually appear

Check

Audit keyboard focus with all sticky UI active. Check headers, footers, cookie banners, promo bars, and chat launchers for cases where the focused element scrolls underneath them.

Fix

Add layout spacing such as scroll-padding, reduce overlay height, or change focus/scroll behavior so the focused element remains visible when tabbing.

Explain

Explain WCAG Focus Not Obscured, why fixed-position UI commonly breaks it, and how scroll-padding and overlay layout choices prevent the issue.

Code Review

Review sticky layout, focus styles, overlays, and keyboard navigation related to Keep focused elements unobscured. Flag exact selectors, breakpoints, or UI states where focused controls can be covered.

For full implementation details, code examples, and framework-specific guidance, see references/rule.md.

Rule page: https://frontendchecklist.io/rules/accessibility/focus-not-obscured

评价

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

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

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

同一仓库的技能