아코디언 헤더제목시맨틱

KRDS CP-199 — 아코디언 헤더 내부의 제목은 페이지의 다른 콘텐츠의 구조에 맞추어

태그로 마크업하고 있다.

KRDS 체크리스트 항목 CP-199 · 컴포넌트 > 아코디언(Accordion) 〈846 규칙 완전 분해 시리즈 (319)〉 — “제목은 제목 태그로”: 헤더 제목의 시맨틱 위계

0. 들어가며 — 굵은 글씨가 아니라 제목

이번 319편은 아코디언 헤더 내부 제목을 페이지 구조에 맞춰 <h1>~<h6> 태그로 마크업하라는 규칙입니다.

아코디언 헤더의 제목(FAQ의 질문 등)은 — 단순히 ’굵은 글씨’가 아니라 페이지 구조상 제목(heading) 입니다. 이를 <div>나 <span>에 굵게만 하면, 스크린 리더의 제목 탐색에 안 잡혀 비시각 사용자가 구조를 파악 못 하죠. CP-199는 헤더 제목을 페이지 위계에 맞는 <h1>~<h6>로 마크업하라고 규정합니다. 사이드 메뉴 CP-099 정신이죠. 이번 편을 풀어냅니다.

1. 규칙 원문 — 헤더 제목 h1~h6 마크업

CP-199 (컴포넌트 > 아코디언) “아코디언 헤더 내부의 제목은 페이지의 다른 콘텐츠의 구조에 맞추어 <h1>~<h6> 태그로 마크업하고 있다.”

아코디언 헤더의 제목을, 페이지 전체의 제목 위계(heading hierarchy)에 맞는 적절한 레벨의 <h1>~<h6> 태그로 마크업해, 보조기술이 문서 구조의 일부로 인지하게 하라는 뜻입니다.

정리: 아코디언 헤더 제목을 페이지 위계에 맞는 <h1>~<h6>로 마크업하라. 이게 CP-199입니다.

2. 왜 제목 태그로 마크업하나

스크린 리더 사용자의 강력한 탐색 수단 중 하나가 제목 탐색입니다 — 페이지의 제목(<h1>~<h6>)들만 단축키로 훑어 문서 골격을 파악하고 원하는 섹션으로 점프하죠. 이 탐색이 작동하려면, 의미상 ’제목’인 요소가 제목 태그로 마크업돼야 합니다.

아코디언 헤더 제목은 ’제목’이다. FAQ의 질문, 약관의 조항 제목, 카테고리명 등 아코디언 헤더의 텍스트는 — 그 패널 내용을 대표하는 제목입니다. 문서 구조상 하나의 섹션 제목 역할을 하죠. 그래서 이를 <h2>, <h3> 같은 제목 태그로 마크업해야, 스크린 리더가 제목 탐색으로 아코디언 항목들을 훑게 됩니다 — “자주 묻는 질문” (h2) 아래 “신청 방법은?”(h3), “처리 기간은?”(h3)처럼 질문들을 제목으로 빠르게 탐색하죠.

제목 태그를 안 쓰면 구조 상실. 헤더 제목을 <div>나 <span>에 CSS로 굵게·크게만 만들면 시각적 으로는 제목처럼 보여도, 스크린 리더에겐 그냥 일반 텍스트입니다. 제목 탐색 목록에 안 잡혀, 비시각 사용자는 아코디언 항목들을 제목으로 훑을 수 없죠. 수십 개 FAQ를 일일이 순서대로 들어야 원하는 질문을 찾습니다 매우 비효율적이죠. 시각 사용자가 제목들을 한눈에 스캔하는 것과 동등한 경험을 못 얻습니다.

‘페이지 구조에 맞추어’ — 위계의 정확성. 단순히 아무 제목 태그나 쓰는 게 아니라, 페이지 전체의 제목 위계에 맞는 레벨을 써야 합니다. 제목 태그는 <h1>(최상위) → <h6>(최하위)의 위계를 가지며, 이 위계가 논리적이어야 스크린 리더가 문서 구조를 정확히 전달하죠(콘텐츠 내 탐색 CP-113의 ‘h1은 하나’ 정신). 예를 들어:

페이지 제목이 <h1>이고, 그 아래 “자주 묻는 질문” 섹션 제목이 <h2>라면, 그 안의 아코디언 헤더(각 질문)는 <h3>이 적절하죠.

위계를 건너뛰거나(h2 다음 바로 h4) 거꾸로 쓰면(하위 섹션에 h1) 구조가 어긋나, 스크린 리더 사용자가 문서 골격을 잘못 파악합니다.

