WCAG 2.4.10: 섹션 제목

WCAG 2.4.10은 페이지에 여러 섹션이 포함되어 있을 때마다 섹션 제목을 사용하여 콘텐츠를 구성할 것을 요구하며, 이를 통해 사용자가 페이지의 구조를 탐색하고 이해할 수 있도록 합니다. 이 기준은 스크린 리더 사용자, 인지적 접근성 요구가 있는 사람들, 그리고 길거나 복잡한 콘텐츠에서 문서 구조에 의존해 방향을 잡는 모든 사람을 지원합니다.

이 규칙의 의미

WCAG 2.4.10 — Section Headings (Level AAA)는 다음과 같이 규정한다. "섹션 제목은 콘텐츠를 구성하는 데 사용된다." 이는 웹 페이지나 문서가 여러 개의 뚜렷한 섹션으로 나뉘어 있을 때, 각 섹션은 그 주제나 목적을 설명하는, 프로그램적으로 판별 가능한 제목을 가져야 한다는 뜻이다. 의도는 단순히 제목처럼 보이도록 시각적으로만 스타일링된 텍스트를 두는 것이 아니라, 브라우저와 보조 기술 모두에 계층 구조를 전달하는 실제 제목 마크업을 사용하는 데 있다.

HTML에서는 이는 기본 제목 요소인 <h1>부터 <h6>까지를 적절히 사용하는 것을 의미한다. 주요 주제를 가진 페이지는 <h1>을 사용하고, 주요 섹션은 <h2>, 그 안의 하위 섹션은 <h3>를 사용하는 식이다. 제목 수준은 시각적 스타일링을 위한 임의의 선택이 아니라, 콘텐츠의 논리적 깊이를 반영해야 한다. ARIA를 사용하는 경우 role="heading"과 aria-level을 함께 사용하는 것도 허용되지만, 기본 HTML 요소가 항상 선호된다.

이 기준에서 준수란 페이지의 모든 개별 콘텐츠 섹션에, 이후에 나오는 내용을 정확히 설명하는 제목이 있고, 그 제목이 단순히 굵게 또는 크게 보이도록 스타일링된 텍스트가 아니라 의미론적으로 마크업되어 있으며, 제목 계층이 문서의 콘텐츠 구성 논리를 반영하는 경우를 의미한다. 위반은 콘텐츠 섹션에 제목이 전혀 없거나, 논리적 이유 없이 제목 수준을 건너뛰는 경우(예: <h1>에서 <h4>로 바로 점프), 또는 섹션을 표시하기 위해 적절한 제목 요소 대신 단순히 스타일링된 일반 텍스트를 사용하는 경우에 발생한다.

공식 WCAG 예외를 주목하는 것이 중요하다. 이 기준은 페이지 자체에 섹션이 있을 때에만 적용된다. 단일 통합 주제만 있는 매우 짧은 페이지 — 예를 들어, 뚜렷한 섹션이 없는 단순 로그인 폼 — 는 여러 개의 제목을 가질 필요가 없다. 요구 사항은 라벨링이 유익한 여러 개의 뚜렷한 콘텐츠 영역이 존재할 때 발동된다. 또한 이 기준은 논리적 조직을 넘어서는 특정한 제목 계층 구조를 강제하지 않는다. 핵심 요구 사항은 섹션이 존재하는 곳마다 제목이 존재하고 의미 있게 사용된다는 점이다.

이 기준은 Level AAA로 분류되며, 이는 기본적인 WCAG 2.2 적합성에는 필수는 아니지만, 다양한 사용자에게 경험을 크게 향상시키는 최고 수준의 접근성 모범 사례를 나타낸다는 의미이다.

왜 중요한가

스크린 리더 사용자는 긴 문서와 웹 페이지를 탐색할 때 주된 수단으로 제목에 의존한다. WebAIM의 Screen Reader User Survey에 따르면, 대다수의 스크린 리더 사용자가 정기적으로 제목으로 탐색하며, 이는 가장 많이 사용되는 탐색 방법 중 하나로 꾸준히 꼽힌다. 제목이 없거나 잘못 구조화되어 있으면, 스크린 리더 사용자는 페이지 맨 위에서부터 모든 콘텐츠를 순차적으로 들어야 하는데, 이는 시각 사용자가 목차나 장 제목 없이 책 전체를 읽도록 강요받는 것과 같다.

