이 영역은 내비게이션이다

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

0. 들어가며 — 스크린 리더에게 영역의 정체를 알리기

이번 218편은 사이드 메뉴 컨테이너가 ’내비게이션 섹션’임을 스크린 리더가 인지하게 하라는 규칙입니다.

시각 사용자는 본문 옆에 세로로 늘어선 링크 묶음을 보고 단번에 ‘아, 메뉴구나’ 합니다. 그런데 스크린 리더 사용자 에게는 그 시각적 배치가 안 보이죠. 컨테이너가 <nav> 같은 시맨틱 구획으로 표시돼 있지 않으면, 스크린 리더는 이 영역을 그냥 ’링크 여러 개’로만 읽어 — 내비게이션인지조차 모릅니다. CP-098은 이 영역에 ’내비게이션’이라는 정체성을 부여합니다. 이번 편을 풀어냅니다.

1. 규칙 원문 — nav 섹션 인지

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

사이드 메뉴를 감싸는 컨테이너를 <nav>(또는 role="navigation")로 마크업해, 보조기술이 이 영역을 ’내비게이션 구획’으로 인지하고 빠르게 탐색하게 하라는 뜻입니다.

정리: 사이드 메뉴 컨테이너를 <nav>로 감싸 ’내비게이션’임을 보조기술에 알려라. 이게 CP-098입니다.

2. 왜 nav 구획으로 인지시키나

이 규칙의 논리는 앞서 브레드크럼 편(CP-085)에서 본 것과 같은 줄기입니다. 스크린 리더 사용자는 페이지를 위→ 아래로만 읽지 않고, 구획(landmark) 단위로 점프하며 탐색하죠 — “내비게이션으로”, “메인 콘텐츠로”. 이 점프가 가능하려면 각 영역이 시맨틱 구획 태그로 표시돼야 합니다.

사이드 메뉴 컨테이너를 <div>로만 만들면 — 스크린 리더의 구획 목록에 안 잡힙니다. 그러면 비시각 사용자는 사이드 메뉴를 ‘찾아서’ 갈 수단이 없죠. 본문을 읽다가 우연히 마주치거나, 처음부터 순서대로 훑어 내려가야만 도달합니다. 탐색 도구인데 정작 그 탐색 도구에 빠르게 접근할 길이 막힌 셈입니다.

그래서 사이드 메뉴 컨테이너를 <nav>로 감쌉니다. <nav>는 ’주요 내비게이션 영역’을 뜻하는 시맨틱 구획 이라, 스크린 리더가 이를 ’navigation landmark’로 인식해 구획 목록에 올립니다. 사용자는 단축키로 내비게이션 구획들을 훑어 사이드 메뉴로 바로 점프하죠. <div role="navigation">도 같은 효과지만, 시맨틱 태그 <nav>가 더 권장됩니다.

여기서 한 가지 더 — 페이지엔 보통 <nav>가 여럿입니다(메인 메뉴, 사이드 메뉴, 브레드크럼, 푸터). 그래서 브레드크럼(CP-085)에서처럼 각 <nav>에 aria-label로 고유한 이름을 붙이는 것이 좋습니다 — 예: 사이드 메뉴라면 aria-label="○○ 메뉴"나 해당 섹션명. 그래야 스크린 리더가 “○○ 메뉴, 내비게이션” 처럼 읽어, 사용자가 여러 내비게이션 중 이게 어느 것인지 구분합니다. 이 이름은 CP-093에서 본 사이드 메뉴 헤더(<h2> 등)와 aria-labelledby로 연결해 줄 수도 있죠.

CP-098은 ’이 영역이 내비게이션이다(구획 인지)’를 담당하고, 바로 다음 CP-099가 ’그 안의 내용이 계층 구조다 (<h2>~<h6>·<ul>·<li>)’를 담당합니다. 둘이 합쳐져 스크린 리더 사용자는 ’내비게이션 영역에 들어왔고, 그 안이 이런 계층으로 구성됐구나’를 온전히 파악하죠. 시각 사용자가 한눈에 보는 것을, 비시각 사용자는 구획 + 계층 시맨틱으로 동등하게 얻습니다.

3. 점검 / 개선

무엇을 점검하나

<nav> 컨테이너 — 사이드 메뉴가 <nav>(또는 role="navigation")로 감싸였는가.

구획 인지 — 스크린 리더 구획 목록에 내비게이션으로 잡히는가.

고유 이름 — 여러 nav 구분을 위해 aria-label(또는 aria-labelledby)이 있는가.

개선 방향

<nav aria-label="정책정보 메뉴"> <!-- 또는 헤더와 aria-labelledby 연결 --> <h2>정책정보</h2> <!-- CP-093/099 --> <ul> … </ul> <!-- CP-099 --> </nav>

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

역할	책임
퍼블리셔/개발	<nav> 구획·aria-label 마크업
접근성 담당	스크린 리더 구획 탐색 검증

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

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

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

□ 스크린 리더 구획 목록에 내비게이션으로 잡히나요?

□ 여러 nav 구분을 위한 aria-label 이 있나요?

❓ FAQ

Q1. <div>로 만들고 CSS만 잘 하면 안 되나요? 시각적으론 메뉴로 보여도 스크린 리더는 내비게이션임을 모릅니다. <nav> 구획이 필요합니다. Q2. 페이지에 nav가 여러 개인데 괜찮나요? 각 nav에 aria-label로 고유 이름을 주면 구분됩니다. Q3. CP-085(브레드크럼 nav)와 같은 건가요? 같은 원리입니다. 브레드크럼·사이드 메뉴·메인 메뉴 모두 각자 <nav> 구획 + 이름을 가집니다.

6. 마무리

CP-098의 메시지:

이 영역은 내비게이션이다 — 컨테이너를 <nav> 구획으로 인지시켜라.

스크린 리더 사용자는 구획 단위로 점프합니다. 사이드 메뉴를 <nav>로 감싸고 aria-label로 이름을 주면, 비시각 사용자도 이 영역을 내비게이션으로 인지하고 빠르게 도달하죠. 다음 편은 그 안의 내용 — 계층 구조 시맨틱 마크업입니다.

**다음 편 예고 ▶ 「219. (CP-099)

~

,

,

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

ViewCheck는 사이드 메뉴 컨테이너가 <nav> 구획으로 보조기술에 노출되는지를 진단합니다.

📚 참고 출처

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

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

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