들어가고 나올 수 있게

KRDS CP-353 — 패널이 실행되면 키보드 초점은 패널 영역 자체로 이동하며, 패널 내부에서 키보드 함정이 발생하지 않게 구현하고 있다.

0. 들어가며 — 따라하기 패널을 열었는데 키보드가 못 가면

이번 473편은 따라하기 패널이 실행되면 키보드 초점이 패널 영역으로 이동하고, 패널 내부에서 키보드 함정이 발생 하지 않게 구현하라는 규칙입니다.

따라하기 패널이 열렸을 때 — 키보드 초점이 패널로 안 옮겨가면, 키보드 사용자는 안내에 닿지 못하죠. 반대로 — 패널에 들어간 초점이 못 빠져나오면(키보드 함정) 갇힙니다. CP-353은 초점 이동과 함정 방지를 규정합니다. 도움 패널 CP-346과 평행하되, 따라하기는 본문 작업과 패널을 오가야 해 함정 방지가 특히 중요하죠. 이번 편을 풀어냅니다.

1. 원문 — 패널로 초점 이동 + 함정 방지

CP-353 (컴포넌트 > 따라하기 패널) “패널이 실행되면 키보드 초점은 패널 영역 자체로 이동하며, 패널 내부에서 키보드 함정이 발생하지 않게 구현하고 있다.”

따라하기 패널이 열리면 키보드 초점이 패널로 이동하고, 패널 안에서 초점이 갇히지(키보드 함정) 않게 구현하라는 뜻입니다.

정리: 패널 열리면 초점을 패널로 옮기고, 키보드 함정은 막아라. 이게 CP-353입니다.

2. 왜 초점 이동·함정 방지인가

따라하기 패널은 — 키보드로도 완전히 사용 가능해야 합니다(키보드 접근성, KWCAG 2.1.1). 패널 열림/닫힘 흐름에서 — 키보드 초점 관리가 핵심이죠. CP-353은 ①열릴 때 초점 이동, ②안에서 함정 방지를 요구합니다(도움 패널 CP-346과 같은 구조).

① 패널 실행 시 초점 이동. 사용자가 — 따라하기를 시작(따라하기 버튼 누름)해 패널이 열렸을 때, 키보드 초점이 패널 영역으로 이동해야 합니다.

초점이 안 옮겨갈 때 — 패널이 열렸는데 — 초점이 원래 위치에 있으면, 키보드 사용자는 따라하기 안내에 닿으려 Tab을 한참 눌러야 하거나, 패널이 열린 줄도 모르죠. 스크린 리더 사용자는 새로 뜬 안내를 인지 못 합니다.

초점 이동 효과 — 패널이 열리면 — 초점을 패널(제목·첫 단계·첫 컨트롤)로 옮기면, 키보드 사용자가 바로 안내를 읽고 따라하기를 시작합니다.

② 패널 내부 키보드 함정 방지. 패널 안 초점이 — 다시 빠져나올 수 있어야 합니다.

키보드 함정 — 패널 안에서 Tab을 눌러도 초점이 패널 안에서만 맴돌면, 키보드 사용자가 갇힙니다. 본문(따라 할 작업)으로 돌아가지도, 다른 곳으로 가지도 못하죠. WCAG 2.1.2 키보드 함정 없음 위반입니다.

따라하기 특유 본문 작업 오감 따라하기는 패널 안내를 보고 본문에서 실제 작업을 하는 흐름입니다. 즉 사용자가 패널(안내)과 본문(작업)을 계속 오가야 하죠. 만약 패널이 초점을 가두면(함정) 안내를 보고 본문 작업을 하러 갈 수가 없습니다. 따라하기 자체가 불가능해지죠. 그래서 따라하기 패널은 절대 초점을 가두면 안 됩니다. 패널↔본문 자유 이동이 필수입니다.

비모달 패널. 도움 패널처럼 — 따라하기 패널도 보통 비모달입니다(본문 작업을 막지 않음). 모달의 의도적 초점 가두기(focus trap)와 달리 — 따라하기는 본문과 공존하며 오가야 하니, 초점을 가두지 않죠. CP-353의 ’함정 방지’가 이 의미입니다.

