누른 자리에서 도움말로, 다시 제자리로

KRDS CP-364 — 아이콘 버튼과 팝오버 콘텐츠를 적절한 순서로 제공하며, 키보드 초점은 논리적인 순서로 이동시키고 있다.

0. 들어가며 — 도움말을 열면 초점이 어디로

이번 484편은 아이콘 버튼과 팝오버 콘텐츠를 적절한 순서로 제공하고, 키보드 초점을 논리적 순서로 이동시키라는 규칙입니다.

맥락적 도움말은 — 아이콘 옆에 팝오버가 뜨는데, DOM 순서와 초점 이동이 논리적이어야 키보드·스크린 리더 사용자가 혼란 없이 쓰죠. CP-364는 순서와 초점 이동을 규정합니다. 도움 패널 CP-346(초점)과 통하되, 맥락적 도움말 특유의 ‘아이콘→팝오버→복귀’ 흐름을 다루죠. 이번 편을 풀어냅니다.

1. 원문 — 적절한 순서 + 논리적 초점 이동

CP-364 (컴포넌트 > 맥락적 도움말) “아이콘 버튼과 팝오버 콘텐츠를 적절한 순서로 제공하며, 키보드 초점은 논리적인 순서로 이동시키고 있다.”

아이콘 버튼과 팝오버 콘텐츠의 DOM/읽기 순서를 적절히 하고, 키보드 초점이 아이콘→팝오버→복귀의 논리적 순서로 이동하게 하라는 뜻입니다.

정리: 아이콘·팝오버를 적절한 순서로, 초점을 논리적으로 이동시켜라. 이게 CP-364입니다.

2. 왜 순서·초점 이동인가

맥락적 도움말은 — 아이콘을 누르면 그 근처에 팝오버가 뜨고, 사용자가 읽고 닫는 흐름입니다. 키보드·스크린 리더 사용자에게 — 이 흐름의 DOM 순서와 초점 이동이 논리적이어야 혼란이 없죠. CP-364는 둘을 요구합니다.

① 아이콘 버튼과 팝오버 콘텐츠의 적절한 순서. 아이콘과 그 팝오버 내용이 — DOM·읽기 순서상 논리적으로 이어 져야 합니다.

순서가 어긋날 때 — 팝오버 콘텐츠가 — DOM에서 아이콘과 동떨어진 곳(예: 페이지 맨 끝)에 있으면, 스크린 리더 사용자가 아이콘을 읽은 뒤 그 팝오버 내용을 어디서 만날지 모르죠. 아이콘과 도움말 내용의 연결이 끊깁니다.

적절한 순서 아이콘 버튼 직후(또는 논리적으로 연결된 위치)에 팝오버 콘텐츠가 오게 DOM을 구성합니다. 아이콘을 읽으면 바로 그 도움말로 이어지게요. 또는 팝오버를 aria(aria-describedby/aria-controls)로 아이콘과 연결해, 관계를 명확히 합니다.

② 키보드 초점의 논리적 이동. 도움말을 열고 닫을 때 — 키보드 초점이 논리적 순서로 움직여야 합니다.

열 때 — 사용자가 아이콘을 눌러(클릭/Enter, CP-363) 팝오버가 뜨면 — 초점을 팝오버로 이동시킵니다(팝오버 안에 닫기 버튼·링크 등 조작 요소가 있으면 그곳으로). 그래야 키보드 사용자가 팝오버 내용을 읽고 조작하죠. 도움 패널 CP-346의 초점 이동과 같은 정신입니다.

단, 팝오버가 짧은 텍스트뿐이면 — 초점을 옮기지 않고 aria-live나 aria-describedby로 읽히게 하는 방식도 있죠. 조작 요소가 있으면 초점 이동이 적절합니다.

닫을 때 — 팝오버를 닫으면(Esc·바깥 클릭·닫기 버튼) — 초점을 원래 아이콘 버튼으로 복귀시킵니다. 그래야 사용자가 작업하던 맥락(그 요소 옆)으로 돌아오죠. 초점이 엉뚱한 곳(페이지 맨 위 등)으로 가면 길을 잃습니다.