현실 세계의 예를 생각해 보자. 전자제품을 판매하는 터키의 한 전자상거래 사이트에 제품 상세 페이지가 있고, 여기에는 제품 사양, 고객 리뷰, 배송 정보, 반품 정책을 다루는 섹션이 있다고 하자. 이 섹션들 중 어느 것도 제목 요소를 가지고 있지 않다면, Firefox에서 NVDA로 탐색하는 시각장애 사용자는 이들 사이를 건너뛸 수 없다. 모든 콘텐츠를 끝까지 듣거나 시행착오식 검색 전략을 사용해야 하며, 이는 인지적 부담과 작업 시간을 크게 증가시킨다. 각 섹션에 적절한 <h2> 제목이 있다면, 같은 사용자는 H 키를 눌러 섹션 간을 몇 초 만에 즉시 이동할 수 있다.

인지 장애가 있는 사용자도 상당한 이점을 얻는다. 명확한 제목은 이정표 역할을 하여, 주의력 장애, 읽기 어려움, 기억력 손상이 있는 사람들이 집중을 잃은 후에도 빠르게 다시 방향을 잡을 수 있게 한다. 세계보건기구(WHO)는 전 세계적으로 약 13억 명이 어떤 형태로든 장애를 가지고 있다고 추정하며, 인지 및 신경학적 상태는 이 인구의 큰 비중을 차지하고 있으며 계속 증가하고 있다.

키보드만으로 탐색하거나 스위치 접근 장치에 의존하는 운동 장애 사용자도 혜택을 본다. 많은 보조 기술이 제목 구조를 사용해 건너뛰기 탐색 기회를 제공하기 때문에, 원하는 콘텐츠 영역에 도달하는 데 필요한 물리적 노력이 줄어든다.

장애 접근성을 넘어, 올바른 제목 구조는 상당한 SEO 이점을 가진다. 검색 엔진은 페이지의 주제 구조를 이해하기 위해 제목 계층을 사용하며, 이는 순위와 검색 결과에서 콘텐츠가 노출되는 방식에 영향을 줄 수 있다. 잘 구성된 제목 개요는 사용자와 크롤러 모두에게 콘텐츠 품질을 신호한다. 이는 법적으로 AAA 기준을 충족할 의무가 없는 조직에게도 이 AAA 기준을 구현해야 할 비즈니스적 근거를 설득력 있게 만든다.

테스트 방법

