본문 먼저, 도움말은 그다음

KRDS CP-348 — 키보드, 스크린 리더 사용자가 우선 본문의 다양한 정보와 컨트롤 요소에 대한 개요를 파악한 후 도움 패널의 사용 여부를 결정할 수 있도록 본문 다음 요소로 제공하고 있다.

0. 들어가며 — 보조 정보가 본문보다 먼저 읽히면

이번 468편은 키보드·스크린 리더 사용자가 본문 개요를 먼저 파악한 후 도움 패널 사용을 결정하도록, 패널을 본문 다음 요소로 제공하라는 규칙입니다. 이로써 도움 패널 14개 규칙이 마무리됩니다.

스크린 리더·키보드 사용자는 — DOM 순서대로 콘텐츠를 읽고 탐색합니다. 보조인 도움 패널이 — 본문보다 먼저 DOM에 있으면, 사용자는 작업 본문을 보기도 전에 도움말부터 거쳐야 하죠. CP-348은 패널을 본문 다음에 두라고 규정합니다. 도움 패널 그룹의 마지막이자 DOM 순서 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 본문 다음 요소로 제공

CP-348 (컴포넌트 > 도움 패널) “키보드, 스크린 리더 사용자가 우선 본문의 다양한 정보와 컨트롤 요소에 대한 개요를 파악한 후 도움 패널의 사용 여부를 결정할 수 있도록 본문 다음 요소로 제공하고 있다.”

도움 패널을 DOM(읽기/탐색 순서)상 본문 다음에 배치해, 사용자가 본문을 먼저 파악한 뒤 패널 사용을 결정하게 하라는 뜻입니다.

정리: 도움 패널을 DOM상 본문 다음에 두어라. 이게 CP-348입니다.

2. 왜 본문 다음 요소인가

스크린 리더·키보드 사용자는 — 화면의 시각적 위치가 아니라 DOM 순서(HTML에 작성된 순서)대로 콘텐츠를 읽고 Tab으로 탐색합니다. 그래서 — 요소가 DOM에서 어디 있느냐가 이들의 경험을 좌우하죠. CP-348은 도움 패널의 DOM 위치를 규정합니다.

시각 위치 vs DOM 순서. 도움 패널은 시각적으로는 본문 오른쪽 옆에 있을 수 있습니다(CSS로 배치). 하지만 DOM(HTML 소스)에서는 본문보다 앞에 올 수도, 뒤에 올 수도 있죠. 시각 위치와 DOM 순서는 별개입니다(CSS로 시각 배치는 자유로우니). 문제는 스크린 리더·키보드는 DOM 순서를 따른다는 점입니다.

패널이 DOM상 본문보다 앞에 있을 때의 문제:

보조가 먼저 읽힘 도움 패널이 DOM에서 본문보다 앞에 있으면, 스크린 리더 사용자는 본문을 보기도 전에 도움 패널부터 읽게 됩니다. 작업할 본문(입력 항목·컨트롤)을 파악하기 전에 보조 정보(도움말)를 먼저 듣는 거죠. 맥락 없이 도움말부터 들으면 혼란스럽습니다(CP-336의 기본 상태 정신과도 통함).

탐색 비효율 — 키보드 사용자도 — Tab을 누르면 본문보다 패널 요소들(여러 항목)에 먼저 닿아, 정작 작업할 본문에 가려면 패널을 다 거쳐야 하죠. 비효율적입니다.

결정 순서 역전 사용자는 ‘본문이 어떤 작업이고 무엇이 필요한지’ 먼저 파악한 뒤에 ’도움말이 필요한가’를 결정하는 게 자연스럽습니다. 패널이 먼저 오면 작업도 모르는데 도움말부터 마주해, 도움이 필요한지 판단할 근거가 없죠.

그래서 CP-348은 — 도움 패널을 DOM상 본문 다음에 두라고 합니다:

본문 우선 DOM HTML에서 본문(작업 영역, 입력 항목·컨트롤)을 먼저 두고, 도움 패널을 그 다음에 둡니다. 그러면 스크린 리더는 본문을 먼저 읽고, 키보드는 본문을 먼저 탐색하죠.

시각 배치는 CSS로 — 시각적으로 패널을 본문 옆(오른쪽)에 두고 싶으면 — CSS(flexbox/grid)로 배치합니다. DOM은 본문→패널 순서이되, 화면엔 나란히 보이게요. DOM 순서와 시각 배치를 분리하죠.

