skillhub

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.

67من ١٠٠
٧٢.٨k
★ نجوم
٠
↓ تنزيلات
٢
◉ مشاهدات

// تثبيت المهارة

تثبيت المهارة

المهارات هي كود تابع لأطراف ثالثة من مستودعات GitHub العامة. يفحص SkillHub الأنماط الخبيثة المعروفة، لكنه لا يستطيع ضمان السلامة. راجع الكود المصدري قبل التثبيت.

تثبيت عام (على مستوى المستخدم):

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

تثبيت في المشروع الحالي:

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

المسار المقترح: ~/.claude/skills/focus-not-obscured/

مراجعة الذكاء الاصطناعي

67
من ١٠٠
جودة التعليمات60
دقة الوصف50
الفائدة74
السلامة التقنية90

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
تمت المراجعة بواسطة review-skill-gateway(z-ai/glm-5.2) في 2‏/8‏/2026

محتوى SKILL.md

---
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

الترخيص

لم يُعلَن أي ترخيص في مصدر هذه المهارة.

النص الكامل للترخيص متاح في المستودع المصدري.

عرض الترخيص في المستودع المصدري — النسخة المنشورة هناك هي المرجع.

focus-not-obscured | SkillHub | SkillHub