을 사용하지 않고 있다.

KRDS CP-113 — 링크 목록에

KRDS 체크리스트 항목 CP-113 · 컴포넌트 > 콘텐츠 내 탐색(In-page navigation) 〈846 규칙 완전 분해 시리즈 (233)〉 — “페이지 제목은 하나뿐”: 목차에 h1 금지

0. 들어가며 — 콘텐츠 내 탐색 그룹의 마지막

이번 233편은 콘텐츠 내 탐색 그룹(CP-106~113, 8개)의 마지막 규칙입니다. 목차 링크 목록에 <h1>을 쓰지 말라는 내용이죠.

<h1>은 한 페이지에서 ’이 문서가 무엇인지’를 알리는 최상위 제목입니다. 보통 페이지당 하나죠. 그런데 페이지 목차(콘텐츠 내 탐색)를 만들면서 그 제목이나 항목에 <h1>을 또 쓰면 — 페이지에 <h1>이 여러 개가 되어 제목 위계가 무너집니다. CP-113은 목차 영역에 <h1>을 쓰지 않게 해 제목 구조를 보호합니다. 이번 편을 풀어내며 콘텐츠 내 탐색 8개를 마무리합니다.

1. 규칙 원문 — 링크 목록에 h1 미사용

CP-113 (컴포넌트 > 콘텐츠 내 탐색) “링크 목록에 <h1>을 사용하지 않고 있다.”

콘텐츠 내 탐색(페이지 목차)의 링크 목록이나 그 제목에 <h1> 태그를 쓰지 말고, 페이지의 <h1>은 본문 최상위 제목 하나로만 유지하라는 뜻입니다.

정리: 목차 영역엔 <h1>을 쓰지 마라. h1은 페이지 제목 하나뿐. 이게 CP-113입니다.

2. 왜 목차에 h1을 쓰면 안 되나

HTML의 제목 태그(<h1>~<h6>)는 문서의 논리적 위계를 표현합니다. 그중 <h1>은 위계의 최상위 — ’이 페이지가 다루는 주제 전체’를 대표하는 제목이죠. 스크린 리더 사용자는 이 제목 위계를 통해 문서 구조를 머릿속에 그립니다 — “<h1> 아래에 <h2> 섹션들이 있고, 그 아래 <h3>가…”. 그래서 <h1>은 페이지의 주제를 한 번만 선언하는 것이 원칙입니다(접근성·SEO 양쪽 권장 사항).

페이지 목차에 <h1>을 쓰는 실수는 두 가지 형태로 나타납니다:

① 목차의 제목에 <h1>. 목차 영역 위에 “목차” 또는 “이 페이지에서”라는 제목을 달면서 <h1>로 마크업하는 경우. 그러면 페이지에 본문 제목 <h1>과 목차 제목 <h1>이 둘이 되죠. 스크린 리더 사용자는 “최상위 제목이 두 개네? 이 페이지의 주제가 둘인가?” 하고 혼란스러워합니다. 목차 제목은 본문 <h1>보다 하위이므로 <h2>나 <h3>이 적절하고, 더 좋게는 <nav>의 aria-label(CP-098 맥락)로 영역 이름을 주는 방법도 있습니다.

② 목차 항목(링크) 자체를 <h1>로. 더 드물지만, 목차의 각 링크 항목을 <h1>로 감싸는 경우. 목차는 ’링크 목록’이지 ’제목 모음’이 아닙니다 — 항목들은 <ul>/<li> 안의 <a> 링크로 마크업해야 하죠(사이드 메뉴 CP-099와 같은 원리). 항목을 <h1>로 만들면 페이지에 <h1>이 수두룩해져 제목 위계가 완전히 붕괴됩니다.