결정 순서 보장 — 사용자가 — 본문 개요(어떤 작업, 어떤 항목·컨트롤)를 먼저 파악한 뒤, ’도움말이 필요한가’를 스스로 결정하게요. 자연스러운 순서죠.

스킵 링크 등 보조. 본문 다음에 패널을 둬도 사용자가 빠르게 패널로 가고 싶을 수 있죠. 그땐 본문 안 도움 아이콘(CP-337)이 패널로 연결되거나, 건너뛰기 링크(메인 콘텐츠 바로가기 정신)로 보조할 수 있습니다. 핵심은 기본 읽기/탐색 순서가 본문 우선이라는 것입니다.

모달/비모달과의 관계. 도움 패널은 비모달이라(CP-346) 본문과 공존하죠. DOM상 본문 다음에 두는 건 — 이 비모달 패널이 본문을 방해하지 않게 하는 구조적 배치입니다.

이 규칙은 도움 패널의 ’DOM 구조 접근성’을 담당합니다 — 패널을 본문 다음에 둬(348), 스크린 리더·키보드 사용자가 본문을 먼저 파악하고 도움말 사용을 스스로 결정하게 하죠. 시각 배치(CSS)와 DOM 순서를 분리하는 게 핵심입니다. 도움 패널 14개 규칙이 이로써 마무리됩니다.

정리하면 — 스크린 리더·키보드는 DOM 순서를 따르므로, 보조인 도움 패널이 본문보다 먼저 오면 작업 파악 전에 도움 말부터 마주하게 되어, 패널을 DOM상 본문 다음에 두고 시각 배치는 CSS로 처리해 본문 우선 탐색을 보장해야 합니다.

3. 점검 / 개선

무엇을 점검하나

DOM 순서 — 도움 패널이 DOM상 본문 다음에 있는가(본문보다 앞 아님).

시각-DOM 분리 — 시각적으로 옆에 두되 DOM은 본문 우선인가(CSS 배치).

탐색 순서 — 스크린 리더·키보드가 본문을 먼저 읽고 탐색하는가.

개선 방향

HTML에서 본문→도움 패널 순서로 배치. 시각적 옆 배치는 CSS(flex/grid)로.

스크린 리더·키보드로 본문 우선 탐색 검증. 도움 아이콘으로 패널 연결 보조.

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

역할	책임
퍼블리셔/개발	DOM 순서(본문→패널) + CSS 시각 배치 구현
QA/접근성	스크린 리더·키보드 본문 우선 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 도움 패널이 DOM상 본문 다음에 있나요(본문보다 앞 아님)?

□ 시각적으로 옆에 두되 DOM은 본문 우선인가요(CSS 배치)?

□ 스크린 리더·키보드가 본문을 먼저 읽고 탐색하나요?

❓ FAQ

Q1. 패널을 본문 오른쪽에 두려면 DOM도 본문 뒤여야 하나요? 시각 위치(오른쪽)는 CSS로, DOM은 본문 다음으로 둡니다. 시각 배치와 DOM 순서는 분리되죠. Q2. 왜 본문이 먼저여야 하나요? 스크린 리더·키보드는 DOM 순서를 따릅니다. 보조인 패널이 먼저 오면 작업 파악 전에 도움말부터 마주해 혼란스럽죠. Q3. 패널로 빨리 가고 싶으면요? 본문 안 도움 아이콘(CP-337)이 패널로 연결하거나 건너뛰기 링크로 보조합니다. 기본 순서는 본문 우선이죠.

6. 마무리

CP-348의 메시지:

본문 먼저, 도움말은 그다음 — 도움 패널을 DOM상 본문 다음 요소로 제공하라.

스크린 리더·키보드는 DOM 순서를 따르므로, 보조인 패널이 본문보다 먼저 오면 작업 파악 전에 도움말부터 마주합니다. 패널을 DOM상 본문 다음에 두고 시각 배치는 CSS로 처리하는 게 핵심이죠. 이로써 도움 패널 14개 규칙이 마무리됩니다. 다음 편부터는 따라하기(Step-by-step)입니다.

다음 편 예고 ▶ 「469. (CP-349) 따라하기 — 순서대로 수행해야 하는 작업 안내에 사용하고 있다.」

ViewCheck는 도움 패널이 DOM상 본문 다음에 배치됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 도움 패널(Help panel) 가이드 — https://www.krds.go.kr/html/site/component/component_33.html

WCAG 2.1 SC 1.3.2 Meaningful Sequence — https://www.w3.org/WAI/WCAG21/Understanding/meaningful-sequence.html

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

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