제목 전체가 버튼이다

KRDS CP-196 — 헤더 전체를 클릭 가능하도록 제공하고 있다.

0. 들어가며 — 작은 화살표만 눌러야 하면

이번 316편은 아코디언 헤더 전체를 클릭 가능하도록 제공하라는 규칙입니다.

아코디언을 펼치려는데, 작은 화살표 아이콘만 클릭 영역이고 제목 텍스트는 안 눌리면 — 사용자는 그 작은 아이콘을 정확히 겨냥해야 하죠. 번거롭고, 특히 모바일 터치에서 어렵습니다. CP-196은 헤더 전체(제목 + 아이콘 영역)를 클릭 영역으로 만들어, 어디를 눌러도 펼쳐지게 하라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 헤더 전체 클릭 가능

CP-196 (컴포넌트 > 아코디언) “헤더 전체를 클릭 가능하도록 제공하고 있다.”

아코디언 헤더의 일부(아이콘 등)만이 아니라 헤더 영역 전체(제목 텍스트 포함)를 클릭 가능하게 해, 어디를 눌러도 펼침/접힘이 작동하게 하라는 뜻입니다.

정리: 헤더 전체를 클릭 영역으로 만들어라. 이게 CP-196입니다.

2. 왜 헤더 전체가 클릭 가능해야 하나

아코디언 헤더는 ’펼침/접힘 트리거’입니다. 사용자가 이 트리거를 쉽게 누를 수 있어야 아코디언이 편하게 작동 하죠. 클릭 영역이 좁으면(작은 아이콘만) 조작이 어려워집니다.

① 타깃 크기 누르기 쉬움. 작은 화살표 아이콘(보통 16~24px)만 클릭 영역이면 사용자는 그 작은 타깃을 정확히 겨냥해야 합니다. 마우스도 번거롭지만, 특히 모바일 터치는 손가락 접촉면이 넓어(약 9~10mm) 작은 아이콘을 정확히 누르기 어렵죠(피츠의 법칙, 페이지네이션 CP-131·탭 바 CP-134의 터치 영역 정신). 헤더 전체를 클릭 영역으로 만들면 제목 어디를 눌러도 펼쳐져, 큰 타깃이 되어 누르기 매우 쉽습니다. WCAG의 타깃 크기 기준 (충분한 클릭/터치 영역)도 충족하죠.

② 직관성 — 제목이 곧 버튼. 사용자는 보통 ’제목을 눌러 펼친다’고 직관적으로 기대합니다 — FAQ에서 질문 텍스트를 누르면 답이 나올 거라 여기죠. 그런데 제목은 안 눌리고 옆의 작은 화살표만 눌러야 하면, 기대와 어긋나 혼란스럽습니다. 헤더 전체(제목 포함)가 클릭되면 이 직관적 기대에 부합하죠.

③ 발견 가능성. 작은 아이콘만 누를 수 있으면, 사용자가 그 아이콘이 클릭 대상인지 모르고 지나칠 수 있습니다. 헤더 전체가 클릭 영역이고 hover 시 반응(배경 변화 등)하면 — ’아, 이 헤더 전체를 누르면 되는구나’를 쉽게 알죠.

그래서 CP-196은 헤더 전체를 클릭 가능하게 하라고 합니다. 구현의 핵심:

헤더 전체를 버튼으로 — 아코디언 헤더의 트리거를 <button>으로 만들고(CP-201의 버튼 역할), 그 버튼이 제목 텍스트 + 아이콘을 모두 감싸게 합니다. 그러면 버튼 영역(=헤더 전체)이 클릭·키보드 작동 영역이 되죠.

<h3> <button aria-expanded="false" aria-controls="panel1"> 질문 제목 <span class="icon" aria-hidden="true">▶</span> </button> </h3>

충분한 높이·패딩 — 헤더에 충분한 상하 패딩을 줘 클릭 영역을 넉넉하게.

hover·focus 반응 — 헤더 전체에 hover/focus 시 시각 반응을 줘 클릭 가능함을 알림.

이 규칙은 아코디언의 ’물리적 사용성’을 담당합니다 — 헤더 전체 클릭(196)으로 누르기 쉽게 하고, 헤더-패널 관련성 (CP-197)으로 구조를 명확히 하며, 헤더를 버튼 역할(CP-201)로 마크업해 키보드·스크린 리더도 쓰게 하죠. 디스 클로저 버튼 역할(CP-174), 모달 닫기(CP-183)에서 본 ’트리거를 제대로’의 아코디언 버전입니다.

키보드 연결. 헤더 전체를 <button>으로 만들면 — 마우스 클릭뿐 아니라 키보드(Tab 포커스 + Enter/Space)도 헤더 전체에서 작동하죠. 클릭 영역과 키보드 작동이 함께 헤더 전체로 통일됩니다.

정리하면 — 아코디언 헤더는 펼침 트리거이므로, 작은 아이콘만이 아니라 헤더 전체(제목 포함)를 클릭·키보드 영역 으로 만들어 누르기 쉽고 직관적이게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

헤더 전체 클릭 — 헤더의 제목 텍스트를 눌러도 펼침/접힘이 작동하는가(아이콘만 아님).

타깃 크기 — 헤더 클릭 영역이 충분히 큰가(모바일 터치 포함).

버튼 마크업 — 헤더 트리거가 <button>으로 제목+아이콘을 감싸는가(CP-201).

개선 방향

헤더 트리거를 <button>으로 제목+아이콘 전체를 감싸 클릭·키보드 영역 통일.

충분한 패딩·높이로 타깃 확대. hover/focus 반응 제공.

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

역할	책임
디자이너	헤더 전체 클릭 영역·반응 정의
퍼블리셔/개발	헤더 버튼화·클릭 영역 구현

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 헤더의 제목 텍스트를 눌러도 펼침/접힘이 작동하나요(아이콘만 아님)?

□ 헤더 클릭 영역이 충분히 큰가요(모바일 터치 포함)?

□ 헤더 트리거가 <button>으로 제목+아이콘을 감싸나요?

❓ FAQ

Q1. 화살표 아이콘만 눌러야 하면 안 되나요? 작은 아이콘은 겨냥이 어렵고, 사용자는 제목을 누를 거라 기대 합니다. 헤더 전체가 클릭돼야 편합니다. Q2. 어떻게 헤더 전체를 클릭되게 하나요? 헤더 트리거를 <button>으로 만들어 제목+아이콘을 모두 감싸면 버튼 영역 전체가 클릭됩니다. Q3. 키보드로도 되나요? <button>이면 Tab 포커스+Enter/Space로 작동합니다. 클릭과 키보드가 헤더 전체로 통일되죠.

6. 마무리

CP-196의 메시지:

제목 전체가 버튼이다 — 헤더 전체를 클릭 가능하게 제공하라.

작은 아이콘만 클릭 영역이면 겨냥이 어렵고 직관에 어긋납니다. 헤더 전체(제목 포함)를 <button>으로 만들어 클릭·키보드 영역으로 통일하면, 누르기 쉽고 사용자 기대에 부합하죠. 다음 편은 헤더와 패널의 관련성 표현입니다.

다음 편 예고 ▶ 「317. (CP-197) 헤더와 패널은 서로 관련 있는 것으로 인지될 수 있게 표현하고 있다.」

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컴포넌트,웹표준