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

AI 평가100점/ 100 설치 방법 보기

이럴 때 유용합니다

고정 헤더 주변의 키보드 조작 확인
배너와 채팅 창을 연 상태에서 동작 점검
확대 화면과 모바일 배치의 겹침 확인
선택한 컨트롤이 보이도록 여백 조정

한국어 소개

할 수 있는 일

키보드로 선택한 버튼이나 입력란이 고정 헤더, 푸터, 배너 등에 가려지는지 점검합니다. 현재 위치를 나타내는 포커스 테두리뿐 아니라 컨트롤 자체가 보이는지도 확인합니다. 문제가 있는 선택자, 화면 너비, 표시 상태를 짚고 scroll-padding을 통한 여백 확보, 겹치는 영역의 높이 조정, 스크롤 동작 변경을 제안합니다.

이럴 때 유용합니다

고정 내비게이션, Cookie 동의 배너, 채팅 위젯이 있는 페이지를 확인할 때 유용합니다. 일반 화면에서 놓치기 쉬운 확대 화면과 모바일 배치의 겹침도 점검합니다. 여러 배너를 연 상태에서 Tab 키로 이동하며 실제 이동 순서와 화면에 보이는 범위를 확인할 때 활용합니다.

사용 예시

“고정 헤더가 있는 페이지에서 Tab 키로 이동하며 선택한 컨트롤이 가려지는 곳을 찾아 주세요.”
“Cookie 배너와 채팅 창을 열고 확대 화면과 모바일 화면을 확인해 주세요.”
“가려진 입력란이 보이도록 여백과 스크롤 수정안을 제시해 주세요.”

주의 사항

특별한 주의 사항은 없습니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호고정 화면 요소에 가려진 포커스 컨트롤과 키보드 탐색을 통한 점검 대상이 명시되어 있습니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호배너 표시와 확대 상태의 점검, 여백 수정, 보고할 선택자와 중단점 및 화면 상태가 구체적입니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호점검과 배치 및 스크롤 수정이 대상이며 외부 전송이나 삭제 지시는 없습니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호Tab 탐색과 확대 화면 확인이 중심이며 전용 도구나 API 키는 지정되어 있지 않습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 23일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(2)

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

SKILL.md(원문)

설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