axe DevTools 또는 Lighthouse를 사용한 자동 스캔: Chrome 또는 Firefox용 axe DevTools 브라우저 확장 프로그램을 설치하고 전체 페이지 스캔을 실행한다. heading-order와 page-has-heading-one 관련 문제를 검토한다. 자동 스캔에서 문제가 없다고 해서 WCAG 2.4.10 준수가 확인되는 것은 아니며, 자동화 가능한 부분 집합의 검사만 통과했음을 의미한다. Chrome DevTools의 Lighthouse 역시 접근성 감사에서 제목 관련 문제를 표시한다. "Heading elements are not in a sequentially-descending order" 경고를 확인한다.
수동 콘텐츠 검토 — 문서 개요: HeadingsMap(Chrome 및 Firefox용)과 같은 브라우저 확장 프로그램을 사용해 페이지의 모든 제목 요소에 대한 시각적 개요를 생성한다. 이 개요를 비판적으로 검토한다. 페이지의 콘텐츠 구조를 정확히 반영하는가? 모든 개별 섹션이 제목으로 표현되어 있는가? 페이지에 보이지만 개요에는 나타나지 않는 콘텐츠 섹션이 있는가? 그렇다면 해당 섹션은 제목이 누락된 것이며, 페이지는 2.4.10을 위반한다.
NVDA와 Firefox를 사용한 스크린 리더 탐색: Firefox에서 NVDA를 실행한 상태로 페이지를 연다. H를 눌러 제목 앞으로 이동하고, Shift+H로 뒤로 이동한다. 각 제목에 도달할 때마다, 발표되는 제목이 뒤따르는 콘텐츠를 정확히 설명하는지 확인한다. 또한 제목 아래에 있다고 한 번도 알려지지 않는 상당한 분량의 콘텐츠 블록이 있는지도 확인한다. NVDA의 요소 목록(NVDA+F7)을 열고, Headings 탭을 선택한 뒤 전체 제목 목록을 검토하여 누락되었거나 잘못 라벨링된 섹션을 찾는다.
VoiceOver와 Safari(macOS/iOS)를 사용한 스크린 리더 탐색: macOS에서 VoiceOver(Command+F5)를 활성화하고 Safari에서 페이지를 연다. VO+Command+H를 사용해 제목 간을 탐색한다. iOS에서는 로터를 사용해(두 손가락으로 회전 제스처를 사용해 Headings로 설정) 아래로 스와이프하여 제목을 따라 이동한다. 모든 콘텐츠 섹션이 제목 탐색을 통해 도달 가능한지 확인한다.
JAWS와 Chrome을 사용한 스크린 리더 탐색: JAWS에서 H를 눌러 제목을 순환하고, Insert+F6으로 제목 목록을 연다. 목록을 검토하여 완전성과 논리적 계층을 확인한다. 제목이 단지 스타일링 목적으로만 사용되지 않았는지, 실제 섹션 라벨만 제목으로 나타나는지 확인한다.
키보드 전용 탐색 점검: 키보드만 사용하여, 제목을 사용하지 않고 페이지의 모든 주요 섹션을 탐색해 본다. 각 섹션에 도달하기 위해 인터랙티브 요소를 몇 번이나 탭해야 하는지 기록한다. 이는 적절한 제목 구조가 없을 때 키보드 사용자에게 가해지는 부담을 가늠하게 해 준다.

수정 방법

스타일링된 텍스트만으로 라벨링된 섹션 — 잘못된 예

<div class='section'>
  <p class='section-title'>Product Specifications</p>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</div>

<div class='section'>
  <p class='section-title'>Customer Reviews</p>
  <p>This product exceeded my expectations.</p>
</div>

스타일링된 텍스트만으로 라벨링된 섹션 — 올바른 예

<!-- 의미론적 제목 요소를 사용하면 섹션을 스크린 리더로 탐색할 수 있다 -->
<section>
  <h2>Product Specifications</h2>
  <p>Screen size: 15.6 inches</p>
  <p>RAM: 16 GB</p>
</section>

<section>
  <h2>Customer Reviews</h2>
  <p>This product exceeded my expectations.</p>
</section>

스타일링 목적의 제목 수준 건너뛰기 — 잘못된 예

<h1>Annual Report 2024</h1>
<!-- h2와 h3를 건너뛰고, 시각적으로 더 작아 보이기 때문에 h4를 사용 -->
<h4>Financial Overview</h4>
<p>Revenue grew by 12% this year...</p>
<h4>Regional Performance</h4>
<p>The Istanbul region led growth...</p>

스타일링 목적의 제목 수준 건너뛰기 — 올바른 예

<h1>Annual Report 2024</h1>
<!-- 주요 섹션에는 h2를 사용하고, 시각적 크기는 CSS로 제어한다 -->
<h2>Financial Overview</h2>
<p>Revenue grew by 12% this year...</p>
<h2>Regional Performance</h2>
<p>The Istanbul region led growth...</p>

주요 페이지 섹션에 제목이 없는 경우 — 잘못된 예

<main>
  <h1>Contact Us</h1>
  <form>
    <label for='name'>Name</label>
    <input type='text' id='name' name='name'>
    <label for='message'>Message</label>
    <textarea id='message' name='message'></textarea>
    <button type='submit'>Send</button>
  </form>
  <!-- 이 사무실 위치 섹션에는 제목이 없다 -->
  <div>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </div>
</main>

주요 페이지 섹션에 제목이 없는 경우 — 올바른 예

