skillhub

focus-not-obscured✓ Pass

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.

67out of 100
72.8k
★ stars
0
↓ downloads
2
◉ views

// Install Skill

Install Skill

Skills are third-party code from public GitHub repositories. SkillHub scans for known malicious patterns but cannot guarantee safety. Review the source code before installing.

Install globally (user-level):

npx skillhub install thedaviddias/Front-End-Checklist/focus-not-obscured

Install in current project:

npx skillhub install thedaviddias/Front-End-Checklist/focus-not-obscured --project

skill.install.customTargetHelp

npx skillhub install thedaviddias/Front-End-Checklist/focus-not-obscured --target-dir /path/to/skills

Suggested path: ~/.claude/skills/focus-not-obscured/

AI Review

67
out of 100
Instruction Quality60
Description Precision50
Usefulness74
Technical Soundness90

Good accessibility skill grounded in WCAG standards with clear examples for scroll-padding and layout fixes. Score reflects solid technical soundness and broad applicability to any frontend project, limited only by the lack of numbered steps and executable code snippets to fully automate the process.

betasimplefrontend-devsaccessibility-auditorsaccessibility-auditwcag-compliancesticky-ui-review
Reviewed by review-skill-gateway(z-ai/glm-5.2) on 8/2/2026

SKILL.md Content

---
name: focus-not-obscured
description: "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."
metadata:
  category: accessibility
  priority: high
  difficulty: intermediate
  estimatedTime: "20"
  source: frontendchecklist.io
  url: https://frontendchecklist.io/en/rules/accessibility/focus-not-obscured
---

# 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/en/rules/accessibility/focus-not-obscured

License

No license was declared in this skill's source.

The full license text is available in the source repository.

View the license in the source repository — the version published there is authoritative.