웹 접근성에서 focus trap은 언제 필요하고 어떻게 구현하나요?

Focus trap은 모달이나 다이얼로그가 열렸을 때 키보드 포커스가 해당 영역 안에서만 순환하도록 하는 접근성 기법입니다. 사용자가 Tab 키로 배경 컨텐츠로 이동하지 않게 하고, 닫을 때 이전 포커스로 되돌려 키보드 사용자도 맥락을 잃지 않게 합니다.

핵심 개념

핵심 기준은 모달 안에서 포커스를 순환시키고 닫을 때 복원입니다. 이 개념은 단순히 용어를 외우는 것보다, 어떤 문제를 줄이기 위해 등장했는지와 실제 코드나 운영 환경에서 어떤 trade-off를 만드는지 함께 이해하는 것이 중요합니다.

모달이 열렸을 때 키보드 포커스가 배경으로 빠지는 상황을 떠올려보세요.

동작 흐름

1. 먼저 문제가 발생하는 조건과 입력을 확인합니다.
2. 관련된 런타임, 브라우저, 서버, 데이터 저장소의 책임을 나눠 봅니다.
3. 가장 작은 범위에서 안전한 해결책을 적용합니다.
4. 로그, 테스트, 모니터링으로 실제로 문제가 줄었는지 확인합니다.

실제 예시

로그인 모달이 열렸는데 Tab을 누르자 뒤쪽 페이지 링크로 이동하면 스크린리더와 키보드 사용자가 혼란을 겪을 수 있습니다.

실무에서 적용하는 방법

열릴 때 첫 focusable 요소로 포커스를 옮기고, Tab/Shift+Tab으로 처음과 끝을 순환시킵니다.

실무에서 주의할 점

• aria-modal, role="dialog", Escape 닫기, 배경 스크롤 잠금도 함께 고려해야 합니다.
• 개념을 적용하기 전에 현재 시스템의 규모, 병목, 장애 영향도를 함께 확인해야 합니다.
• 팀 규칙이나 프레임워크 기본 동작과 충돌하지 않는지도 점검하는 것이 좋습니다.

함께 연결해서 보면 좋은 키워드

프론트엔드, 접근성, FocusTrap, 모달

면접에서 짚으면 좋은 포인트

• 정의만 말하기보다 어떤 문제를 줄이기 위한 개념인지 먼저 설명하면 좋습니다.
• 장점과 함께 비용, 한계, 적용하지 않아도 되는 상황을 같이 말하면 실무 이해도가 드러납니다.

정리

한 줄로 정리하면, Focus trap은 모달이나 다이얼로그가 열렸을 때 키보드 포커스가 해당 영역 안에서만 순환하도록 하는 접근성 기법입니다입니다. 실무에서는 개념을 적용하는 조건과 적용하지 않았을 때 생기는 문제까지 함께 이해하는 것이 중요합니다.