<main>
  <h1>Contact Us</h1>
  <section>
    <h2>Send Us a Message</h2>
    <form>
      <label for='name'>Name</label>
      <input type='text' id='name' name='name'>
      <label for='message'>Message</label>
      <textarea id='message' name='message'></textarea>
      <button type='submit'>Send</button>
    </form>
  </section>
  <!-- 사무실 위치 섹션에 이제 설명적인 제목이 있다 -->
  <section>
    <h2>Our Offices</h2>
    <p>Istanbul Office: Levent Mah. No:5</p>
    <p>Ankara Office: Kızılay Mah. No:12</p>
  </section>
</main>

aria-level 없이 ARIA heading role 사용 — 잘못된 예

<!-- aria-level 없이 role=heading을 사용하면 기본 수준 2로 처리되며, 이는 잘못일 수 있다 -->
<div role='heading'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

aria-level 없이 ARIA heading role 사용 — 올바른 예

<!-- 기본 HTML이 강력히 선호되며, ARIA를 사용할 경우 aria-level을 명시해야 한다 -->
<!-- 선호되는 방식: -->
<h2>Shipping Policy</h2>
<p>Orders are shipped within 2 business days...</p>

<!-- 기본 제목을 사용할 수 없을 때 허용되는 방식: -->
<div role='heading' aria-level='2'>Shipping Policy</div>
<p>Orders are shipped within 2 business days...</p>

자주 발생하는 실수

<p>나 <div> 요소에 실제 <h1>–<h6> 요소 대신 .title이나 .section-header 같은 CSS 클래스를 사용하는 경우: 시각적 스타일링만으로는 보조 기술에 구조를 전달할 수 없다. 제목은 실제 제목 요소이거나, 명시적인 수준을 가진 유효한 ARIA heading role을 가져야 한다.
문서 계층이 아니라 글꼴 크기를 기준으로 제목 수준을 선택하는 경우: 논리적으로는 <h2>여야 하는데, 원하는 시각적 크기로 렌더링된다는 이유로 <h4>를 선택하면 문서 개요가 깨지고, 스크린 리더 사용자는 앞에 level 2나 3이 없는데도 "heading level 4"를 듣게 되어 혼란을 겪는다.
시각적으로 크기를 줄이기 위해 <h1>에 font-size나 font-weight 재정의를 적용하는 경우: 이는 시각적 계층과 의미론적 계층 간의 불일치를 만든다. 크기 제어는 CSS로 하고, 구조 전달은 기본 제목 수준으로 해야 한다.
동적으로 로드되는 콘텐츠 섹션(예: 탭 패널, 모달 대화 상자, AJAX 로드 결과)에 제목을 생략하는 경우: 페이지에 새 콘텐츠가 주입될 때 종종 제목 구조가 없다. 동적으로 렌더링되는 각 섹션에는 적절한 제목이 포함되어야 하며, 그렇지 않으면 제목으로 탐색하는 사용자가 라벨 없는 콘텐츠 섬에 고립될 수 있다.
페이지 제목으로만 <h1> 하나를 사용하고, 다섯 개 이상의 뚜렷한 콘텐츠 섹션이 있는 페이지에 추가 제목을 두지 않는 경우: <h1>의 존재는 자동 검사에서는 통과로 처리되지만, 이후 주요 섹션이 라벨링되지 않았다면 2.4.10을 충족하지 못한다.
<button>이나 <a> 요소 안에 제목을 중첩하는 경우: 인터랙티브 요소 안에 제목을 두면 보조 기술에 상충하는 역할을 만들고, HTML 유효성에도 어긋난다. 제목은 콘텐츠 섹션을 라벨링해야 하며, 인터랙티브 컨트롤을 라벨링하는 데 사용되어서는 안 된다.
aria-level을 지정하지 않고 role='heading'만 사용하는 경우: ARIA의 기본 암시 수준은 2이며, 이는 의도한 문서 구조와 일치하지 않을 수 있고, 섹션이 다른 수준에 있어야 할 때도 조용히 잘못된 개요를 만들어 낸다.
장식적이거나 반복적인 제목을 추가하는 경우 — 예: 페이지 제목을 각 콘텐츠 카드 안에서 <h2>로 반복하는 것처럼, 의미 있는 탐색 가치 없이 제목 소음을 만드는 경우: 제목은 도입하는 섹션을 고유하고 정확하게 설명해야 한다. 중복된 제목은 스크린 리더 사용자의 제목 탐색 효용을 떨어뜨린다.
스크린 리더 전용 구조를 제공하려는 의도로 display:none이나 visibility:hidden으로 제목을 시각적으로 숨기는 경우: 이 CSS 속성은 요소를 보조 기술에서도 숨긴다. 제목이 접근성 트리에는 존재하지만 화면에는 보이지 않게 해야 할 경우, 표준 시각적 숨김 기법(position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0);)을 사용해야 한다.
페이지 콘텐츠가 재설계 과정에서 재구성될 때 제목 구조를 업데이트하지 않는 경우: 초기 개발 시 추가된 제목은 콘텐츠 섹션이 재배치, 병합, 교체될 때 종종 그대로 남아 낡아진다. 제목 감사는 일회성 접근성 수정이 아니라, 모든 콘텐츠 또는 디자인 검토 주기의 일부가 되어야 한다.

