펼쳤는지 귀로도

KRDS CP-200 — 아코디언의 활성화 상태 정보를 스크린 리더에서 확인할 수 있도록 하고 있다.

0. 들어가며 — 화살표는 안 들린다

이번 320편은 아코디언의 활성화(펼침/접힘) 상태 정보를 스크린 리더에서 확인할 수 있게 하라는 규칙입니다.

시각 사용자는 아이콘 방향(▶/▼, CP-195)과 패널 표시로 아코디언이 펼쳐졌는지 봅니다. 그런데 스크린 리더 사용 자에게는 그 시각 단서가 없죠. 펼침 상태가 aria-expanded로 전달되지 않으면 — ‘이 헤더를 누르면 펼쳐지는지’, ’지금 펼쳐진 상태인지’를 알 수 없습니다. CP-200은 이 상태를 보조기술에 전달합니다. 디스클로저 CP-175와 같은 메커니즘이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 활성화 상태 SR 확인

CP-200 (컴포넌트 > 아코디언) “아코디언의 활성화 상태 정보를 스크린 리더에서 확인할 수 있도록 하고 있다.”

아코디언 헤더(버튼)에 aria-expanded 속성을 부여해, 보조기술이 각 항목이 펼쳐졌는지(확장)/접혔는지(축소)를 인지하게 하라는 뜻입니다.

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

2. 왜 활성화 상태를 전달하나

아코디언 헤더 버튼(CP-201)에는 — ‘이건 펼칠 수 있다’(가능성)와 ‘지금 펼쳐졌는지/접혔는지’(현재 상태) 정보가 담겨 있습니다. 시각 사용자는 아이콘 방향(CP-195)과 패널 표시로 이를 봅니다. 하지만 이 정보가 시각 단서에만 담기면 스크린 리더 사용자에게는 전달되지 않죠. 헤더가 그냥 ’버튼’으로만 읽혀, 누르면 무슨 일이 생기는지·지금 어떤 상태인지 알 수 없습니다.

이 격차를 메우는 표준 속성이 aria-expanded 입니다. 아코디언 헤더 버튼에 부여하면:

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

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

사용자는 이 낭독으로 — ‘이 헤더는 펼칠 수 있구나’, ‘지금 펼쳐졌으니 아래 패널에 내용이 있겠구나’, ’누르면 접히겠구나’를 압니다. 시각 사용자가 아이콘으로 아는 것을 비시각 사용자는 이 속성으로 동등하게 얻죠. FAQ를 탐색하는 스크린 리더 사용자가 “신청 방법은?, 버튼, 축소됨”을 들으면 ’이 질문은 접혀 있고 누르면 답이 펼쳐 지겠구나’를 알고 조작합니다.

상태 갱신. aria-expanded 값은 실제 상태에 맞춰 실시간 갱신돼야 합니다 — 헤더를 눌러 펼치면 false 에서 true로, 접으면 반대로 JavaScript가 바꿔주죠. 값이 실제 상태와 안 맞으면 사용자를 속이게 됩니다. 시각 아이콘(CP-195)과 ARIA 값이 항상 동기화돼야 하죠.

연결 — aria-controls·패널. 아코디언 패턴을 완성하려면:

헤더 버튼이 자신이 제어하는 패널을 aria-controls="panel-id" 로 가리킴.

패널이 role="region" + aria-labelledby 로 자신의 헤더를 가리켜, ’이 패널은 이 헤더에 속함’을 전달 (CP-197의 관련성을 코드로).

접힌 패널은 hidden(또는 display:none)으로 보조기술·키보드에서 제외해, 시각·보조기술 상태를 일치(사이드 메뉴 CP-105 정신).

이렇게 하면 — 헤더가 버튼이고(CP-201), 그 펼침 상태가 aria-expanded로 전달되며(200), 패널이 헤더와 연결 되고(197/aria-controls), 접힌 패널은 숨겨져, WAI-ARIA 표준 아코디언 패턴이 완성되죠.

이 규칙은 아코디언 접근성 묶음의 핵심입니다 — 시각 상태(아이콘 위치 194·방향 195)와 보조기술 상태(aria- expanded 200)가 함께, 모든 사용자에게 펼침 상태를 전하죠. 디스클로저 CP-175(단일 펼침의 aria-expanded)의 ‘여러 항목 묶음’ 버전입니다 — 각 아코디언 헤더마다 aria-expanded를 두는 것이죠.

정리하면 — 아코디언 펼침 상태는 시각(아이콘)만으로는 스크린 리더에 안 닿으므로, 각 헤더 버튼에 aria-expanded 를 부여하고 상태에 맞게 갱신해 비시각 사용자도 펼침 상태를 알게 해야 합니다.

3. 점검 / 개선

무엇을 점검하나

aria-expanded 부여 — 각 아코디언 헤더 버튼에 aria-expanded가 있는가.

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

연결·숨김 — aria-controls로 패널 연결, 접힌 패널이 hidden으로 제외되는가.

개선 방향

<h3><button aria-expanded="false" aria-controls="p1">질문</button></h3> <div id="p1" role="region" aria-labelledby="..." hidden>답변</div>

토글 시 aria-expanded·hidden·아이콘(CP-195)을 함께 갱신.

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

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

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 각 헤더 버튼에 aria-expanded 가 있나요?

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

□ aria-controls로 패널 연결, 접힌 패널이 hidden으로 제외되나요?

❓ FAQ

Q1. 아이콘 방향(CP-195)만으론 안 되나요? 시각 단서라 스크린 리더에 전달되지 않습니다. aria-expanded가 필요합니다. Q2. 값을 안 바꿔도 되나요? 실제 상태에 맞춰 갱신해야 합니다. 펼쳤는데 false면 사용자를 속이게 됩니다. Q3. 디스클로저 CP-175와 같은 건가요? 같은 메커니즘입니다. 아코디언은 여러 헤더마다 aria-expanded를 두는 묶음 버전이죠.

6. 마무리

CP-200의 메시지:

펼쳤는지 귀로도 — 활성화 상태를 aria-expanded로 스크린 리더에 전달하라.

아코디언 펼침 상태를 아이콘으로만 표현하면 스크린 리더에 안 닿습니다. 각 헤더 버튼에 aria-expanded를 부여 하고 상태에 맞게 갱신하면 “확장됨/축소됨”이 낭독돼 비시각 사용자도 상태를 알죠. 시각(CP-194·195)과 ARIA가 함께 완성됩니다. 다음 편은 아코디언 그룹의 마지막 — 헤더의 버튼 역할입니다.

다음 편 예고 ▶ 「321. (CP-201) 헤더를 스크린 리더에서 버튼 역할로 인지하게 제공하고 있다.」

ViewCheck는 아코디언 활성화 상태가 aria-expanded로 전달되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 아코디언(Accordion) 가이드 — https://www.krds.go.kr/html/site/component/component_18.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컴포넌트,웹표준