펼침 트리거는 버튼이다

KRDS CP-174 — 디스클로저를 버튼 역할로 제공하고 있다. (role=“button”)

0. 들어가며 — 링크가 아니라 버튼

이번 294편은 디스클로저(의 트리거)를 버튼 역할로 제공하라는 규칙입니다.

디스클로저의 펼침/접힘 트리거는 — ’같은 페이지 안에서 콘텐츠를 펼치고 접는 동작’을 합니다. 페이지를 이동하는 링크가 아니라 동작을 실행하는 버튼이죠. 그래서 <button>(또는 role="button")으로 만들어야 보조기술이 이를 ’버튼’으로 인지하고, 키보드 조작도 버튼답게 작동합니다. CP-174는 이 버튼 역할을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 버튼 역할 제공

CP-174 (컴포넌트 > 디스클로저) “디스클로저를 버튼 역할로 제공하고 있다. (role="button")”

디스클로저의 펼침/접힘 트리거를 <button> 요소 또는 role="button"으로 마크업해, 보조기술과 키보드가 이를 버튼으로 인지·조작하게 하라는 뜻입니다.

정리: 디스클로저 트리거는 <button>/role="button"으로 제공하라. 이게 CP-174입니다.

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

UI 요소의 ’역할(role)’은 보조기술과 사용자에게 ’이게 무엇이고 어떻게 작동하는지’를 알려줍니다. 잘못된 역할을 주면 사용자가 동작을 오해하죠. 디스클로저 트리거의 올바른 역할은 버튼입니다 — 그 이유와 잘못된 대안들을 보겠습니다.

왜 버튼인가. 디스클로저 트리거가 하는 일은 ‘같은 페이지 안에서 콘텐츠를 펼치거나 접는 상태 변화’ 입니다. 이는 ’동작 실행’이죠. 웹에서 동작을 실행하는 요소가 바로 버튼입니다. 버튼의 역할 정의가 ’눌러서 동작을 일으키는 것’이라 디스클로저에 정확히 맞습니다. <button>으로 만들면:

보조기술 인지 — 스크린 리더가 “버튼”으로 읽어, 사용자가 ’누르면 무슨 동작이 일어난다’를 압니다.

키보드 작동 — 버튼은 기본적으로 Enter·Space 모두로 실행됩니다. 포커스도 받죠.

확장 상태 전달 — 버튼에 aria-expanded를 부여해 펼침/접힘 상태를 전달합니다(CP-175).

잘못된 대안 ① 링크(<a>). 디스클로저 트리거를 링크로 만드는 실수가 흔합니다. 하지만 링크의 역할은 ‘다른 곳으로 이동’(페이지·위치 이동)이죠. 디스클로저는 이동이 아니라 같은 자리에서 펼침/접힘이므로 링크가 아닙니다. 트리거를 <a href="#">로 만들면 — 스크린 리더가 “링크”로 읽어 사용자가 ‘어디로 이동하나?’ 오해 하고, href="#"이 페이지 맨 위로 점프하는 부작용도 생기죠. 동작에는 버튼, 이동에는 링크 — 역할을 맞춰야 합니다.

잘못된 대안 ② 일반 요소(<div>/<span> + onclick). 트리거를 <div>나 <span>에 클릭 이벤트만 붙여 만들면 — 역할이 없어 스크린 리더가 ’버튼’임을 모르고, 키보드 포커스도 못 받아 Tab으로 닿지 않으며 Enter/Space 실행도 안 됩니다(구조화 목록 CP-148의 키보드 함정과 동일). 마우스로만 작동하는 함정이 되죠.

올바른 구현:

<button> 사용(권장) — 가장 안전합니다. 버튼 역할·키보드 작동·포커스가 기본 제공됩니다.

부득이 <div>면 role="button" + tabindex="0" + Enter/Space 키 핸들러를 직접 구현. 하지만 <button> 이 훨씬 간단하고 안전하죠.

그리고 이 버튼에 — 펼침 상태를 알리는 aria-expanded(CP-175)와 제어 대상 콘텐츠를 가리키는 aria-controls를 부여하면, WAI-ARIA 디스클로저 패턴이 완성됩니다. CP-174(버튼 역할) + CP-175(상태 전달)가 함께 디스클로저의 접근성을 이루죠 — 트리거가 버튼임을 알리고, 그 버튼의 펼침 상태를 전달하는 것입니다.

정리하면 — 디스클로저 트리거는 ’이동’이 아니라 ’동작(펼침/접힘)’을 하므로, 링크나 일반 요소가 아닌 버튼 (<button>/role="button")으로 제공해 보조기술 인지와 키보드 작동을 보장해야 합니다.

3. 점검 / 개선

무엇을 점검하나

버튼 역할 — 디스클로저 트리거가 <button> 또는 role="button"인가(링크·div 아님).

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

ARIA 연결 — aria-expanded(CP-175)·aria-controls가 부여됐는가.

개선 방향

<button aria-expanded="false" aria-controls="panel1">상세 보기</button> <div id="panel1" hidden> … </div>

링크·<div onclick> 트리거를 <button>으로 전환.

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

역할	책임
퍼블리셔/개발	트리거를 <button>·role="button"으로 마크업
접근성 담당	버튼 인지·키보드 작동 검증

기관 유형	CP-174 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (디스클로저 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 디스클로저 트리거가 <button>/role="button" 인가요(링크·div 아님)?

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

□ aria-expanded·aria-controls가 부여됐나요?

❓ FAQ

Q1. 링크로 만들면 안 되나요? 링크는 ’이동’용입니다. 디스클로저는 같은 자리에서 펼침/접힘하는 ’동작’이라 버튼이 맞습니다. Q2. <div>에 클릭만 붙이면요? 역할·키보드가 없어 스크린 리더·키보드 사용자가 못 씁니다. <button>을 쓰세요. Q3. role="button"만 주면 되나요? <div role="button">은 tabindex="0"과 키 핸들러도 직접 구현해야 합니다. <button>이 훨씬 간단·안전합니다.

6. 마무리

CP-174의 메시지:

펼침 트리거는 버튼이다 — <button>/role="button"으로 제공하라.

디스클로저 트리거는 이동이 아니라 펼침/접힘 동작을 합니다. 링크나 일반 요소가 아닌 버튼으로 만들어야 스크린 리더가 ’버튼’으로 인지하고 키보드로 작동하죠. aria-expanded·aria-controls와 함께 WAI-ARIA 디스클로저 패턴을 완성합니다. 다음 편은 디스클로저 그룹의 마지막 — 확장/축소 상태 전달입니다.

다음 편 예고 ▶ 「295. (CP-175) 스크린 리더에서 확장/축소 상태 정보를 확인할 수 있도록 하고 있다.」

ViewCheck는 디스클로저 트리거가 버튼 역할로 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 디스클로저(Disclosure) 가이드 — https://www.krds.go.kr/html/site/component/component_15.html

WAI-ARIA APG — Disclosure Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/

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

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