사이드메뉴 계층시맨틱마크업

,

,

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

KRDS 체크리스트 항목 CP-099 · 컴포넌트 > 사이드 메뉴(Side navigation) 〈846 규칙 완전 분해 시리즈 (219)〉 — “눈에 보이는 계층을 코드로도”: 제목·목록 시맨틱

0. 들어가며 — 들여쓰기는 눈에만, 코드엔 계층을

이번 219편은 사이드 메뉴를 <h2>~<h6>, <ul>, <li> 태그로 계층 구조 마크업하라는 규칙입니다.

CP-095에서 계층을 ‘시각적으로’ 구분했습니다. 그런데 들여쓰기·크기 같은 시각 단서는 스크린 리더에 전달되지 않죠. 비시각 사용자도 정보 구조를 파악하려면 — 계층을 코드(시맨틱 태그)로 표현해야 합니다. 묶음 제목은 <h2>~<h6>, 목록은 <ul>, 항목은 <li>로요. CP-099는 이 시맨틱 계층을 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 제목·목록 시맨틱 계층

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

사이드 메뉴의 묶음 제목은 제목 태그(<h2>~<h6>), 메뉴 목록은 순서 없는 목록(<ul>), 각 항목은 목록 항목(<li>) 으로 마크업해, 보조기술이 정보 구조의 계층과 깊이를 인지하게 하라는 뜻입니다.

정리: 사이드 메뉴 계층을 <h2>~<h6>+<ul>+<li> 시맨틱으로 표현하라. 이게 CP-099입니다.

2. 왜 제목·목록 태그로 계층을 표현하나

스크린 리더 사용자는 두 가지 강력한 탐색 수단을 씁니다 — 제목 탐색과 목록 탐색. 제목(<h1>~<h6>) 들만 단축키로 훑으면 페이지의 골격을 파악하고, 목록(<ul>/<ol>)으로 점프하면 묶인 항목들을 빠르게 듣죠. 사이드 메뉴를 이 시맨틱 태그로 마크업하면, 비시각 사용자도 이 수단들을 그대로 활용할 수 있습니다.

<h2>~<h6> — 묶음 제목. 사이드 메뉴의 대분류/섹션 제목(CP-093의 헤더)을 제목 태그로 마크업하면, 스크린 리더 사용자가 제목 탐색으로 “정책정보”, “민원안내” 같은 묶음을 빠르게 훑어 원하는 섹션으로 점프합니다. 페이지 내 다른 제목들과의 위계(<h1> 페이지 제목 아래 <h2> 묶음 등)도 전달되죠. 그냥 굵은 <div>로 제목처럼 보이게만 하면 이 탐색이 안 됩니다.

<ul>·<li> — 목록과 항목. 메뉴 항목들을 <ul>(목록)과 <li>(항목)로 묶으면, 스크린 리더가 “목록, 항목 5개” 처럼 개수를 알리고, 각 항목을 “항목 2 / 5” 처럼 위치와 함께 읽습니다. 사용자는 ’이 묶음에 화면이 5개 있고 지금 2번째구나’를 압니다. 중첩 목록(<ul> 안에 <li> 안에 또 <ul>)으로 마크업하면 2수준 계층(CP-092)이 구조적으로 전달되죠 — 시각의 들여쓰기에 대응하는 코드상의 깊이입니다.

핵심은 — CP-095(시각 계층)와 CP-099(시맨틱 계층)는 같은 정보의 두 채널이라는 점입니다. 시각 사용자는 들여쓰기·크기로 계층을 보고, 비시각 사용자는 제목·목록 태그로 같은 계층을 듣죠. 둘 다 갖춰야 모든 사용자가 동등하게 구조를 파악합니다. 흔한 실수는 시각만 신경 써서 <div>+CSS로 계층을 ‘보이게만’ 만드는 것 — 그러면 스크린 리더엔 구조가 사라집니다.

그리고 이 규칙은 CP-098(컨테이너 <nav>)과 짝입니다 — <nav>가 ’여기는 내비게이션 영역’을, 그 안의 <h2>~<h6>+<ul>+<li>가 ’이런 계층 구조’를 전달하죠. 구획 + 계층 시맨틱이 합쳐져 사이드 메뉴의 접근성 골격이 완성됩니다. 현재 위치 표시는 이어지는 CP-100·101의 aria-current가 보탭니다.

3. 점검 / 개선

무엇을 점검하나

제목 태그 — 묶음/섹션 제목이 <h2>~<h6>로 마크업됐는가(<div> 아님).

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

중첩 계층 — 2수준 계층이 중첩 목록으로 구조화됐는가.

제목 위계 — 페이지 제목(<h1>)과의 위계가 자연스러운가.

개선 방향

<nav aria-label="정책정보 메뉴"> <h2>정책정보</h2> <ul> <li><a href="...">보도자료</a></li> <li><a href="...">입법예고</a> <ul><li><a href="...">진행 중</a></li></ul> <!-- 2수준 --> </li> </ul> </nav>

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

역할	책임
퍼블리셔/개발	제목·목록 시맨틱 계층 마크업
접근성 담당	제목·목록 탐색으로 구조 파악 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 묶음 제목이 <h2>~<h6> 인가요(<div> 아님)?

□ 메뉴가 <ul>/<li> 로 마크업됐나요?

□ 2수준 계층이 중첩 목록으로 표현됐나요?

□ 스크린 리더 제목·목록 탐색으로 구조가 파악되나요?

❓ FAQ

Q1. CSS로 계층을 잘 보이게 했으면 충분하지 않나요? 시각만으론 스크린 리더에 구조가 안 전달됩니다. 제목· 목록 시맨틱이 필요합니다. Q2. <ol>이 아니라 <ul>인가요? 사이드 메뉴 항목은 순서가 본질이 아니라 분류·묶음이므로 <ul>이 적절합니다(순서가 의미인 브레드크럼은 <ol>). Q3. 제목은 꼭 <h2>인가요? 페이지 제목(<h1>) 아래라면 <h2>가 자연스럽고, 더 깊으면 <h3>~<h6>로 위계를 맞춥니다.

6. 마무리

CP-099의 메시지:

눈에 보이는 계층을 코드로도 — <h2>~<h6>+<ul>+<li>로 구조를 전달하라.

들여쓰기·크기 같은 시각 계층은 스크린 리더에 안 보입니다. 묶음 제목은 제목 태그로, 메뉴는 목록 태그로 마크업 해야 비시각 사용자도 제목·목록 탐색으로 구조를 파악하죠. CP-095(시각)와 CP-099(시맨틱)는 같은 계층의 두 채널입니다. 다음 편은 현재 위치의 보조기술 전달 — aria-current입니다.

다음 편 예고 ▶ 「220. (CP-100) 인디케이터가 시각적으로만 구분되는 것이 아니라 스크린 리더로도 전달될 수 있도록 WAI-ARIA aria-current 속성을 제공하고 있다.」

ViewCheck는 사이드 메뉴가 제목·목록 시맨틱으로 계층 구조를 노출하는지를 진단합니다.

📚 참고 출처

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

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

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