Safari 포커스 관리

Safari는 다른 브라우저(Chrome·Firefox)와 달리 입력 요소(input)가 아닌 일반 요소에 대해 기본적으로 포커스(Focus) 기능을 비활성화한다. 이 차이가 레이어 팝업 닫기 등의 인터랙션에서 예상치 못한 스크롤 튕김 현상을 유발하는 근본 원인이다. 개발자가 팝업을 닫은 후 트리거 요소로 포커스를 이동(`.focus()`)시켜도, Safari에서는 이 동작이 예측 불가능하게 작동해 페이지 스크롤이 갑자기 점프하는 문제가 생긴다.

해결책은 포커스를 받을 상위 div 요소에 `tabindex="-1"`을 추가하는 것이다. `tabindex="-1"`은 해당 요소가 Tab 키 탐색 순서에서는 제외되지만, JavaScript의 `.focus()` 호출로는 포커스를 받을 수 있게 한다. 이를 통해 Safari에서도 팝업 닫힘 후 포커스가 원하는 위치로 이동하고, 화면 스크롤이 안정적으로 유지된다.

이 문제는 단순한 시각적 버그를 넘어 접근성(Accessibility) 측면에서도 중요하다. WCAG 2.4.3은 의미 있는 포커스 순서 유지를 요구한다. 키보드만 사용하는 사용자나 스크린 리더에 의존하는 시각 장애 사용자는 포커스 관리가 제대로 이루어지지 않으면 서비스를 이용할 수 없다. Safari에서 사용자가 설정 → 고급 → "웹 페이지에서 Tab 키로 각 항목 강조" 옵션을 직접 활성화해 문제를 우회할 수는 있지만, 이는 사용자에게 부담을 전가하는 방식이므로 개발자가 코드 수준에서 해결해야 한다.

핵심 내용

Safari는 기본적으로 입력 요소 외 일반 요소에 대해 포커스를 비활성화
팝업 닫기 후 `.focus()` 호출 시 Safari에서만 스크롤 튕김 발생하는 이유
해결: 상위 div에 `tabindex="-1"` 추가 → Tab 탐색 제외 + JS 포커스 허용
WCAG 2.4.3: 의미 있는 포커스 순서 유지는 접근성 기본 요건
브라우저 간 포커스 동작 차이는 크로스 브라우저 테스트의 중요한 항목

출처

Safari Focus — 2024-01-11, taeyong.kim

Safari 포커스 관리

핵심 내용

관련 개념

출처