본문 먼저, 따라하기는 그다음

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

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

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

스크린 리더·키보드 사용자는 — DOM 순서대로 콘텐츠를 읽습니다. 보조인 따라하기 패널이 — 본문보다 먼저 DOM에 있으면, 작업 본문을 보기도 전에 따라하기 안내부터 거쳐야 하죠. CP-354는 패널을 본문 다음에 두라고 규정합니다. 도움 패널 CP-348과 평행한 DOM 순서 규칙이죠. 이번 편을 풀어냅니다.

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

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

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

정리: 따라하기 패널을 DOM상 본문 다음에 두어라. 이게 CP-354입니다.

2. 왜 본문 다음 요소인가

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

시각 위치 vs DOM 순서. 따라하기 패널은 — 시각적으로 본문 옆에 있을 수 있지만(CSS 배치), DOM(HTML 소스)에서는 본문보다 앞에 올 수도 뒤에 올 수도 있죠. 스크린 리더·키보드는 DOM 순서를 따릅니다.

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

보조가 먼저 읽힘 — 따라하기 패널이 — DOM에서 본문보다 앞에 있으면, 스크린 리더 사용자는 본문을 보기도 전에 따라하기 안내부터 읽게 됩니다. 작업할 본문(따라 할 항목·컨트롤)을 파악하기 전에 안내부터 들으면, 무엇에 대한 안내인지 맥락 없이 혼란스럽죠.

탐색 비효율 — 키보드 사용자도 Tab을 누르면 본문보다 패널에 먼저 닿아, 작업 본문에 가려면 패널을 거쳐야 하죠.

결정 순서 역전 — 사용자는 — ‘본문이 어떤 작업이고 무엇이 필요한지’ 먼저 파악한 뒤에 ’따라하기 안내가 필요한가’를 결정하는 게 자연스럽습니다. 패널이 먼저 오면 작업도 모르는데 안내부터 마주하죠.

그래서 CP-354는 — 따라하기 패널을 DOM상 본문 다음에 두라고 합니다:

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

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

결정 순서 보장 — 사용자가 본문 개요를 먼저 파악한 뒤 ’따라하기가 필요한가’를 스스로 결정하게요.

따라하기 특유 본문이 작업 무대. 따라하기는 본문에서 실제 작업을 하는 가이드입니다(CP-353). 그러니 본문 (작업 무대)을 먼저 파악하는 게 더욱 중요하죠. 무엇을 할 화면인지 알아야 따라하기가 의미 있으니까요. DOM상 본문 우선은 따라하기의 본질(‘본문에서 따라 하기’)과도 맞습니다.

원문의 ‘패널의 사용 여부 결정’. 원문(따라하기 CP-354)은 ‘도움 패널’ 표현을 쓰지만(체크리스트 문구 그대로), 맥락은 따라하기 패널입니다. 핵심은 — 사용자가 본문을 먼저 파악하고 패널(따라하기) 사용을 결정하게, 본문 다음에 두라는 것이죠.

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

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

3. 점검 / 개선

무엇을 점검하나

DOM 순서 — 따라하기 패널이 DOM상 본문 다음에 있는가(본문보다 앞 아님).

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

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

개선 방향

HTML에서 본문→따라하기 패널 순서로 배치. 시각적 옆 배치는 CSS로.

스크린 리더·키보드로 본문 우선 탐색 검증.

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

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

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 따라하기 패널이 DOM상 본문 다음에 있나요(본문보다 앞 아님)?

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

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

❓ FAQ

Q1. 패널을 본문 옆에 두려면 DOM도 본문 뒤여야 하나요? 시각 위치는 CSS로, DOM은 본문 다음으로 둡니다. 시각 배치와 DOM 순서는 분리되죠. Q2. 왜 본문이 먼저여야 하나요? 스크린 리더·키보드는 DOM 순서를 따릅니다. 보조 패널이 먼저 오면 작업 파악 전에 안내부터 마주해 혼란스럽죠. 따라하기는 본문이 작업 무대라 더욱 본문 우선이 맞고요. Q3. 도움 패널 CP-348과 같나요? 같은 DOM 순서 정신입니다. 따라하기는 본문에서 따라 하는 게 본질이라 본문 우선이 더 자연스럽죠.

6. 마무리

CP-354의 메시지:

본문 먼저, 따라하기는 그다음 — 따라하기 패널을 DOM상 본문 다음 요소로 제공하라.

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

다음 편 예고 ▶ 「475. (CP-355) 맥락 도움 — 사용자가 입력·작업 중 필요한 도움을 맥락에 맞게 제공하는 데 사용 하고 있다.」

ViewCheck는 따라하기 패널이 DOM상 본문 다음에 배치됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 따라하기 패널(Tutorial panel) 가이드 — https://www.krds.go.kr/html/site/component/component_34.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컴포넌트,웹표준