들어가고 나올 수 있게

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

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

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

도움 아이콘을 눌러 패널이 열렸을 때 — 키보드 초점이 패널로 안 옮겨가면, 키보드 사용자는 패널 내용에 닿지 못하죠. 반대로 — 패널에 들어간 초점이 못 빠져나오면(키보드 함정), 갇힙니다. CP-346은 초점 이동과 함정 방지를 함께 규정 합니다. 모달 초점 관리(CP-176 정신)의 도움 패널 버전이죠. 이번 편을 풀어냅니다.

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

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

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

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

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

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

① 패널 실행 시 초점 이동. 사용자가 — 도움 아이콘을 눌러(키보드로 Enter) 패널이 열렸을 때, 키보드 초점이 패널 영역으로 이동해야 합니다.

초점이 안 옮겨갈 때의 문제 패널이 열렸는데 초점이 여전히 원래 위치(아이콘 버튼)에 있으면, 키보드 사용자는 패널 내용에 닿으려고 Tab을 한참 눌러야 하거나, 패널이 열린 줄도 모르죠. 특히 스크린 리더 사용자는 초점이 패널로 안 가면 새로 뜬 도움말을 인지 못 합니다.

초점 이동의 효과 — 패널이 열리면 — 초점을 패널(패널 컨테이너 또는 패널의 제목·첫 요소)로 옮기면, 키보드 사용자가 바로 패널 내용을 읽고 조작합니다. 스크린 리더도 패널을 읽기 시작하죠.

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

키보드 함정(keyboard trap) 패널 안에서 Tab을 눌러도 초점이 패널 안에서만 맴돌고 빠져나오지 못하면, 키보드 사용자는 패널에 갇힙니다. 본문으로 돌아가지도, 페이지의 다른 곳으로 가지도 못하죠. 이는 WCAG 2.1.2 키보드 함정 없음(No Keyboard Trap) 위반입니다 키보드로 들어간 곳은 키보드로 나올 수 있어야 한다는 기준이죠.

함정 방지 구현 패널에서 Tab으로 패널 요소들을 다 거치면 다음(본문 등)으로 나가거나, Esc 키로 패널을 닫고 초점을 원래 위치(아이콘)로 되돌리는 식으로 빠져나올 길을 둡니다.

모달과의 차이 도움 패널은 비모달. 여기서 주의할 점 모달 다이얼로그는 ’초점 가두기(focus trap)’가 의도적 패턴입니다(모달 안에서만 Tab 순환, 배경 비활성). 하지만 도움 패널은 보통 비모달(non-modal)이죠. 본문을 막지 않고 옆에 떠 있어, 사용자가 패널과 본문을 오갑니다. 그래서 도움 패널은 모달처럼 초점을 가두면 안 됩니다. 패널과 본문 사이를 키보드로 자유로이 오가게 하죠. CP-346의 ’함정 방지’가 바로 이 의미입니다 패널에 들어가되 갇히지 않고 본문으로 나올 수 있어야 한다는 거죠.

닫기 처리. 패널을 닫으면(Esc 또는 닫기 버튼) — 초점을 패널을 열었던 원래 위치(도움 아이콘) 로 되돌립니다. 그래야 사용자가 작업하던 맥락으로 돌아오죠. 모달 닫기 시 초점 복귀와 같은 정신입니다.

초점 흐름 정리:

도움 아이콘 누름 → 패널 열림 → 초점이 패널로 이동(①).

패널 안에서 Tab으로 요소 탐색, 그리고 본문으로 나갈 수 있음(함정 없음, ②).

Esc/닫기 → 패널 닫힘 → 초점이 원래 아이콘으로 복귀.

이 규칙은 도움 패널의 ’키보드 흐름’을 담당합니다 — 열릴 때 패널로 초점을 옮기고(346①), 갇히지 않게(346②) 해, 키보드 사용자가 패널을 자유로이 드나들게 하죠. 비모달 패널의 초점 관리가 핵심입니다.

정리하면 — 패널이 열려도 초점이 안 옮겨가면 키보드 사용자가 도움말에 닿지 못하고 갇히면 빠져나오지 못하므로, 패널 실행 시 초점을 패널로 이동하고 본문으로 나갈 수 있게(키보드 함정 없이) 구현해야 합니다.

3. 점검 / 개선

무엇을 점검하나

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

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

닫기 복귀 — Esc/닫기 시 초점이 원래 아이콘으로 복귀하는가.

개선 방향

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

Tab으로 본문 이동 가능, Esc로 닫고 초점 복귀(WCAG 2.1.2 함정 없음).

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

역할	책임
퍼블리셔/개발	초점 이동·함정 방지·닫기 복귀 구현
QA/접근성	키보드 단독 패널 진입·탈출 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

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

□ Esc/닫기 시 초점이 원래 아이콘으로 복귀하나요?

❓ FAQ

Q1. 도움 패널도 모달처럼 초점을 가두나요? 아닙니다. 도움 패널은 보통 비모달이라 본문과 자유로이 오가야 합니다. 초점을 가두면(함정) WCAG 2.1.2 위반이죠. Q2. 초점이 패널로 안 옮겨가면요? 키보드·스크린 리더 사용자가 새로 뜬 도움말에 닿지 못하거나 인지 못 합니다. 패널로 초점을 옮겨야 하죠. Q3. 닫으면 초점이 어디로 가나요? 패널을 열었던 원래 도움 아이콘으로 복귀합니다. 작업 맥락으로 돌아오게요.

6. 마무리

CP-346의 메시지:

들어가고 나올 수 있게 — 패널 열리면 초점을 패널로, 함정 없이 본문으로 나오게.

패널이 열려도 초점이 안 옮겨가면 도움말에 닿지 못하고, 갇히면 빠져나오지 못합니다. 패널 실행 시 초점을 패널로 옮기되 비모달이라 갇히지 않게(함정 방지) 구현하는 게 핵심이죠. 다음 편은 아이콘 버튼 크기입니다.

다음 편 예고 ▶ 「467. (CP-347) 아이콘 버튼의 크기는 CSS 픽셀 기준 44px x 44px 이상으로 제공하고 있다.」

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

📚 참고 출처

KRDS 컴포넌트 — 도움 패널(Help panel) 가이드 — https://www.krds.go.kr/html/site/component/component_33.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컴포넌트,웹표준