이 답은 이 질문의 것

KRDS CP-197 — 헤더와 패널은 서로 관련 있는 것으로 인지될 수 있게 표현하고 있다.

0. 들어가며 — 펼친 내용이 어느 헤더 것인지

이번 317편은 아코디언 헤더와 패널이 서로 관련 있는 것으로 인지되게 표현하라는 규칙입니다.

아코디언에서 헤더(제목)를 펼치면 패널(내용)이 나타납니다. 그런데 여러 헤더가 나열된 상태에서, 펼친 패널이 어느 헤더에 속하는지 시각적으로 불분명하면 — 사용자는 ‘이 내용이 어느 질문의 답이지?’ 헷갈리죠. CP-197은 헤더와 그 패널이 한 쌍임을 시각적으로 명확히 표현하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 헤더-패널 관련 인지 표현

CP-197 (컴포넌트 > 아코디언) “헤더와 패널은 서로 관련 있는 것으로 인지될 수 있게 표현하고 있다.”

아코디언의 헤더(제목)와 그것을 펼쳤을 때 나타나는 패널(내용)이 한 쌍으로 묶여 있음을, 사용자가 시각적으로 인지하게 표현하라는 뜻입니다.

정리: 헤더와 그 패널이 한 쌍임을 시각적으로 명확히 하라. 이게 CP-197입니다.

2. 왜 헤더-패널 관련성을 명확히 하나

아코디언은 여러 ‘헤더 + 패널’ 쌍이 세로로 나열된 구조입니다. 사용자가 한 헤더를 펼치면 그 패널이 헤더 아래에 나타나죠. 이때 — 펼친 패널이 어느 헤더의 내용인지 명확해야 합니다. 여러 항목이 나열된 상황에서 관련성이 흐려지면 혼란이 생기죠.

관련성이 불명확할 때. 헤더와 패널의 시각적 연결이 약하면:

소속 혼동 — 펼친 패널이 위 헤더 것인지, 아래 헤더 것인지 헷갈립니다. 특히 여러 패널이 펼쳐진 상태(여러 개 동시 펼침 허용 시)에서는 어느 내용이 어느 질문의 답인지 더 흐려지죠.

구조 파악 실패 — 헤더들과 패널들이 뒤섞여 보여, 아코디언의 ‘제목-내용’ 구조가 안 읽힙니다.

그래서 CP-197은 헤더와 그 패널이 한 쌍임을 시각적으로 명확히 표현하라고 합니다. 방법:

① 시각적 그룹핑(게슈탈트). 헤더와 그 패널을 시각적으로 묶습니다 — 같은 배경 영역으로 감싸거나, 들여쓰기· 구분선·여백으로 ‘이 헤더 + 이 패널 = 한 묶음’을 표현하죠. 게슈탈트의 ’공통 영역·근접성’ 원리입니다(사이드 메뉴 계층 구분 CP-095, 디스클로저 배치 CP-172 정신). 예를 들어:

인접 배치 — 패널이 헤더 바로 아래에 붙어 나타나, 둘이 가까이 묶임(근접성).

공통 테두리/배경 — 펼친 헤더와 패널을 같은 테두리나 배경색으로 감싸 한 영역으로 표현.

헤더 강조 — 펼쳐진 헤더를 시각적으로 강조(배경색·굵기)해, ’이 헤더가 지금 열려 있고 아래가 그 내용’임을 표시.

항목 간 구분 — 각 헤더-패널 쌍 사이에 구분선·여백을 둬, 다른 쌍과 경계를 명확히.

② 펼침 상태 표시. 펼쳐진 헤더가 다른(접힌) 헤더와 구별되게 표현하면(아이콘 방향 CP-195 + 헤더 강조), 사용자는 ’어느 헤더가 열려 있는지’와 ’그 아래가 그 내용’임을 함께 읽죠.

