초점을 모달 안에 가두고 흐름을 잡아라

KRDS CP-182 — 모달과 내부 요소의 초점 이동 순서를 논리적으로 제공하고 있다.

0. 들어가며 — 모달 접근성의 핵심

이번 302편은 모달과 내부 요소의 초점 이동 순서를 논리적으로 제공하라는 규칙입니다.

모달 접근성에서 가장 중요하고 까다로운 부분이 초점 관리입니다. 모달이 열리면 초점이 어디로 가는지, Tab을 누르면 모달 안만 도는지(아니면 뒤 본문으로 빠지는지), 닫으면 초점이 어디로 돌아오는지 — 이 흐름이 논리적이지 않으면 키보드·스크린 리더 사용자는 모달에서 길을 완전히 잃죠. CP-182는 이 초점 순서를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 논리적 초점 이동 순서

CP-182 (컴포넌트 > 모달) “모달과 내부 요소의 초점 이동 순서를 논리적으로 제공하고 있다.”

모달이 열릴 때 초점 진입, 모달 내부 Tab 순환(초점 가두기), 닫힐 때 초점 복귀를 — 사용자가 예측 가능하고 논리적인 순서로 경험하게 구현하라는 뜻입니다.

정리: 모달의 초점을 논리적 순서로 — 진입·가두기·복귀를 제대로 관리하라. 이게 CP-182입니다.

2. 왜 논리적 초점 관리가 중요한가

모달은 본문 위에 떠서 ’지금은 이 모달에만 집중하라’고 요구합니다. 키보드·스크린 리더 사용자에게 이 ’집중’을 구현하는 것이 바로 초점 관리죠. 시각 사용자는 모달이 본문을 가린 것을 눈으로 보지만, 키보드 사용자는 초점이 어디 있는지로만 위치를 알기에, 초점 관리가 어긋나면 모달이 떠 있는지조차 헷갈립니다. WAI-ARIA 모달 다이얼로그 패턴이 정의하는 세 가지 핵심이 있습니다.

① 초점 진입 — 열릴 때. 모달이 열리면 초점이 모달 내부로 즉시 이동해야 합니다. 보통 모달의 첫 포커스 가능 요소(또는 모달 자체/제목)로요. 그래야 키보드 사용자가 바로 모달을 조작하죠. 만약 초점이 뒤 본문에 남아 있으면 — 사용자는 모달이 열린 줄 모르고 가려진 본문을 더듬습니다. 동시에 모달 제목을 aria-labelledby로 연결하고 role="dialog"/aria-modal="true"를 부여하면, 스크린 리더가 “○○ 대화상자”라고 알려 맥락을 잡죠.

② 초점 가두기(focus trap) — 열려 있는 동안. 모달이 열려 있는 동안 Tab/Shift+Tab 초점은 모달 내부에서만 순환해야 합니다. 마지막 요소에서 Tab을 누르면 첫 요소로, 첫 요소에서 Shift+Tab을 누르면 마지막 요소로 돌아오죠. 초점이 모달을 빠져나가 뒤의 (가려진) 본문 요소로 가면 안 됩니다 — 그러면 키보드 사용자가 보이지 않는 본문 요소에 초점을 두게 되어 완전히 길을 잃죠. 이 ’가두기’가 모달의 ’집중’을 키보드로 구현하는 핵심 입니다. 뒤 본문 요소들은 inert나 aria-hidden으로 보조기술·키보드에서 제외하기도 하죠.

③ 초점 복귀 — 닫힐 때. 모달을 닫으면 초점이 모달을 열었던 그 요소(트리거 버튼)로 돌아가야 합니다. 그래야 사용자가 모달 전 작업 흐름을 자연스럽게 이어가죠. 만약 닫은 뒤 초점이 페이지 맨 위나 엉뚱한 곳으로 가면 — 사용자는 ‘내가 어디 있었지?’ 하고 위치를 잃습니다. ’열기 전 자리로 복귀’가 논리적 흐름이죠.

④ 내부 순서의 논리성. 모달 내부에서도 Tab 순서가 시각·논리 순서와 일치해야 합니다(구조화 목록 CP-103 정신) — 제목 → 콘텐츠 → 액션 버튼 순으로 자연스럽게요. 그리고 Escape 키로 모달을 닫을 수 있어야 합니다 (표준 모달 동작).

