펼쳤는지 접혔는지 귀로도

KRDS CP-104 — aria-expanded·title 속성으로 하위 메뉴 영역의 활성화 상태가 스크린 리더에 탐지되도록 구현되어 있다.

0. 들어가며 — 화살표 방향만으론 안 들린다

이번 224편은 하위 메뉴의 펼침/접힘 상태를 aria-expanded·title로 스크린 리더에 전달하라는 규칙입니다.

사이드 메뉴의 상위 항목을 누르면 하위 메뉴가 펼쳐졌다 접혔다 합니다. 시각 사용자는 화살표 방향(▶/▼)이나 하위 메뉴 표시 여부로 ‘지금 펼쳐졌는지’를 보죠. 그런데 스크린 리더 사용자는 그 화살표를 못 봅니다. 펼침 상태가 aria-expanded로 코드에 표시돼 있지 않으면 — ’이 항목을 누르면 펼쳐지는지’, ’지금 펼쳐진 상태인지’를 전혀 알 수 없죠. CP-104는 이 상태를 보조기술에 전달합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — aria-expanded·title로 상태 전달

CP-104 (컴포넌트 > 사이드 메뉴) “aria-expanded 속성이나 title 속성을 활용하여 하위 메뉴 영역의 활성화 상태 정보가 스크린 리더에 탐지될 수 있도록 구현되어 있다.”

하위 메뉴를 펼치는 상위 항목(토글)에 aria-expanded(또는 보조적으로 title) 속성을 부여해, 보조기술이 그 항목이 펼침 가능하며 현재 펼쳐졌는지/접혔는지를 인지하게 하라는 뜻입니다.

정리: 펼침형 상위 항목에 aria-expanded를 줘서 펼침/접힘 상태를 스크린 리더에 알려라. 이게 CP-104입니다.

2. 왜 펼침 상태를 보조기술에 전달하나

펼침/접힘이 가능한 토글 요소(disclosure)에는 두 가지 정보가 담겨 있습니다 — (1) ‘이건 눌러서 펼칠 수 있는 요소다’(가능성), (2) ‘지금 펼쳐져 있다 / 접혀 있다’(현재 상태). 시각 사용자는 화살표 아이콘과 하위 메뉴 표시 여부로 이 둘을 봅니다. 하지만 이 정보가 시각 단서(아이콘 모양)에만 담겨 있으면 스크린 리더 사용자 에게는 전달되지 않죠. 그들에게는 그냥 ’링크 하나’로만 읽혀, 누르면 무슨 일이 생기는지, 지금 어떤 상태인지 알 수 없습니다.

이 격차를 메우는 표준 속성이 aria-expanded 입니다. 펼침 토글 역할을 하는 요소에 이를 부여하면:

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

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

사용자는 이 낭독으로 ‘아, 이 항목은 펼칠 수 있구나’, ‘지금 펼쳐졌으니 아래에 하위 메뉴가 있겠구나’, ’누르면 접히겠구나’를 압니다. 그리고 상태가 바뀌면 속성 값도 갱신돼야 하죠 — 펼치면 true로, 접으면 false로 JavaScript가 토글합니다. 값이 실제 상태와 안 맞으면(펼쳤는데 여전히 false) 오히려 사용자를 속이게 됩니다.

title 속성은 보조 수단입니다 — 마우스오버 툴팁이자 일부 보조기술이 읽는 보충 설명으로, ‘하위 메뉴 펼치기’ 같은 안내를 줄 수 있죠. 다만 title은 모바일·키보드에서 잘 안 보이고 보조기술 지원도 일관되지 않아, 주된 수단은 aria-expanded 이고 title은 보완입니다. 규칙도 ‘aria-expanded 속성이나 title 속성을 활용’ 이라 표현하지만, 상태 전달의 표준은 aria-expanded입니다.

추가로 — aria-expanded를 쓰는 토글은 보통 그것이 제어하는 하위 메뉴 영역을 aria-controls로 가리켜 연결성을 높이고, 토글 자체는 <button>으로 만드는 것이 권장됩니다(상태를 바꾸는 동작이므로 링크보다 버튼이 적절). 이는 디스클로저(Disclosure) 패턴의 표준이며, 사이드 메뉴 그룹 뒤에 별도로 다룰 디스클로저 컴포넌트 (CP 후반)와도 통하죠.

이 규칙은 CP-102·103(키보드 접근·순서)에 이어 사이드 메뉴의 ’동적 상태’까지 보조기술에 노출하는 마지막 조각입니다 — 닿고(102), 순서대로(103), 펼침 상태까지 전달(104)되면 키보드·스크린 리더 사용자가 펼침형 사이드 메뉴를 온전히 씁니다.

3. 점검 / 개선

무엇을 점검하나

aria-expanded 부여 — 펼침형 상위 항목에 aria-expanded가 있는가.

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

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

(권장) 연결 — aria-controls로 하위 영역을 가리키고, 토글이 <button>인가.

개선 방향

<button aria-expanded="false" aria-controls="submenu-policy">정책정보</button> <ul id="submenu-policy" hidden> … </ul>

토글 시 JS로 aria-expanded와 하위 영역 표시를 동기화.

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

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

기관 유형	CP-104 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (펼침형 사이드 메뉴 사용 시)

하위 메뉴를 펼치는 방식의 사이드 메뉴를 쓰는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 펼침형 상위 항목에 aria-expanded 가 있나요?

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

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

□ (권장) aria-controls로 하위 영역을 가리키나요?

❓ FAQ

Q1. 화살표 아이콘(▶/▼)만으론 안 되나요? 시각 단서라 스크린 리더에 전달되지 않습니다. aria-expanded가 필요합니다. Q2. title만 쓰면 되나요? title은 보조 수단입니다. 모바일·키보드에서 약하고 지원이 일관되지 않아, 주된 수단은 aria-expanded입니다. Q3. 토글을 <a>로 해도 되나요? 상태를 바꾸는 동작이라 <button>이 더 적절합니다. 페이지 이동이 아니라 펼침이니까요.

6. 마무리

CP-104의 메시지:

펼쳤는지 접혔는지 귀로도 — aria-expanded로 하위 메뉴 상태를 전달하라.

펼침 토글에는 ’펼칠 수 있음 + 현재 상태’가 담겨 있는데, 화살표 아이콘으로만 표현하면 스크린 리더에 안 닿죠. aria-expanded를 부여하고 상태에 맞게 갱신하면 “확장됨/축소됨”이 낭독돼 비시각 사용자도 펼침 상태를 압니다. 다음 편은 사이드 메뉴 그룹의 마지막 — 축소된 메뉴 링크를 보조기술에서도 빼기입니다.

다음 편 예고 ▶ 「225. (CP-105) 축소된 메뉴 링크에 보조 기술이 접근되지 않도록 제공하고 있다.」

ViewCheck는 사이드 메뉴 펼침 토글의 aria-expanded 상태 전달을 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 사이드 메뉴(Side navigation) 가이드 — https://www.krds.go.kr/html/site/component/component_08.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컴포넌트,웹표준