접근성 — 프로그래밍적 연결. 시각적 관련성에 더해, 코드상으로도 헤더와 패널을 연결해야 합니다 — 헤더 버튼의 aria-controls가 그 패널을 가리키고, 패널의 aria-labelledby가 그 헤더를 가리키면(WAI-ARIA 아코디언 패턴), 스크린 리더가 ‘이 헤더가 이 패널을 제어한다’, ’이 패널은 이 헤더에 속한다’는 관계를 인지하죠. 시각 사용자가 그룹핑으로 보는 관련성을, 비시각 사용자는 이 ARIA 연결로 얻습니다. 시각(CP-197)과 코드(ARIA 연결) 양쪽에서 관련성을 보장하는 것이죠.

이 규칙은 CP-196(헤더 전체 클릭)과 함께 아코디언의 구조 명확성을 담당합니다 — 헤더가 누르기 쉽고(196), 헤더- 패널 관계가 명확하면(197), 사용자는 아코디언을 직관적으로 씁니다. 그리고 헤더 제목의 시맨틱 마크업(CP-199), 버튼 역할(CP-201)이 구조를 보조기술에 완성하죠.

정리하면 — 아코디언은 여러 헤더-패널 쌍이 나열되므로, 각 헤더와 그 패널이 한 쌍임을 시각적 그룹핑과 ARIA 연결로 명확히 해, 사용자가 ’이 내용이 이 제목의 것’임을 인지하게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

시각 그룹핑 — 헤더와 그 패널이 시각적으로 한 묶음으로 보이는가(배경·구분선·여백).

소속 명확 — 펼친 패널이 어느 헤더 것인지 분명한가.

ARIA 연결 — aria-controls/aria-labelledby로 헤더-패널이 연결됐는가.

개선 방향

헤더-패널을 공통 영역·근접 배치·구분선으로 시각적 그룹핑. 펼친 헤더 강조.

aria-controls(헤더→패널)·aria-labelledby(패널→헤더) 연결.

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

역할	책임
디자이너	헤더-패널 시각 그룹핑 정의
퍼블리셔/개발	그룹핑·ARIA 연결 구현

기관 유형	CP-197 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (아코디언 사용 시)

아코디언을 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 헤더와 그 패널이 시각적으로 한 묶음으로 보이나요(배경·구분선·여백)?

□ 펼친 패널이 어느 헤더 것인지 분명한가요?

□ aria-controls/aria-labelledby로 헤더-패널이 연결됐나요?

❓ FAQ

Q1. 패널이 헤더 아래 있으면 자동으로 관련돼 보이지 않나요? 여러 쌍이 나열되면 경계가 흐려질 수 있습니다. 공통 영역·구분선으로 묶음을 명확히 해야 합니다. Q2. 여러 패널이 동시에 펼쳐지면요? 관련성이 더 흐려지기 쉽습니다. 각 쌍을 시각적으로 분명히 묶고 펼친 헤더를 강조합니다. Q3. 스크린 리더에도 관련성이 전달되나요? aria-controls/aria-labelledby로 헤더-패널을 연결하면 관계가 전달됩니다.

6. 마무리

CP-197의 메시지:

이 답은 이 질문의 것 — 헤더와 패널이 한 쌍임을 명확히 표현하라.

아코디언은 여러 헤더-패널 쌍이 나열되므로, 각 쌍의 관련성이 흐려지면 ’이 내용이 어느 제목 것’인지 헷갈립니다. 시각적 그룹핑(공통 영역·근접·구분선)과 ARIA 연결로 한 쌍임을 명확히 하죠. 다음 편은 패널 영역의 스크롤 발생 방지입니다.

다음 편 예고 ▶ 「318. (CP-198) 패널 영역에 스크롤이 발생하지 않도록 하고 있다.」

ViewCheck는 아코디언 헤더와 패널의 관련성이 명확히 표현되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 아코디언(Accordion) 가이드 — https://www.krds.go.kr/html/site/component/component_18.html

WAI-ARIA APG — Accordion Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

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

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