키보드 접근성
키보드 초점이 보이지 않는 UI를 재현하고 수정한 과정
WCAG 2.2 성공 기준 2.4.11(Focus Not Obscured) 규정과 position: sticky 상단 네비게이션에 의한 초점 가림 현상 해결법을 다룹니다.
실무 검증 기록
키보드 조작 및 초점 경로 검증
본 기록은 공개 fixture와 재현 조건을 기준으로 정리한 기술 설명입니다. 실제 브라우저·스크린리더 조합의 동작은 별도 수동 검토가 필요합니다.
| 검증 상태 | 공개 fixture 기반 재현 완료 |
|---|---|
| 검증 기준 | 공개 fixture 및 재현 조건 |
| 검증 범위 | 키보드 초점 표시 가림(Focus Obscured) 및 scroll-padding 검증 및 명시된 입력값에 한정 |
| 수동 확인 | 실제 브라우저·키보드·스크린리더 환경에서 별도 확인 필요 |
| fixture에서 확인한 기대 결과 | [실패 상태] 포커스 링이 고정 헤더 뒤에 가려짐 ➔ [수정 목표] scroll-padding-top과 실제 Tab 이동 조정 |
검증에 사용된 실제 픽스처 / 재현 조건
60px sticky header, 앵커 이동, focus-visible- 동적으로 확장되는 챗봇 위젯이나 쿠키 배너가 런타임에 덮는 경우 정적 CSS 분석으로 감지 불가
- CSS overflow: scroll 컨테이너 내부의 중첩 스크롤 초점 이동
position:fixed 또는 sticky로 상단·하단에 고정된 헤더/푸터가 있는 레이아웃에서 키보드 Tab 키로 앵커 링크나 입력 필드로 이동할 때, 포커스는 진입하지만 시각적 포커스 링이 고정 바 뒤에 100% 가려지는 문제가 발생합니다. scroll-padding-top/bottom을 활용한 안전 뷰포트 확보 원리를 분석합니다.
WCAG 2.2 SC 2.4.11 Focus Not Obscured 규정과 문제 상황
상단 네비게이션 바가 position: fixed 또는 position: sticky로 고정된 웹사이트에서 Tab 키를 누르면, 스크롤이 자동으로 내려가며 포커스 요소가 상단 고정 헤더 밑으로 들어가 시각적으로 숨겨지는 현상이 자주 발생합니다.
WCAG 2.2 성공 기준 2.4.11은 키보드 포커스를 받은 요소가 작성자 생성 UI(고정 헤더, 배너 등)에 의해 완전히 가려지지 않아야 함을 요구합니다.
CSS outline: none 남발과 시각적 포커스 링의 소멸
많은 웹 사이트가 기본 브라우저 포커스 링(Focus Ring)의 파란 테두리가 디자인을 해친다는 이유로 button:focus { outline: none; }을 전역으로 선언합니다.
이로 인해 키보드 사용자는 탐색 중 자신이 위치한 대상을 전혀 알 수 없게 됩니다. :focus-visible 의사 클래스를 활용하여 키보드 탐색 시에만 명확한 맞춤 포커스 링이 표시되도록 디자인해야 합니다.
Sticky Header 초점 가림 해결을 위한 CSS 구현 기법
고정 헤더 높이만큼 포커스 스크롤 위치를 오프셋 이동시키는 CSS 구체적 해결 코드입니다.
- scroll-margin-top 설정: h1, h2, button, a, input { scroll-margin-top: 80px; } (헤더 높이가 80px인 경우)
- focus-visible 고도화: :focus-visible { outline: 3px solid #005A9C; outline-offset: 2px; }
- z-index 제어: 포커스 링이 상위 컨테이너 요소에 잘리지 않도록 overflow: hidden 조율
초점 유실 및 상호작용 실패 원인 분석
| 초점 조작 실패 상황 | 정상 초점 제어 복구 방법 |
|---|---|
| 전역 CSS에 :focus { outline: none; } 속성을 적용하고 대체 포커스 스타일을 지정하지 않는 것 | :focus-visible을 활용하여 키보드 탐색 사용자를 위한 선명한 테두리(outline) 스타일을 유지합니다. |
| position: fixed 상단 바를 구현하면서 대화형 요소에 scroll-margin-top을 부여하지 않아 포커스 요소가 헤더 뒤로 숨는 것 | 고정 헤더 높이에 맞추어 대화형 요소 및 앵커(anchor) 태그에 scroll-margin-top 오프셋을 지정합니다. |
수정 후 키보드 조작 회귀 점검 순서
- 마우스를 떼고 페이지 상단에서 Tab 키를 연속으로 입력하여 포커스 링의 시각적 이동을 추적합니다.
- position: fixed/sticky 헤더 밑으로 포커스가 숨겨지는 지점을 발견합니다.
- 해당 포커스 가능 요소에 scroll-margin-top: [헤더높이]px 속성 및 :focus-visible 테두리 스타일을 지정합니다.
수동 키보드 탐색 시 주의할 한계
- 초점 링이 3:1 이상의 대비를 충족하더라도 배경과 동일한 색상 테두리를 사용할 경우 육안 식별이 불가능합니다.
- WCAG 2.2 SC 2.4.12(Focus Not Obscured Enhanced, Level AAA)는 일체의 가림이 없는 완전 노출을 요구하므로 마진을 넉넉히 주어야 합니다.