이렇게 <h1>이 남발되면 — 스크린 리더의 ‘제목 탐색’(h 단축키로 제목만 훑기)이 무력화됩니다. 원래는 <h1> 하나로 페이지 주제를, <h2>들로 섹션을 빠르게 파악해야 하는데, <h1>이 여러 개면 위계가 뒤죽박죽이 되어 구조 파악이 안 되죠. SEO 측면에서도 다중 <h1>은 페이지 주제를 모호하게 만듭니다.

그래서 CP-113은 목차 영역에서 <h1>을 배제합니다. 페이지의 <h1>은 본문 최상위 제목 하나로만 두고, 목차 제목은 <h2>~<h6>(또는 aria-label), 목차 항목은 <ul>/<li>/<a>로 마크업하죠. 이는 콘텐츠 내 탐색이 본문의 제목 위계를 반영하는 보조 도구일 뿐, 그 자체가 또 다른 최상위 제목을 만들어선 안 된다는 뜻입니다. CP-108 (목차-제목 일치)에서 본 ’목차는 섹션 제목의 거울’이라는 성격과 일맥상통하죠 — 거울은 원본 위에 군림하지 않습니다.

3. 점검 / 개선

무엇을 점검하나

목차 제목 태그 — 목차 영역 제목이 <h1>이 아닌가(h2~h6 또는 aria-label).

항목 마크업 — 목차 항목이 <h1>이 아니라 <ul>/<li>/<a>인가.

페이지 h1 단일 — 페이지 전체에서 <h1>이 본문 제목 하나뿐인가.

개선 방향

목차 제목은 <h2>~<h6> 또는 <nav aria-label="...">로.

목차 항목은 <ul>/<li>/<a href="#...">로 마크업.

페이지 내 <h1> 개수를 1개로 점검.

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

역할	책임
퍼블리셔/개발	목차 영역 제목·항목 태그를 h1 아닌 것으로 마크업
접근성 담당	페이지 h1 단일·제목 위계 검증

기관 유형	CP-113 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (콘텐츠 내 탐색 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 목차 영역 제목이 <h1>이 아닌가요(h2~h6 또는 aria-label)?

□ 목차 항목이 <ul>/<li>/<a>로 마크업됐나요(h1 아님)?

□ 페이지 전체에서 <h1>이 본문 제목 하나뿐인가요?

❓ FAQ

Q1. 목차에도 제목을 달면 안 되나요? 제목을 달 수 있습니다. 단 <h1>이 아니라 <h2>~<h6>이나 aria-label로 합니다. Q2. 페이지에 <h1>이 여러 개면 안 되나요? 접근성·SEO상 <h1>은 페이지 주제를 대표하는 하나가 원칙입 니다. 목차가 또 <h1>을 만들면 위계가 무너집니다. Q3. 목차 항목은 제목 태그로 해야 더 잘 보이지 않나요? 항목은 ’링크’이지 ’제목’이 아닙니다. <a> 링크로 마크업하고 스타일로 보기 좋게 합니다.

6. 마무리

CP-113의 메시지:

페이지 제목은 하나뿐 — 목차 링크 목록에 <h1>을 쓰지 마라.

<h1>은 페이지 주제를 대표하는 최상위 제목 하나입니다. 목차 제목이나 항목에 <h1>을 또 쓰면 위계가 무너져 스크린 리더 제목 탐색이 무력화되죠. 목차 제목은 <h2>~<h6>/aria-label, 항목은 <ul>/<li>/<a>로 마크업 합니다. 이로써 콘텐츠 내 탐색 8개 규칙(CP-106~113)을 마칩니다. 다음 편부터는 새 컴포넌트 그룹 페이지네이션 (Pagination) 으로 넘어갑니다.

다음 편 예고 ▶ 「234. (CP-114) 페이지네이션에는 첫/마지막 화면, 이전/다음 화면으로 이동할 수 있는 수단을 제공하고 있다.」

ViewCheck는 콘텐츠 내 탐색 영역에 <h1>이 잘못 사용됐는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 콘텐츠 내 탐색(In-page navigation) 가이드 — https://www.krds.go.kr/html/site/component/component_09.html

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

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