그래서 아코디언 헤더 제목의 레벨은 — 그것이 페이지 구조에서 차지하는 깊이에 맞게 정해야 합니다. 아코디언이 어느 섹션 아래 있는지에 따라 적절한 레벨(보통 h3~h4)을 쓰죠.

헤더 구조 — 제목 + 버튼. WAI-ARIA 아코디언 패턴의 표준 구조는 — 제목 태그 안에 버튼을 두는 것입니다:

<h3> <button aria-expanded="false" aria-controls="panel1">신청 방법은?</button> </h3>

<h3>이 ’이건 제목’임을(제목 탐색), 그 안의 <button>이 ’눌러서 펼치는 트리거’임을(CP-201 버튼 역할, CP-196 헤더 전체 클릭) 전하죠. 제목 태그와 버튼이 결합해 — 제목 탐색도 되고 펼침 조작도 되는 헤더가 됩니다.

이 규칙은 아코디언 접근성의 구조 골격을 담당합니다 — 제목 태그(199)로 문서 구조를, 버튼 역할(201)로 조작을, aria-expanded(200)로 펼침 상태를 전달하죠. 함께 스크린 리더 사용자가 아코디언을 온전히 탐색·조작하게 합니다.

정리하면 — 아코디언 헤더 제목은 의미상 제목이므로, 페이지 위계에 맞는 <h1>~<h6> 태그로 마크업해 스크린 리더 제목 탐색에 잡히게 하고, 문서 구조를 정확히 전달해야 합니다.

3. 점검 / 개선

무엇을 점검하나

제목 태그 사용 — 헤더 제목이 <h1>~<h6>로 마크업됐는가(<div>/<span> 아님).

위계 정확성 — 페이지 제목 위계에 맞는 레벨인가(건너뜀·역행 없음).

제목+버튼 구조 — 제목 태그 안에 버튼이 들어간 표준 구조인가.

개선 방향

<h3><button aria-expanded="false" aria-controls="p1">질문</button></h3> <div id="p1" role="region" aria-labelledby="...">답변</div>

굵은 div를 적절한 레벨의 제목 태그로 전환. 위계 정합성 확인.

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

역할	책임
퍼블리셔/개발	헤더 제목 <h1>~<h6> 마크업·위계 정합
접근성 담당	제목 탐색으로 아코디언 항목 파악 검증

기관 유형	CP-199 적용
중앙행정기관(대표·운영) / 공공기관 / 지자체	✅ 필수 (아코디언 사용 시)

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

5. 30초 자가진단 + FAQ

✅ 30초 자가진단

□ 헤더 제목이 <h1>~<h6> 로 마크업됐나요(<div>/<span> 아님)?

□ 페이지 제목 위계에 맞는 레벨인가요(건너뜀·역행 없음)?

□ 제목 태그 안에 버튼이 들어간 표준 구조인가요?

❓ FAQ

Q1. CSS로 크게·굵게만 하면 안 되나요? 시각적으론 제목처럼 보여도 스크린 리더는 일반 텍스트로 읽습니다. 제목 태그가 필요하죠. Q2. 레벨은 뭘 쓰나요? 페이지 위계에 맞는 레벨입니다. 아코디언이 어느 섹션 아래 있는지에 따라 보통 h3~h4를 씁니다. Q3. 제목 태그 안에 버튼을 넣는 게 맞나요? 네. <h3><button>...</button></h3>이 WAI-ARIA 아코디언 표준 구조입니다.

6. 마무리

CP-199의 메시지:

제목은 제목 태그로 — 헤더 제목을 페이지 위계에 맞는 <h1>~<h6>로 마크업하라.

아코디언 헤더 제목은 의미상 제목이라, <h1>~<h6>로 마크업해야 스크린 리더 제목 탐색에 잡힙니다. 굵은 div로 만들면 비시각 사용자가 항목을 제목으로 훑을 수 없죠. 페이지 위계에 맞는 레벨로, 제목 태그 안에 버튼을 둔 표준 구조로 마크업합니다. 다음 편은 활성화 상태의 스크린 리더 전달입니다.

다음 편 예고 ▶ 「320. (CP-200) 아코디언의 활성화 상태 정보를 스크린 리더에서 확인할 수 있도록 하고 있다.」

ViewCheck는 아코디언 헤더 제목이 시맨틱 제목 태그로 마크업되는지를 진단합니다.

📚 참고 출처

KRDS 컴포넌트 — 아코디언(Accordion) 가이드 — https://www.krds.go.kr/html/site/component/component_18.html

WAI-ARIA APG — Accordion Pattern — https://www.w3.org/WAI/ARIA/apg/patterns/accordion/

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

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