헤더는 누르는 버튼이다

KRDS CP-201 — 헤더를 스크린 리더에서 버튼 역할로 인지하게 제공하고 있다.

0. 들어가며 — 아코디언 그룹의 마지막

이번 321편은 아코디언 그룹(CP-192~201, 10개)의 마지막 규칙입니다. 아코디언 헤더를 스크린 리더에서 버튼 역할로 인지하게 제공하라는 내용이죠.

아코디언 헤더는 — 누르면 패널을 펼치고 접는 동작 트리거입니다. 따라서 <button>(버튼 역할)으로 만들어야 스크린 리더가 ’버튼’으로 인지하고, 키보드로도 작동하죠. 디스클로저 헤더(CP-174)와 같은 원리입니다. CP-201은 이 버튼 역할을 규정하며 아코디언 10개를 마무리합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 헤더 버튼 역할 인지

CP-201 (컴포넌트 > 아코디언) “헤더를 스크린 리더에서 버튼 역할로 인지하게 제공하고 있다.”

아코디언 헤더의 펼침/접힘 트리거를 <button>(또는 role="button")으로 마크업해, 보조기술이 이를 ’버튼’으로 인지하고 키보드로 조작하게 하라는 뜻입니다.

정리: 아코디언 헤더를 버튼 역할로 제공하라. 이게 CP-201입니다.

2. 왜 헤더가 버튼 역할이어야 하나

아코디언 헤더가 하는 일은 — ’같은 페이지 안에서 패널을 펼치거나 접는 동작’입니다. 이는 페이지를 이동 하는 링크가 아니라, 상태를 바꾸는 버튼의 역할이죠. 그래서 헤더 트리거를 <button>으로 만들어야 합니다. 디스클로저 버튼 역할(CP-174)에서 본 것과 같은 논리입니다.

왜 버튼인가. <button>으로 만들면:

스크린 리더 인지 — 스크린 리더가 헤더를 “버튼”으로 읽어, 사용자가 ’누르면 동작(펼침/접힘)이 일어난다’를 압니다.

키보드 작동 — 버튼은 기본적으로 Tab 포커스를 받고 Enter·Space로 실행됩니다. 마우스 없이도 펼치죠 (CP-196의 헤더 전체 클릭이 키보드로도 작동).

상태 전달 — 버튼에 aria-expanded(CP-200)를 부여해 펼침 상태를 전달합니다.

잘못된 대안. 헤더를 다음처럼 만들면 안 됩니다:

<div>/<span> + onclick — 역할이 없어 스크린 리더가 ’버튼’임을 모르고, 키보드 포커스도 못 받아 Tab 으로 닿지 않으며 Enter/Space 실행도 안 됩니다(구조화 목록 CP-148 키보드 함정). 마우스 전용 함정이죠.

링크(<a>) — 링크는 ’이동’용입니다. 아코디언은 같은 자리에서 펼침/접힘하는 ’동작’이라 버튼이 맞죠. <a href="#">은 페이지 점프 부작용도 생깁니다.

제목 + 버튼 결합. CP-199에서 봤듯, 표준 아코디언 구조는 제목 태그 안에 버튼입니다:

<h3> <button aria-expanded="false" aria-controls="panel1"> 신청 방법은? <span aria-hidden="true">▶</span> </button> </h3>

<h3>(제목 태그) — 스크린 리더 제목 탐색에 잡힘(CP-199).

<button>(버튼 역할) — ’눌러서 펼치는 트리거’임을 전달(CP-201), 헤더 전체가 클릭·키보드 영역(CP-196).

aria-expanded(상태) — 펼침/접힘 전달(CP-200).

aria-controls(연결) — 제어하는 패널 가리킴(CP-197).

aria-hidden 아이콘 — 장식 아이콘은 스크린 리더가 안 읽게(CP-195).

이 결합이 아코디언 헤더의 완전한 접근성 구조죠. 제목 태그가 ’구조(제목)’를, 버튼이 ’조작(트리거)’을, ARIA가 ’상태·연결’을 담당합니다.

키보드 패턴. WAI-ARIA 아코디언 패턴은 헤더 버튼들 사이의 키보드 이동도 정의합니다 — Tab으로 헤더 간 이동(또는 위/아래 화살표로 헤더 이동, 구현에 따라), Enter/Space로 펼침/접힘, Home/End로 첫/마지막 헤더로 등. 버튼 역할이 이 키보드 조작의 기반이죠.

이로써 아코디언 10개 규칙(CP-192~201)이 완성됩니다 — 용도(192), 중첩 금지(193), 아이콘 위치·방향(194·195), 헤더 클릭·관련성(196·197), 패널 스크롤(198), 제목 시맨틱(199), 상태 전달(200), 버튼 역할(201)까지. 여러 항목을 접고 펼치는 아코디언을, 모든 사용자가 명확하고 접근 가능하게 쓰는 규칙들이죠.

정리하면 — 아코디언 헤더는 펼침/접힘 동작 트리거이므로, <button>(버튼 역할)으로 제공해 스크린 리더 인지와 키보드 작동을 보장하고, 제목 태그·ARIA와 결합해 완전한 접근성 구조를 이뤄야 합니다.

3. 점검 / 개선

무엇을 점검하나

버튼 역할 — 헤더 트리거가 <button>/role="button"인가(div·링크 아님).

키보드 작동 — Tab으로 닿고 Enter·Space로 펼침/접힘이 되는가.

표준 구조 — 제목 태그(h)+버튼+aria-expanded+aria-controls 결합인가.

개선 방향

<h3><button aria-expanded="false" aria-controls="p1">질문 <span aria-hidden="true">▶</span></button></h3>

헤더 트리거를 <button>으로 전환. 제목 태그·ARIA와 결합.

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

역할	책임
퍼블리셔/개발	헤더를 <button>으로·키보드·ARIA 구현
접근성 담당	버튼 인지·키보드 조작 검증

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

웹접근성 의무 대상인 모든 공공 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 헤더 트리거가 <button>/role="button" 인가요(div·링크 아님)?

□ Tab으로 닿고 Enter·Space로 펼침/접힘이 되나요?

□ 제목 태그(h)+버튼+aria-expanded+aria-controls 결합인가요?

❓ FAQ

Q1. 헤더를 링크로 만들면 안 되나요? 링크는 ’이동’용입니다. 아코디언은 같은 자리 펼침/접힘 ’동작’이라 버튼이 맞습니다. Q2. <div>에 클릭만 붙이면요? 역할·키보드가 없어 스크린 리더·키보드 사용자가 못 씁니다. <button>을 쓰세요. Q3. 제목 태그 안에 버튼을 넣는 게 맞나요? 네. <h3><button>...</button></h3>이 표준입니다. 제목(구조)+ 버튼(조작)이 결합됩니다.

6. 마무리

CP-201의 메시지:

헤더는 누르는 버튼이다 — 헤더를 버튼 역할로 제공하라.

아코디언 헤더는 펼침/접힘 동작 트리거라, <button>으로 만들어야 스크린 리더가 ’버튼’으로 인지하고 키보드로 작동합니다. 제목 태그(CP-199)+버튼(CP-201)+aria-expanded(CP-200)+aria-controls(CP-197) 결합이 완전한 구조죠. 이로써 아코디언 10개(CP-192~201)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 이미지(Image) 로 넘어갑니다.

다음 편 예고 ▶ 「322. (CP-202) 이미지 — (다음 컴포넌트 그룹 첫 규칙)」

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