메인메뉴 계층마크업

KRDS CP-065 — 스크린 리더 사용자가 사이트의 정보 구조를 파악하는 데 도움을 줄 수 있도록

,

,

태그를 활용하여 계층 구조로 정보를 제공하고 있다.

KRDS 체크리스트 항목 CP-065 · 컴포넌트 > 메인 메뉴(Main menu) 〈846 규칙 완전 분해 시리즈 (185)〉 — “의미 있는 태그로 계층을”: 메뉴의 시맨틱 구조

0. 들어가며 — 보이는 계층, 들리는 계층

이번 185편은 메뉴를 <h2>~<h6>, <ul>, <li> 태그로 계층 구조로 제공하는 규칙입니다.

메뉴는 대분류 > 중분류 > 소분류의 계층 구조를 가집니다(CP-059). 시각 사용자는 이 계층을 들여쓰기·크기로 봅니다. 하지만 스크린리더 사용자는 — 메뉴가 의미 있는 태그(헤딩·목록)로 마크업돼 있어야 계층을 파악하죠. CP-065는 이를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 헤딩·목록 태그로 계층

CP-065 (컴포넌트 > 메인 메뉴) “스크린 리더 사용자가 사이트의 정보 구조를 파악하도록 <h2>~<h6>, <ul>, <li> 태그를 활용하여 계층 구조로 정보를 제공하고 있다.”

메뉴의 계층 구조를 헤딩(<h2>~<h6>)과 목록(<ul>, <li>) 태그로 시맨틱하게 표현하라는 뜻입니다.

정리: 메뉴를 헤딩·목록 태그로 계층 구조화하여 제공하라. 이게 CP-065입니다.

2. 왜 시맨틱 태그로 계층을 표현하나

메뉴의 계층은 시각 사용자에게는 들여쓰기·크기·위치로 보입니다. 하지만 스크린리더는 시각적 모양을 보지 못합니다 — 오직 HTML 태그의 의미(시맨틱) 로 구조를 파악하죠. 그래서 메뉴 계층을 의미 있는 태그로 마크업해야, 스크린리더 사용자도 계층을 인지합니다.

<ul>, <li> (목록) — 메뉴는 본질적으로 ’항목들의 목록’입니다. <ul>(순서 없는 목록)과 <li>(목록 항목)로 마크업하면, 스크린리더가 “목록, 5개 항목”처럼 안내해 사용자가 ’여기 5개 메뉴가 있구나’를 알죠. 또 하위 메뉴를 <li> 안에 중첩된 <ul>로 넣으면, 계층(상위-하위) 관계가 구조로 표현됩니다. 스크린리더는 이 중첩을 읽어 ’이 항목은 하위 메뉴가 있구나’를 전달하죠. 단순 <div>·<span> 나열로는 이 목록·계층 정보가 전달되지 않습니다.

<h2>~<h6> (헤딩) — 메뉴 묶음의 제목이나 대분류를 헤딩으로 표시하면, 스크린리더가 헤딩으로 인식해 구조 파악을 돕습니다. 스크린리더 사용자는 ‘헤딩 간 이동’ 단축키로 구조를 빠르게 훑는데, 메뉴 대분류가 헤딩 이면 그 탐색에 활용되죠. (단, 헤딩 레벨은 페이지 전체 구조와 논리적으로 맞아야 합니다 — <h1>은 페이지 제목 이므로 메뉴 묶음은 <h2> 이하.)

이 둘을 합치면 — 메뉴가 헤딩(묶음 제목) + 목록(항목들) + 중첩 목록(하위 계층)으로 시맨틱하게 구조화됩니다. 그러면 스크린리더 사용자도 시각 사용자가 보는 것과 같은 ’계층 구조’를 파악하죠. 보이는 계층과 들리는 계층이 일치하는 것입니다.

이는 시맨틱 마크업(레이아웃 편)의 메뉴 적용입니다 — CSS로 모양만 계층처럼 보이게 하는 게 아니라, HTML 구조 자체가 계층을 담아야 모든 사용자에게 구조가 전달되죠. CP-064(<nav> 랜드마크)가 ‘여기가 메뉴’를 알렸다면, CP-065는 ’메뉴의 내부 계층 구조’를 시맨틱하게 표현하는 것입니다. KWCAG ’콘텐츠의 논리성·구조’ 관련 접근성과 직결됩니다.

3. 점검 / 개선

무엇을 점검하나

목록 태그 — 메뉴 항목이 <ul>, <li>로 마크업됐는가.

중첩 계층 — 하위 메뉴가 중첩 <ul>로 계층화됐는가.

헤딩 활용 — 메뉴 묶음 제목이 <h2>~<h6>로 적절한가.

Before / After

<!-- ✅ 시맨틱 계층 구조 --> <nav aria-label="주 메뉴"> <ul> <li><a href="/policy">정책정보</a> <ul> <!-- 하위 계층 --> <li><a href="/policy/notice">공지사항</a></li> </ul> </li> </ul> </nav>

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

역할	책임
퍼블리셔/개발	메뉴를 헤딩·목록 태그로 시맨틱 계층 마크업
접근성 담당	계층 구조 인식 검수

기관 유형	CP-065 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수

행정·공공기관 디지털 정부서비스 = 전부 해당.

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 메뉴 항목이 <ul>, <li>로 마크업됐나요?

□ 하위 메뉴가 중첩 <ul>로 계층화됐나요?

□ 메뉴 묶음 제목이 <h2>~<h6>로 적절한가요?

❓ FAQ

Q1. div로 만들면 안 되나요? <div> 나열은 목록·계층 정보를 전달 못 합니다. <ul>/<li> 시맨틱 태그로 스크린리더에 구조를 전달해야 합니다. Q2. 헤딩 레벨은 어떻게 정하나요? <h1>은 페이지 제목이므로 메뉴 묶음은 <h2> 이하로, 페이지 전체 구조와 논리적으로 맞춥니다. Q3. KRDS를 채택하면 자동인가요? 표준 메뉴는 시맨틱 목록·계층 구조로 제공됩니다.

6. 마무리

CP-065의 메시지:

의미 있는 태그로 계층을 — 보이는 계층과 들리는 계층이 일치해야 한다.

메뉴 계층을 <ul>/<li>(목록·중첩)와 <h2>~<h6>(묶음 제목)로 시맨틱하게 표현하면, 스크린리더 사용자도 시각 사용자처럼 계층을 파악합니다. CSS 모양이 아니라 HTML 구조가 계층을 담아야 하죠. CP-064(랜드마크) 다음의 ‘내부 계층 구조’ 규칙입니다.

다음 편은 활성 메뉴의 스크린리더 전달을 다룹니다. CP-066 — “활성화된 메뉴 정보가 스크린리더로 전달되게 한다.”

다음 편 예고 ▶ 「186. (CP-066) 활성화된 메뉴 정보가 스크린 리더로 전달될 수 있도록 하고 있다.」

ViewCheck는 메뉴가 헤딩·목록 태그로 계층 구조화됐는지를 진단합니다.

📚 참고 출처

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

WCAG 2.1 SC 1.3.1 Info and Relationships

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

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