펼쳤는지 접혔는지 귀로도

KRDS CP-175 — 스크린 리더에서 확장/축소 상태 정보를 확인할 수 있도록 하고 있다.

0. 들어가며 — 디스클로저 그룹의 마지막

이번 295편은 디스클로저 그룹(CP-169~175, 7개)의 마지막 규칙입니다. 확장/축소 상태 정보를 스크린 리더가 확인할 수 있게 하라는 내용이죠.

시각 사용자는 화살표 방향(▶/▼)이나 콘텐츠 표시 여부로 디스클로저가 펼쳐졌는지 접혔는지 봅니다. 그런데 스크린 리더 사용자에게는 그 시각 단서가 없죠. 펼침/접힘 상태가 aria-expanded로 전달되지 않으면 — ‘이 버튼을 누르면 펼쳐지는지’, ’지금 펼쳐진 상태인지’를 알 수 없습니다. CP-175는 이 상태를 보조기술에 전달합니다. 사이드 메뉴 CP-104와 같은 메커니즘이죠. 이번 편으로 디스클로저 7개를 마무리합니다.

1. 규칙 원문 — 확장/축소 상태 전달

CP-175 (컴포넌트 > 디스클로저) “스크린 리더에서 확장/축소 상태 정보를 확인할 수 있도록 하고 있다.”

디스클로저 트리거(버튼)에 aria-expanded 속성을 부여해, 보조기술이 그 디스클로저가 펼쳐졌는지(확장)/접혔는지 (축소)를 인지하게 하라는 뜻입니다.

정리: 디스클로저의 펼침/접힘 상태를 aria-expanded로 스크린 리더에 전달하라. 이게 CP-175입니다.

2. 왜 확장/축소 상태를 전달하나

디스클로저 트리거(버튼, CP-174)에는 두 가지 정보가 담겨 있습니다 — (1) ‘이건 눌러서 펼칠 수 있는 요소다’ (가능성), (2) ‘지금 펼쳐져 있다/접혀 있다’(현재 상태). 시각 사용자는 화살표 아이콘(▶/▼)과 콘텐츠 표시 여부로 이 둘을 봅니다. 하지만 이 정보가 시각 단서(아이콘 모양)에만 담겨 있으면 스크린 리더 사용자에게는 전달되지 않죠. 그들에게는 그냥 ’버튼’으로만 읽혀, 누르면 무슨 일이 생기는지·지금 어떤 상태인지 알 수 없습니다.

이 격차를 메우는 표준 속성이 aria-expanded 입니다. 디스클로저 트리거 버튼에 부여하면:

aria-expanded="false" → 스크린 리더가 “축소됨(collapsed)” 으로 낭독 → ‘눌러서 펼칠 수 있고 지금은 접힘’

aria-expanded="true" → “확장됨(expanded)” 으로 낭독 → ‘지금 펼쳐져 있음’

사용자는 이 낭독으로 — ‘아, 이 버튼은 펼칠 수 있구나’, ‘지금 펼쳐졌으니 아래에 내용이 있겠구나’, ’누르면 접히겠구나’를 압니다. 시각 사용자가 화살표로 아는 것을 비시각 사용자는 이 속성으로 동등하게 얻죠.

핵심 — 상태 갱신. aria-expanded 값은 실제 상태에 맞춰 실시간 갱신돼야 합니다. 사용자가 트리거를 눌러 펼치면 → false에서 true로, 다시 접으면 → true에서 false로 JavaScript가 바꿔주죠. 값이 실제 상태와 안 맞으면(펼쳤는데 여전히 false) 오히려 사용자를 속이게 됩니다. 시각 표시(▶→▼)와 ARIA 값이 항상 동기화돼야 하죠.

