키보드 초점 표시 설계기·수동검사표

자동으로 확인하는 범위

• outline 색과 배경의 대비
• 굵기·offset을 포함한 CSS 후보
• outline:none과 대체 표시 유무
• 순서·함정·가림·복합 위젯은 수동 체크리스트

입력값과 단위

배경·경계·초점색

컴포넌트 인접 영역과 사용자 정의 표시 색

굵기·offset

outline 또는 box-shadow 설계값

outline 제거

기본 포커스 링 제거 여부 및 대체 표시 유무

판정할 때 지키는 원칙

• outline:none이고 대체 표시가 없으면 fail입니다.
• 사용자 정의 표시의 비텍스트 대비가 3:1 미만이면 해당 색상 하위검사를 fail로 표시합니다.
• 브라우저 기본 outline과 실제 키보드 흐름은 manual_review입니다.

자체 검증 도식

수정 전·후 예제

button:focus { outline: none; }

button:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 2px;
}

.sticky-footer { position: fixed; bottom: 0; }

main { scroll-padding-block-end: 6rem; }
:focus-visible { scroll-margin-block: 1rem; }

회귀 테스트와 검수 증거

아래 fixture는 실제 고객 사례가 아니라 판정 로직이 같은 입력에 같은 결과를 내는지 확인하는 공개 회귀 자료입니다. 현장 사용 경험으로 과장하지 않습니다.

대표 fixture 검증 기록

검사 환경

브라우저 및 테스트 환경: 대표 fixture 기반 자동 테스트 및 DOM 파서 검증; 실제 화면낭독기 수동 검사는 미검사

예상 결과

색상 하위검사는 pass 가능하지만 가림은 manual_review이며 실제 키보드 검사에서 별도 판정

자동 결과

초점 색상 대비와 면적 계산을 수행하며, 고정 영역에 의한 가림 여부는 수동 검토 항목으로 안내합니다. (실제 키보드 조작과 강제색 모드는 수동 검토 필요)

재검사 방법

작은 뷰포트와 200% 확대에서 Tab으로 버튼을 다시 찾아 완전히 보이는지 기록합니다.

자동 결과 뒤에 남는 검사

• Tab 순서
• 고정 영역 가림
• 강제색 모드
• modal·복합 위젯 키 동작

자동 판정의 한계

• 실제 Tab 순서와 키보드 함정
• modal과 복합 위젯의 포커스 관리
• sticky header·footer 가림
• 브라우저 기본 outline과 강제색 모드
• 시간이 지나 표시가 사라지는 동작

반드시 남는 수동 확인

• Tab과 Shift+Tab 순서가 작업 흐름과 맞는가?
• 모든 조작 요소에 초점이 도달하고 빠져나올 수 있는가?
• 고정 영역이나 modal이 초점을 완전히 가리지 않는가?
• Enter·Space·화살표키가 위젯 역할에 맞게 동작하는가?

공식 상세 근거

• WCAG 2.2 Success Criterion 2.4.7 — Focus Visible
• WCAG 2.2 Success Criterion 2.4.11 — Focus Not Obscured (Minimum)
• WCAG 2.2 Success Criterion 2.4.13 — Focus Appearance
• WCAG 2.2 Success Criterion 1.4.11 — Non-text Contrast

로직 버전 focus-indicator-1.0.0 · 공개 검수일 2026-08-04 · 검수 책임 서호영 (운영·콘텐츠 검토 책임)

자주 묻는 질문