접힌 메뉴는 보조기술에서도 빼라

KRDS CP-105 — 축소된 메뉴 링크에 보조 기술이 접근되지 않도록 제공하고 있다.

0. 들어가며 — 사이드 메뉴 그룹의 마지막

이번 225편은 사이드 메뉴 그룹(CP-089~105, 17개)의 마지막 규칙입니다. 축소(접힘)된 메뉴 링크에는 보조 기술이 접근하지 못하게 하라는 내용이죠.

펼침형 사이드 메뉴에서 하위 메뉴가 접혀 있을 때, 그 안의 링크들은 시각적으로 숨겨집니다. 그런데 시각적으로만 숨기고 코드상으로는 살아 있으면 — 스크린 리더는 ‘보이지 않는’ 그 링크들까지 읽거나, 키보드 Tab이 안 보이는 곳으로 초점을 옮기죠. CP-105는 접힌 메뉴를 시각·보조기술 양쪽에서 일관되게 숨기라고 규정합니다. 이번 편을 풀어내며 사이드 메뉴 17개를 마무리합니다.

1. 규칙 원문 — 축소 메뉴 보조기술 미접근

CP-105 (컴포넌트 > 사이드 메뉴) “축소된 메뉴 링크에 보조 기술이 접근되지 않도록 제공하고 있다.”

하위 메뉴가 접혀 있는 상태에서는 그 안의 링크에 스크린 리더·키보드 등 보조기술이 접근하지 못하게 해, 보이지 않는 항목이 보조기술 사용자에게 노출되지 않게 하라는 뜻입니다.

정리: 접힌 메뉴 링크는 보조기술에서도 빠져야 한다. 이게 CP-105입니다.

2. 왜 접힌 메뉴를 보조기술에서 빼나

핵심은 시각과 보조기술의 일관성입니다. 화면에 보이는 것과 스크린 리더가 읽는 것, 키보드가 닿는 것이 서로 달라서는 안 됩니다. 펼침형 메뉴에서 하위 메뉴가 접혀 있다는 것은 ’지금 이 항목들은 사용자에게 제공되지 않는 상태’라는 뜻이죠. 시각 사용자에겐 안 보이니 자연히 제외됩니다. 그런데 보조기술 사용자에게는?

잘못 구현된 경우 — 접힌 하위 메뉴를 opacity:0, height:0, visibility 없이 위치만 화면 밖으로 빼는 식으로 ‘시각적으로만’ 숨기면, DOM에는 그대로 살아 있어 접근성 트리에도 남습니다. 그러면:

스크린 리더 혼란 — 화면엔 안 보이는데 스크린 리더는 그 링크들을 줄줄 읽습니다. 사용자는 “분명 접혀 있다는데 왜 이 항목들이 들리지?” 하고 혼란스럽고, 메뉴 구조를 잘못 파악하죠.

키보드 함정 — Tab으로 초점을 옮기다 보면, 보이지 않는 접힌 링크로 초점이 들어갑니다. 키보드 사용자는 ‘초점이 사라진’ 것처럼 느끼고(화면엔 포커스 표시가 안 보이니까), 길을 잃죠(CP-103의 초점 순서도 깨짐).

이를 막으려면 접힌 메뉴를 접근성 트리에서도 제거해야 합니다. 표준 방법:

hidden 속성 또는 display:none / visibility:hidden — 이 방식으로 숨기면 시각·접근성 트리 양쪽 에서 제거되어, 스크린 리더도 안 읽고 키보드 초점도 안 갑니다. 가장 깔끔합니다.

aria-hidden="true" + tabindex="-1" — 부득이 DOM에 남겨야 하면, aria-hidden으로 스크린 리더에서 빼고 tabindex="-1"(또는 inert)로 키보드 초점도 막습니다.

그리고 펼치면 이 숨김을 해제하고, 접으면 다시 숨겨야 하죠 — CP-104의 aria-expanded 상태 토글과 동기화 됩니다. aria-expanded="false"(접힘)일 때 하위 영역은 hidden, true(펼침)일 때 노출 — 상태와 숨김이 한 쌍으로 움직여야 합니다.