닫기 처리. 따라하기를 중단(CP-349의 중단하기 버튼)하거나 완료하면 — 초점을 적절한 위치(따라하기를 시작한 버튼, 또는 작업 본문)로 되돌립니다. 사용자가 맥락을 잃지 않게요.

초점 흐름:

따라하기 시작 → 패널 열림 → 초점이 패널로 이동(①).

패널 안내 읽고 → 본문으로 가서 작업 → 다시 패널로(자유 이동, 함정 없음, ②).

중단/완료 → 초점이 적절한 위치로 복귀.

이 규칙은 따라하기 패널의 ’키보드 흐름’을 담당합니다 — 열릴 때 패널로 초점을 옮기고(353①), 패널↔본문을 자유로이 오가게(353②) 해, 키보드 사용자가 안내를 보며 본문 작업을 따라 하게 하죠. 따라하기는 본문 오감이 본질이라 함정 방지가 특히 중요합니다.

정리하면 — 따라하기 패널이 열려도 초점이 안 옮겨가면 안내에 닿지 못하고 갇히면 본문 작업을 못 하므로, 패널 실행 시 초점을 패널로 이동하고 본문과 자유로이 오가게(키보드 함정 없이) 구현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

초점 이동 — 패널 실행 시 키보드 초점이 패널 영역으로 이동하는가.

함정 없음 — 패널 안에서 본문으로 자유로이 빠져나올 수 있는가(갇히지 않음).

닫기 복귀 — 중단/완료 시 초점이 적절한 위치로 복귀하는가.

개선 방향

패널 열림 시 초점을 패널(제목/첫 요소)로 이동. 비모달이라 초점 가두기 금지.

패널↔본문 자유 이동 보장(WCAG 2.1.2). 중단/완료 시 초점 복귀.

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

역할	책임
퍼블리셔/개발	초점 이동·함정 방지·복귀 구현
QA/접근성	키보드 패널↔본문 오감 검증

기관 유형	CP-353 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (따라하기 패널 사용 시)

웹접근성 의무 대상이며 따라하기 패널을 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 패널 실행 시 키보드 초점이 패널 영역으로 이동하나요?

□ 패널 안에서 본문으로 자유로이 빠져나올 수 있나요(갇히지 않음)?

□ 중단/완료 시 초점이 적절한 위치로 복귀하나요?

❓ FAQ

Q1. 따라하기 패널도 모달처럼 초점을 가두나요? 절대 안 됩니다. 따라하기는 안내를 보며 본문 작업을 오가야 하니, 가두면 본문 작업을 못 합니다(WCAG 2.1.2 위반). Q2. 도움 패널 CP-346과 같나요? 같은 구조(초점 이동+함정 방지)입니다. 따라하기는 본문 오감이 본질이라 함정 방지가 더 중요하죠. Q3. 닫으면 초점이 어디로? 따라하기를 시작한 버튼 또는 작업 본문 등 적절한 위치로 복귀합니다.

6. 마무리

CP-353의 메시지:

들어가고 나올 수 있게 — 패널 열리면 초점을 패널로, 본문과 자유로이 오가게.

따라하기 패널이 열려도 초점이 안 옮겨가면 안내에 닿지 못하고, 갇히면 본문 작업을 못 합니다. 패널 실행 시 초점을 옮기되 패널↔본문을 자유로이 오가게(함정 방지) 하는 게 핵심이죠. 다음 편은 패널의 DOM 순서(본문 다음)입니다.

다음 편 예고 ▶ 「474. (CP-354) 키보드·스크린 리더 사용자가 본문 개요를 파악한 후 패널 사용 여부를 결정할 수 있도록 본문 다음 요소로 제공하고 있다.」

ViewCheck는 따라하기 패널 초점 이동과 키보드 함정 방지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 따라하기 패널(Tutorial panel) 가이드 — https://www.krds.go.kr/html/site/component/component_34.html

WCAG 2.1 SC 2.1.2 No Keyboard Trap — https://www.w3.org/WAI/WCAG21/Understanding/no-keyboard-trap.html

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

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