터키 접근성 규정과의 관계

터키의 대통령령 2025/10은 2025년 6월 21일 관보 제32933호에 게재되었으며, 터키에서 운영되는 광범위한 주체에 대한 포괄적인 디지털 접근성 의무를 수립한다. 이 대통령령은 디지털 접근성 준수의 기술 표준으로 WCAG 2.2와 정합성을 이루며, 공공 기관, 전자상거래 플랫폼, 은행 및 금융 기관, 병원 및 의료 서비스 제공자, 가입자 200,000명 이상인 통신 회사, 여행사, 민간 운송 회사, 그리고 교육부(MoNE)의 인가를 받은 사립 학교에 적용된다.

WCAG 2.4.10 — Section Headings는 Level AAA 기준이다. 이는 대통령령이 적용 대상 기관에 대해 Level A와 AA 수준의 적합성을 요구하는 최소 법적 기준에는 포함되지 않는다는 의미이다. 그러나 대통령령의 보다 넓은 취지는 모든 사용자에게 의미 있는 디지털 접근을 보장하는 것이며, 2.4.10과 같은 Level AAA 기준은 최고 수준의 접근성 모범 사례로 명시적으로 인정된다.

특히 공공 기관, 은행, 병원, 대형 통신 사업자와 같은 적용 대상 기관의 경우, WCAG 2.4.10을 구현하는 것은 규제 최소 기준을 넘어선 접근성에 대한 의지를 보여준다. 실제로 잘 구조화된 제목 계층은 여러 AA 수준 성공 기준(예: 1.3.1 Info and Relationships, 2.4.6 Headings and Labels)을 충족하기 위한 전제 조건이기도 하므로, 완전한 AA 적합성을 목표로 하는 조직은 자연스럽게 그 과정에서 2.4.10 준수에 근접하게 된다.

장애인 대상 특화 서비스나, 고령자, 인지 장애 사용자, 보조 기술 사용자 등 다양한 시민을 대상으로 하는 공공 기관의 디지털 서비스는 2.4.10의 완전한 구현으로 특히 큰 혜택을 얻을 수 있다. 터키에서 디지털 정부 서비스(e-devlet)에 대한 관심이 커지고 전자상거래가 확대되는 상황에서, 견고한 콘텐츠 구조는 접근성 요구 사항일 뿐 아니라 사용성과 법적 리스크 관리 측면에서도 우선순위가 된다.

터키에서 WCAG 2.2 Level AAA — 여기에는 2.4.10도 포함된다 — 수준으로 자발적으로 인증을 받는 조직은 접근성 선도자로 자리매김하며, 이는 브랜드 신뢰를 높이고, 소송 리스크를 줄이며, 터키 통계청(TÜİK)이 발표한 약 850만 명의 장애인 인구를 포함하는 잠재 고객층을 넓히는 효과를 가진다.