여기가 메뉴입니다

KRDS CP-064 — 메뉴의 컨테이너가 내비게이션 섹션임을 스크린 리더에서 인지할 수 있도록 구현되어 있다.

0. 들어가며 — 스크린리더에게 ’메뉴’를 알리기

이번 184편은 메뉴 컨테이너를 내비게이션 섹션으로 스크린리더가 인지하게 하는 규칙입니다.

푸터에 <footer> 랜드마크가 필요했듯(CP-043), 메뉴에는 <nav> 랜드마크가 필요합니다. 메뉴를 <nav>로 표시하면, 스크린리더가 ’여기가 내비게이션 영역’임을 인식해 사용자에게 안내하죠. CP-064는 이를 규정합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — 내비게이션 섹션 인지

CP-064 (컴포넌트 > 메인 메뉴) “메뉴의 컨테이너가 내비게이션 섹션임을 스크린 리더에서 인지할 수 있도록 구현되어 있다.”

메뉴를 감싸는 컨테이너를 스크린리더가 ’내비게이션 영역’으로 인식하게 구현하라는 뜻입니다.

정리: 메뉴 컨테이너가 내비게이션 섹션임을 스크린리더가 인지하게 구현하라. 이게 CP-064입니다.

2. 왜 nav 랜드마크인가

랜드마크는 페이지 주요 영역을 의미하는 시맨틱 표지입니다(CP-043). 내비게이션 영역의 랜드마크는 <nav> 요소(또는 role="navigation")이죠.

메뉴를 <nav>로 감싸면, 스크린리더는 그 영역을 ’내비게이션 랜드마크’로 인식합니다. 그러면 시각장애 사용자는 — ① 스크린리더의 랜드마크 목록에서 “내비게이션”을 보고 메뉴 영역의 존재를 알며, ② “내비게이션으로 가기” 단축키로 메뉴에 즉시 도달하고, ③ 메뉴 영역에 진입할 때 “내비게이션”이라는 안내를 들어 ’지금 메뉴를 탐색 한다’를 인지하죠. 메뉴가 일반 <div>면 이 모든 게 안 됩니다 — 스크린리더는 그냥 링크 목록으로만 읽어, 그게 ’주 메뉴’인지 그냥 링크 모음인지 구분 못 하죠.

페이지에 내비게이션이 여러 개일 수 있습니다(메인 메뉴, 사이드 메뉴, 푸터 메뉴, 브레드크럼 등). 이때 각 <nav>에 이름을 주면(aria-label="주 메뉴" 등) 스크린리더가 “주 메뉴 내비게이션”, “푸터 내비게이션”처럼 구분해 안내하죠. 여러 내비게이션을 구별할 수 있어 더 유용합니다.

CP-064는 메뉴 접근성의 기초입니다 — 메뉴가 ‘내비게이션’임을 스크린리더가 알아야, 그다음 규칙들(CP-065 계층 구조, CP-066 활성 메뉴, CP-067 키보드 탐색, CP-068 초점 순서)이 의미를 갖죠. 메뉴 영역 자체를 랜드마크로 인식시키는 것이 출발점입니다. 시맨틱 마크업(레이아웃 편)의 메뉴 적용이고, KWCAG ’제목·랜드마크’ 접근성과 연결됩니다.

구현은 간단합니다 — 메뉴를 <nav> 요소로 감싸고, 여러 개면 aria-label로 이름을 주는 것이죠. <div class="menu">가 아니라 <nav aria-label="주 메뉴">로 쓰는 작은 차이가 큰 접근성 효과를 냅니다.

3. 점검 / 개선

무엇을 점검하나

nav 사용 — 메뉴가 <nav>(또는 role="navigation")로 감싸였는가.

랜드마크 인지 — 스크린리더가 내비게이션 랜드마크로 인식하는가.

여러 nav 구분 — 내비게이션이 여럿이면 aria-label로 이름이 있는가.

Before / After

<!-- ❌ div (랜드마크 안 됨) --> <div class="main-menu">...</div> <!-- ✅ nav 랜드마크 + 이름 --> <nav aria-label="주 메뉴">...</nav>

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

역할	책임
퍼블리셔/개발	메뉴를 <nav>로 마크업 + aria-label 부여
접근성 담당	랜드마크 인식 검수

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

행정·공공기관 디지털 정부서비스 = 전부 해당. (KWCAG 랜드마크 직결.)

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 메뉴가 <nav>로 감싸였나요?

□ 스크린리더가 내비게이션 랜드마크로 인식하나요?

□ 내비게이션이 여럿이면 aria-label로 이름이 있나요?

❓ FAQ

Q1. div로 만들면 안 되나요? <div>는 의미가 없어 랜드마크가 안 됩니다. <nav> 시맨틱 태그여야 스크린 리더가 ’내비게이션’으로 인식합니다. Q2. nav가 여러 개면요? 각 <nav>에 aria-label로 이름을 주면 스크린리더가 “주 메뉴”, “푸터 메뉴”처럼 구분합니다. Q3. KRDS를 채택하면 자동인가요? 표준 메뉴는 <nav> 랜드마크로 제공됩니다.

6. 마무리

CP-064의 메시지:

여기가 메뉴입니다 — <nav> 랜드마크로 스크린리더에게 ’내비게이션 영역’을 알린다.

메뉴를 <nav>로 감싸면 스크린리더가 ’내비게이션 랜드마크’로 인식해, 사용자가 메뉴 영역을 발견하고 즉시 도달 합니다. <div>로는 안 되죠. 메뉴 접근성의 출발점이고, 여러 내비게이션은 aria-label로 구분합니다.

다음 편은 메뉴의 계층 구조 마크업을 다룹니다. CP-065 — “<h2>~<h6>, <ul>, <li>로 계층 구조를 제공 한다.”

**다음 편 예고 ▶ 「185. (CP-065) 스크린 리더 사용자가 정보 구조를 파악하도록

~

,

,

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

ViewCheck는 메뉴 컨테이너가 <nav> 내비게이션 랜드마크로 구현됐는지를 진단합니다.

📚 참고 출처

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

WAI-ARIA Landmark / HTML <nav>

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

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