가리키는 요소와 안내를 순서대로

KRDS CP-375 — 관련 요소와 코치마크 팝오버 콘텐츠를 적절한 순서로 제공하고 있다.

0. 들어가며 — 안내와 대상이 따로 놀면

이번 495편은 관련 요소와 코치마크 팝오버 콘텐츠를 적절한 순서로 제공하라는 규칙입니다. 이로써 코치마크 10개 규칙이 마무리됩니다.

코치마크는 — 특정 요소(관련 요소)를 가리키며 팝오버로 안내합니다. 이 둘의 DOM·읽기 순서가 — 논리적이어야 키보드· 스크린 리더 사용자가 ’무엇을 가리키는 안내인지’를 알죠. CP-375는 요소-팝오버 순서를 규정합니다. 맥락적 도움말 CP-364와 통하는 규칙이죠. 이번 편을 풀어냅니다.

1. 원문 — 관련 요소·팝오버 적절한 순서

CP-375 (컴포넌트 > 코치마크) “관련 요소와 코치마크 팝오버 콘텐츠를 적절한 순서로 제공하고 있다.”

코치마크가 가리키는 관련 요소와 팝오버 안내 콘텐츠의 DOM/읽기 순서를, 논리적으로 적절하게 제공하라는 뜻입니다.

정리: 관련 요소와 코치마크 팝오버를 적절한 순서로 제공하라. 이게 CP-375입니다.

2. 왜 적절한 순서인가

코치마크는 — ‘관련 요소’(안내 대상)를 강조(스포트라이트)하며, 그 옆 팝오버로 안내합니다. 키보드·스크린 리더 사용자에게 — 이 관련 요소와 팝오버 콘텐츠의 순서가 논리적이어야, ’무엇을 가리키는 안내인지’를 이해하죠. CP-375는 그 순서를 다룹니다.

시각 vs DOM/읽기 순서. 코치마크 팝오버는 시각적으로 관련 요소 옆에 뜹니다(CP-366). 하지만 스크린 리더· 키보드는 DOM/읽기 순서를 따르죠. 만약 관련 요소와 팝오버 콘텐츠가 DOM에서 동떨어져 있거나 순서가 뒤바뀌면, 보조기술 사용자는 둘의 연결을 못 잡습니다.

순서가 어긋날 때의 문제:

연결 상실 — 스크린 리더 사용자가 — 팝오버 안내(‘이 버튼으로 검색하세요’)를 들었는데, 그게 어느 요소에 대한 건지(관련 요소) DOM상 연결이 없으면, ’이 버튼’이 어느 버튼인지 모릅니다. 안내와 대상이 따로 놀죠.

읽기 혼란 — 관련 요소와 팝오버 콘텐츠가 읽기 순서상 뒤죽박죽이면 — 스크린 리더 사용자가 맥락을 잃습니다.

그래서 CP-375는 — 관련 요소와 팝오버 콘텐츠를 적절한 순서로 제공하라고 합니다:

논리적 순서 관련 요소와 그에 대한 팝오버 안내가 DOM/읽기 순서상 논리적으로 이어지게 합니다. 보통 관련 요소를 인지한 다음(또는 함께) 그 안내를 읽는 순서가 자연스럽죠.

프로그래밍적 연결 팝오버를 관련 요소와 aria(aria-describedby/aria-labelledby/aria-controls)로 연결해, ’이 안내가 그 요소에 대한 것’임을 명확히 합니다. 시각적 화살표(CP-366)에 더해 코드로도 연결하죠.

초점 관리(CP-364 정신) — 코치마크 단계가 진행되면 — 초점이 관련 요소 또는 팝오버로 논리적으로 이동하게 합니다. 단계마다 ’지금 이 요소를 안내한다’를 키보드·스크린 리더 사용자가 따라가게요.

스크린 리더 안내 흐름. 이상적으로는 — 코치마크 단계가 뜨면, 스크린 리더가 ’○○ 단계: [관련 요소명]에 대한 안내, [팝오버 내용]’처럼 — 관련 요소와 안내를 연결해 읽습니다. 관련 요소가 무엇인지(이름) + 그 안내(팝오버)가 순서대로 전달되죠.