이 규칙의 난이도가 높은(★★★★) 이유는 — JavaScript로 진입·가두기·복귀를 모두 직접 관리해야 하고, 동적으로 열리고 닫히는 상태를 정확히 처리해야 하기 때문입니다. 모달은 웹 접근성에서 구현이 가장 까다로운 컴포넌트로 꼽히죠(달력과 함께).

이 초점 관리는 다른 모달 규칙과 맞물립니다 — 모달이 단순해야(CP-180) 초점 가두기가 간단하고, 닫기 버튼을 마지막에 두면(CP-183) 초점 순서가 자연스럽죠. 함께 키보드·스크린 리더 사용자가 모달을 온전히 쓰게 합니다.

정리하면 — 모달의 ’집중’을 키보드로 구현하려면 초점 진입·가두기·복귀를 논리적으로 관리해, 사용자가 모달 안에 집중하고 닫은 뒤 원래 자리로 돌아가게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

초점 진입 — 모달이 열리면 초점이 모달 내부로 이동하는가.

초점 가두기 — Tab/Shift+Tab이 모달 내부에서만 순환하는가(본문으로 안 빠짐).

초점 복귀 — 닫으면 초점이 모달을 연 트리거로 돌아가는가.

내부 순서·Escape — 내부 Tab 순서가 논리적이고 Escape로 닫히는가.

개선 방향

열 때 focus() 진입, focus trap으로 내부 순환, 닫을 때 트리거로 복귀.

role="dialog"+aria-modal="true"+aria-labelledby(제목). 뒤 본문 inert/aria-hidden. Escape 닫기.

4. 누가 담당하나 / 우리 사이트에 해당될까?

역할	책임
퍼블리셔/개발	초점 진입·가두기·복귀·ARIA·Escape 구현
접근성 담당	키보드만으로 모달 진입·순환·복귀 검증

기관 유형	CP-182 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (모달 사용 시)

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 모달이 열리면 초점이 모달 내부로 이동하나요?

□ Tab/Shift+Tab이 모달 내부에서만 순환하나요(본문으로 안 빠짐)?

□ 닫으면 초점이 모달을 연 트리거로 돌아가나요?

□ 내부 Tab 순서가 논리적이고 Escape로 닫히나요?

❓ FAQ

Q1. 초점 가두기가 뭔가요? 모달이 열려 있는 동안 Tab 초점이 모달 안에서만 순환하게 하는 것입니다. 뒤 본문으로 빠지면 키보드 사용자가 길을 잃습니다. Q2. 닫으면 초점이 어디로 가야 하나요? 모달을 열었던 트리거 버튼으로 돌아가야 작업 흐름이 이어집니다. Q3. 왜 난이도가 높나요? 진입·가두기·복귀를 JS로 직접 관리하고 동적 상태를 정확히 처리해야 해서, 모달은 접근성 구현이 가장 까다롭습니다.

6. 마무리

CP-182의 메시지:

초점을 모달 안에 가두고 흐름을 잡아라 — 진입·가두기·복귀를 논리적으로 관리하라.

모달의 ’집중’은 키보드로는 초점 관리로 구현됩니다. 열 때 모달로 진입, 열려 있는 동안 내부 순환(가두기), 닫을 때 트리거로 복귀 — 이 흐름이 논리적이어야 키보드·스크린 리더 사용자가 길을 잃지 않죠. 모달 접근성의 핵심이자 가장 까다로운 부분입니다. 다음 편은 모달 그룹의 마지막 — 닫기 버튼 마크업 순서입니다.

다음 편 예고 ▶ 「303. (CP-183) 모달의 닫기 버튼은 모달의 가장 마지막 요소로 마크업하고 있다.」

ViewCheck는 모달의 초점 진입·가두기·복귀가 논리적으로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 모달(Modal) 가이드 — https://www.krds.go.kr/html/site/component/component_16.html

WAI-ARIA APG — Modal Dialog Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/

KRDS #ViewCheck #공공웹사이트 #전자정부 #디지털정부 #웹접근성 #디자인시스템 #UIUX #UI컴포넌트 #웹표준

KRDS,ViewCheck,공공웹사이트,전자정부,디지털정부,웹접근성,디자인시스템,UIUX,UI컴포넌트,웹표준