이 묶음이 뭔지 알려주기

KRDS CP-057 — 드롭다운 영역에 제목을 제공하고 있다.

0. 들어가며 — 펼쳐진 메뉴가 무엇인지

이번 177편은 드롭다운 영역에 제목을 제공하는 규칙입니다.

메뉴를 펼치면 하위 항목들이 드롭다운으로 나타납니다. 그런데 이 하위 항목들이 ’어느 상위 메뉴에 속하는지’를 제목으로 알려주면, 사용자(특히 스크린리더)가 맥락을 잃지 않죠. CP-057은 드롭다운에 제목을 달라고 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 제목 제공

CP-057 (컴포넌트 > 메인 메뉴) “드롭다운 영역에 제목을 제공하고 있다.”

펼쳐진 드롭다운 영역에 그 메뉴 묶음의 제목을 제공하라는 뜻입니다.

정리: 드롭다운 영역에 제목을 제공하라. 이게 CP-057입니다.

2. 왜 드롭다운에 제목인가

드롭다운이 펼쳐지면 하위 메뉴 항목들이 나타납니다. 이 항목들은 특정 상위 메뉴(예: “정책정보”)의 하위 항목 들이죠. 그런데 항목들만 나열되고 ‘이게 무슨 묶음인지’ 제목이 없으면, 맥락이 흐려질 수 있습니다.

시각 사용자에게도 제목은 도움이 됩니다 — 특히 메가메뉴처럼 여러 묶음이 동시에 펼쳐지는 경우, 각 묶음에 제목(예: “정책정보”, “보도자료”, “기관소개”)이 있어야 어느 항목이 어느 카테고리에 속하는지 구조가 명확해 지죠. 제목이 묶음의 ’머리’가 되어 항목들을 조직화합니다.

스크린리더 사용자에게는 더욱 중요합니다. 시각 사용자는 드롭다운이 어느 상위 메뉴에서 펼쳐졌는지 위치로 짐작하지만, 스크린리더 사용자는 그 맥락을 보지 못합니다. 드롭다운 영역에 제목이 있으면 — 스크린리더가 “정책정보 메뉴”라고 읽어, 사용자가 ‘지금 정책정보의 하위 항목을 듣고 있구나’를 알 수 있죠. 제목이 없으면 하위 항목들이 ’맥락 없이’ 읽혀 혼란스럽습니다.

구현 방법은 — 드롭다운 영역에 제목 요소(헤딩 또는 레이블)를 두거나, aria-label·aria-labelledby로 그 영역의 이름을 제공하는 것입니다. 이 제목은 보통 상위 메뉴 이름과 연결되죠. CP-065(계층 구조 마크업)·CP-064 (내비게이션 섹션 인지)와 함께, 메뉴의 구조와 맥락을 스크린리더에 전달하는 접근성 규칙군의 일부입니다.

핵심은 — 펼쳐진 메뉴 묶음이 ’무엇에 관한 것인지’를 제목으로 명시해, 시각·스크린리더 사용자 모두 맥락을 잃지 않게 하는 것입니다. 작은 디테일이지만 구조 인지와 접근성에 기여하죠.

3. 점검 / 개선

무엇을 점검하나

제목 존재 — 드롭다운 영역에 제목(또는 레이블)이 있는가.

맥락 전달 — 제목이 그 묶음이 무엇인지 알리는가.

스크린리더 — 스크린리더가 드롭다운 영역의 제목을 읽는가.

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

역할	책임
디자이너	드롭다운 묶음별 제목 설계(특히 메가메뉴)
퍼블리셔/개발	제목 요소 또는 aria-label 구현

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

드롭다운/메가메뉴를 사용하는 사이트 = 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 드롭다운 영역에 제목(또는 레이블)이 있나요?

□ 제목이 그 묶음이 무엇인지 알리나요?

□ 스크린리더가 드롭다운 제목을 읽나요?

❓ FAQ

Q1. 항목만 있으면 안 되나요? 항목만 있으면 맥락이 흐려집니다. 특히 스크린리더 사용자는 ’무슨 묶음인지’를 제목으로 알아야 합니다. Q2. 시각적으로 제목이 꼭 보여야 하나요? 메가메뉴는 보이는 제목이 좋고, 단순 드롭다운은 최소한 aria-label 로 스크린리더에 제공합니다. Q3. KRDS를 채택하면 자동인가요? 표준 드롭다운/메가메뉴는 제목을 제공합니다.

6. 마무리

CP-057의 메시지:

이 묶음이 뭔지 알려주기 — 드롭다운 제목이 시각·스크린리더 사용자 모두에게 맥락을 준다.

펼쳐진 드롭다운에 제목을 달면, 하위 항목들이 ‘무슨 묶음인지’ 맥락이 명확해집니다. 특히 스크린리더 사용자는 제목으로 현재 듣는 항목들의 소속을 알죠. 메뉴 구조와 접근성을 돕는 규칙군의 일부입니다.

다음 편은 메뉴 링크 개수의 최소화를 다룹니다. CP-058 — “링크의 개수를 최소화한다.”

다음 편 예고 ▶ 「178. (CP-058) 링크의 개수를 최소화하고 있다.」

ViewCheck는 드롭다운 영역에 제목이 제공되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 메인 메뉴(Main menu) 가이드 — https://www.krds.go.kr/html/site/component/component_06.html

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

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