코치마크 접근성의 종합. 코치마크는 — 시각적으론 스포트라이트(CP-373)·화살표(CP-366)로 대상을 가리키지만, 보조기술 사용자에겐 그게 안 통합니다. 그래서 — 관련 요소와 팝오버를 적절한 순서·프로그래밍적 연결(375)로 묶어, 보조기술 사용자도 ’무엇에 대한 안내인지’를 알게 하죠. 요청 실행(CP-374)·단독 표시(CP-370)·순서 연결(375)이 함께 코치마크의 키보드/스크린 리더 접근성을 완성합니다.

이 규칙은 코치마크의 ’안내-대상 연결 접근성’을 담당합니다 — 관련 요소와 팝오버를 적절한 순서로 연결해(375), 보조 기술 사용자가 코치마크 안내가 어느 요소에 대한 것인지 이해하게 하죠. 코치마크 10개 규칙이 이로써 마무리됩니다.

정리하면 — 관련 요소와 팝오버 콘텐츠의 순서가 어긋나면 보조기술 사용자가 안내와 대상의 연결을 못 잡으므로, 둘을 적절한 순서로 제공하고 프로그래밍적으로 연결해 어느 요소에 대한 안내인지 명확히 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

적절한 순서 — 관련 요소와 팝오버 콘텐츠가 DOM/읽기 순서상 논리적으로 이어지는가.

프로그래밍 연결 — 팝오버가 관련 요소와 aria로 연결됐는가.

초점·안내 — 단계 진행 시 초점·스크린 리더 안내가 관련 요소-팝오버를 연결하는가.

개선 방향

관련 요소와 팝오버를 논리적 순서로 배치, aria-describedby/controls로 연결.

단계마다 초점을 관련 요소/팝오버로 논리적 이동. 스크린 리더로 연결 안내 검증.

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

역할	책임
퍼블리셔/개발	순서·aria 연결·초점 구현
QA/접근성	스크린 리더 안내-대상 연결 검증

기관 유형	CP-375 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (코치마크 사용 시)

웹접근성 의무 대상이며 코치마크를 쓰는 사이트에 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 관련 요소와 팝오버 콘텐츠가 DOM/읽기 순서상 논리적으로 이어지나요?

□ 팝오버가 관련 요소와 aria로 연결됐나요?

□ 단계 진행 시 초점·스크린 리더 안내가 관련 요소-팝오버를 연결하나요?

❓ FAQ

Q1. 시각적 화살표(CP-366)로 가리키면 충분하지 않나요? 화살표는 보는 사용자용입니다. 보조기술 사용자에겐 DOM 순서·aria 연결이 필요하죠. Q2. 어떻게 연결하나요? 팝오버를 관련 요소와 aria-describedby/aria-controls로 연결하고, DOM 순서를 논리적 으로 둡니다. Q3. CP-364(맥락적 도움말)와 같나요? 같은 순서·연결 정신입니다. 코치마크는 ‘관련 요소-팝오버’ 연결을 다루죠.

6. 마무리

CP-375의 메시지:

가리키는 요소와 안내를 순서대로 — 관련 요소와 팝오버를 적절한 순서로 연결하라.

관련 요소와 팝오버 순서가 어긋나면 보조기술 사용자가 안내와 대상의 연결을 못 잡습니다. 둘을 적절한 순서로 제공하고 aria로 연결해 어느 요소에 대한 안내인지 명확히 하는 게 핵심이죠. 이로써 코치마크 10개 규칙이 마무리됩니다. 다음 편부터는 툴팁(Tooltip)입니다.

다음 편 예고 ▶ 「496. (CP-376) 툴팁 — 요소에 대한 짧은 보충 설명을 제공하는 데 사용하고 있다.」

ViewCheck는 관련 요소와 코치마크 팝오버의 순서·연결을 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 코치마크(Coach mark) 가이드 — https://www.krds.go.kr/html/site/component/component_36.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컴포넌트,웹표준