연결 — aria-controls. 디스클로저 패턴을 완성하려면, 트리거 버튼이 자신이 제어하는 콘텐츠를 aria-controls 로 가리키고(aria-controls="panel-id"), 그 콘텐츠 영역이 트리거 바로 다음에 위치하면(CP-172) — 스크린 리더가 ’이 버튼이 이 영역을 펼친다’는 관계까지 인지합니다. 그리고 접힌 콘텐츠는 hidden(또는 display:none)으로 보조기술·키보드에서도 제외해(사이드 메뉴 CP-105의 일관 숨김과 같은 정신), 시각·보조기술 상태가 일치하게 하죠.

이 규칙은 디스클로저 접근성 묶음의 마지막입니다 — CP-174(트리거가 버튼임을 알림) + CP-175(그 버튼의 펼침 상태를 알림)가 함께, 스크린 리더 사용자가 디스클로저를 온전히 쓰게 하죠. 트리거가 버튼이고(174), 그 상태가 전달되며(175), 콘텐츠가 관련 위치에 있고(172), 기본은 접힘(171)인 — 표준 WAI-ARIA 디스클로저 패턴이 완성 됩니다.

이로써 디스클로저 7개 규칙(CP-169~175)이 완성됩니다 — 부적절 용도 금지(169·170), 기본 접힘(171), 배치(172), 섹션당 하나(173), 버튼 역할(174), 상태 전달(175)까지. 부가 정보를 적절히, 접근 가능하게 펼치고 접는 규칙들 이죠.

3. 점검 / 개선

무엇을 점검하나

aria-expanded 부여 — 디스클로저 트리거에 aria-expanded가 있는가.

상태 갱신 — 펼치면 true, 접으면 false로 실시간 갱신되는가.

연결·숨김 — aria-controls로 콘텐츠를 가리키고, 접힌 콘텐츠가 hidden으로 제외되는가.

낭독 확인 — 스크린 리더가 “확장됨/축소됨”을 읽는가.

개선 방향

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

토글 시 JS로 aria-expanded·hidden·시각 표시를 함께 갱신.

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

역할	책임
퍼블리셔/개발	aria-expanded 부여·실시간 갱신·aria-controls·숨김 동기화
접근성 담당	펼침/접힘 낭독·상태 일치 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 디스클로저 트리거에 aria-expanded 가 있나요?

□ 펼치면 true, 접으면 false로 실시간 갱신되나요?

□ aria-controls로 콘텐츠를 가리키고, 접힌 콘텐츠가 hidden으로 제외되나요?

□ 스크린 리더가 “확장됨/축소됨”을 읽나요?

❓ FAQ

Q1. 화살표 아이콘(▶/▼)만으론 안 되나요? 시각 단서라 스크린 리더에 전달되지 않습니다. aria-expanded가 필요합니다. Q2. 값을 안 바꿔도 되나요? 실제 상태에 맞춰 갱신해야 합니다. 펼쳤는데 false면 사용자를 속이게 됩니다. Q3. CP-104(사이드 메뉴)와 같은 건가요? 같은 aria-expanded 메커니즘입니다. 펼침/접힘 위젯 전반에 공통 적용되는 표준입니다.

6. 마무리

CP-175의 메시지:

펼쳤는지 접혔는지 귀로도 — aria-expanded로 확장/축소 상태를 전달하라.

디스클로저 트리거의 펼침/접힘 상태는 화살표 아이콘으로만 표현하면 스크린 리더에 안 닿습니다. aria-expanded를 부여하고 상태에 맞게 갱신하면 “확장됨/축소됨”이 낭독돼 비시각 사용자도 상태를 알죠. CP-174(버튼 역할)와 함께 디스클로저 접근성을 완성합니다. 이로써 디스클로저 7개(CP-169~175)를 마칩니다. 다음 편부터는 새 컴포넌트 그룹 모달(Modal) 로 넘어갑니다.

다음 편 예고 ▶ 「296. (CP-176) 모달 — (다음 컴포넌트 그룹 첫 규칙)」

ViewCheck는 디스클로저의 확장/축소 상태가 aria-expanded로 전달되는지를 진단합니다.

📚 참고 출처

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

MDN — aria-expanded — https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-expanded

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

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