이로써 펼침형 사이드 메뉴의 접근성이 완결됩니다 — 펼침 토글 상태 전달(CP-104) + 접힌 내용 일관 숨김(CP-105). 보이는 것 = 읽히는 것 = 닿는 것이 항상 일치하죠. 이 ‘시각·보조기술 일관 숨김’ 원칙은 사이드 메뉴뿐 아니라 모달·아코디언·탭 등 모든 펼침/숨김 컴포넌트에 공통으로 적용되는 접근성의 기본기입니다.

정리하면 — 접힌 메뉴는 시각에서만이 아니라 보조기술에서도 빠져야, 모든 사용자가 동일한 메뉴 상태를 경험합니다.

3. 점검 / 개선

무엇을 점검하나

스크린 리더 미낭독 — 접힌 하위 메뉴 링크가 스크린 리더에 읽히지 않는가.

키보드 미접근 — 접힌 링크로 Tab 초점이 들어가지 않는가.

상태 동기화 — aria-expanded(CP-104)와 숨김이 함께 토글되는가.

개선 방향

접힌 하위 영역을 hidden(또는 display:none)으로 숨김 → 시각·접근성 동시 제거.

DOM 유지가 불가피하면 aria-hidden="true" + tabindex="-1"/inert.

펼침/접힘 시 aria-expanded와 숨김을 한 쌍으로 갱신.

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

역할	책임
퍼블리셔/개발	접힌 영역 일관 숨김·상태 동기화 구현
접근성 담당	접힘 상태 스크린 리더·키보드 검증

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

하위 메뉴를 펼침/접힘으로 처리하는 모든 사이트가 해당됩니다.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 접힌 하위 메뉴 링크가 스크린 리더에 읽히지 않나요?

□ 접힌 링크로 Tab 초점이 들어가지 않나요?

□ aria-expanded(CP-104)와 숨김이 함께 토글되나요?

❓ FAQ

Q1. opacity:0로 숨기면 안 되나요? 시각적으로만 숨겨지고 접근성 트리에는 남아 스크린 리더가 읽고 키보드 초점이 들어갑니다. hidden/display:none을 쓰세요. Q2. DOM에 꼭 남겨야 하면요? aria-hidden="true" + tabindex="-1"(또는 inert)로 보조기술·키보드 양쪽 에서 제외합니다. Q3. CP-104와 무슨 관계인가요? CP-104는 펼침 상태 전달, CP-105는 접힌 내용 숨김입니다. 둘이 동기화되어야 상태와 노출이 일치합니다.

6. 마무리

CP-105의 메시지:

접힌 메뉴는 보조기술에서도 빼라 — 보이는 것 = 읽히는 것 = 닿는 것.

시각적으로 접힌 메뉴가 코드상 살아 있으면, 스크린 리더는 안 보이는 링크를 읽고 키보드 초점은 함정에 빠집니다. hidden이나 aria-hidden+tabindex="-1"로 보조기술에서도 제거해, 모든 사용자가 동일한 메뉴 상태를 겪게 해야 하죠. CP-104(펼침 전달)와 동기화되어 펼침형 사이드 메뉴의 접근성을 완성합니다. 이로써 사이드 메뉴 17개 규칙(CP-089~105)을 마칩니다. 다음 편부터는 새 컴포넌트 그룹 콘텐츠 내 탐색(In-page navigation) 으로 넘어갑니다.

다음 편 예고 ▶ 「226. (CP-106) 콘텐츠 내 탐색 — 일관된 너비로 정의하여 버튼/컨트롤과 혼동되지 않게 한다.」

ViewCheck는 접힌 사이드 메뉴 링크가 보조기술·키보드에서 제외되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 사이드 메뉴(Side navigation) 가이드 — https://www.krds.go.kr/html/site/component/component_08.html

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

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