함정 없음 팝오버 안에서 Tab으로 조작 요소를 거친 뒤 빠져나올 수 있어야 합니다(키보드 함정 없음, WCAG 2.1.2). 맥락적 도움말은 가벼운 팝오버라 모달처럼 초점을 가두지 않고, 닫으면 복귀하는 흐름이죠.

논리적 흐름 정리:

아이콘에 초점 → Enter로 팝오버 열림 → 초점이 팝오버로(조작 요소 있으면).

팝오버 내용 읽고 조작 → Esc/닫기 → 초점이 원래 아이콘으로 복귀.

이 흐름이 — DOM 순서(아이콘 직후 팝오버)와도 일치해, 스크린 리더 읽기 순서가 자연스럽게요.

스크린 리더 연계. 아이콘 버튼(이름 CP-362) → 팝오버 내용이 논리적으로 이어지고, 팝오버가 열리면 스크린 리더가 그 내용을 인지하게(초점 이동 또는 라이브 영역) 합니다. 순서(364)·이름(362)·요청 실행(363)이 함께 맥락적 도움말의 키보드/스크린 리더 접근성을 완성하죠.

이 규칙은 맥락적 도움말의 ’키보드·읽기 흐름’을 담당합니다 — 아이콘·팝오버를 논리적 순서로 두고 초점을 아이콘→ 팝오버→복귀로 이동시켜(364), 키보드·스크린 리더 사용자가 혼란 없이 도움말을 열고 읽고 닫게 하죠.

정리하면 — 아이콘과 팝오버의 순서가 어긋나거나 초점 이동이 비논리적이면 키보드·스크린 리더 사용자가 혼란스러우 므로, 아이콘 직후 팝오버를 두고 초점을 아이콘→팝오버→복귀의 논리적 순서로 이동시켜야 합니다.

3. 점검 / 개선

무엇을 점검하나

적절한 순서 — 아이콘 버튼 직후(또는 aria 연결로) 팝오버 콘텐츠가 논리적으로 이어지는가.

초점 이동 — 열 때 팝오버로(조작 요소 있으면), 닫을 때 원래 아이콘으로 초점이 가는가.

함정 없음 — 팝오버에서 빠져나올 수 있는가(키보드 함정 없음).

개선 방향

아이콘 직후 팝오버 DOM 배치 또는 aria-controls/describedby 연결.

열 때 팝오버 초점 이동, 닫을 때 아이콘 복귀. Esc 닫기. 함정 방지(WCAG 2.1.2).

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

역할	책임
퍼블리셔/개발	순서·초점 이동·복귀 구현
QA/접근성	키보드 열고 닫기·초점 흐름 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 아이콘 직후(또는 aria 연결로) 팝오버 콘텐츠가 논리적으로 이어지나요?

□ 열 때 팝오버로, 닫을 때 원래 아이콘으로 초점이 가나요?

□ 팝오버에서 빠져나올 수 있나요(키보드 함정 없음)?

❓ FAQ

Q1. 팝오버를 열면 초점을 꼭 옮겨야 하나요? 조작 요소(닫기·링크)가 있으면 옮깁니다. 짧은 텍스트뿐이면 aria-describedby로 읽히게 할 수도 있죠. Q2. 닫으면 초점이 어디로? 원래 아이콘 버튼으로 복귀합니다. 작업하던 맥락으로 돌아오게요. 엉뚱한 곳으로 가면 길을 잃죠. Q3. 모달처럼 초점을 가두나요? 아닙니다. 가벼운 팝오버라 가두지 않고, 빠져나올 수 있되 닫으면 복귀합니다(WCAG 2.1.2).

6. 마무리

CP-364의 메시지:

누른 자리에서 도움말로, 다시 제자리로 — 아이콘·팝오버 순서와 초점을 논리적으로.

아이콘·팝오버 순서가 어긋나거나 초점 이동이 비논리적이면 키보드·스크린 리더 사용자가 혼란스럽습니다. 아이콘 직후 팝오버를 두고 초점을 아이콘→팝오버→복귀로 이동시키는 게 핵심이죠. 다음 편은 아이콘 버튼 크기입니다.

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

ViewCheck는 아이콘·팝오버 순서와 초점 이동의 논리성을 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 맥락적 도움말(Contextual help) 가이드 — https://www.krds.go.kr/html/site/component/component_35.html

WCAG 2.1 SC 2.4.3 Focus Order — https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

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

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