웹접근성 체크랩

DOM 구조

H1 하나면 충분할까? 제목 구조를 DOM으로 점검하는 방법

DOM Accessibility Tree 상의 H1~H6 헤딩 계층구조 스키핑 문제와 시각적 스타일(CSS font-size)과 의미적 제목 레벨의 불일치 대처법을 분석합니다.

작성자 서호영 (기획·개발·콘텐츠 검토) · 발행 · 수정 · 읽기 7분

제목 계층 구조 단계 건너뜀 잠재 문제 비교H1 바로 아래 H3이 오는 단계 건너뜀은 구조 탐색상의 잠재 문제(potential_issue)를 유발하며, H1 아래 H2로 순차 배치하여 올바른 문서 개요를 구성해야 합니다.HTML 제목 개요(Heading Outline) 계층 구조 비교단계 건너뜀 구조 (잠재 문제)<h1> 메인 타이틀단계 건너뜀 (!)<h3> 하위 섹션 (건너뜀)상태: potential_issue (구조 검토 필요)화면낭독기 탐색 시 상위 그룹 부재로 혼선순차 계층 구조 (정상 개요)<h1> 메인 타이틀<h2> 주요 섹션<h3> 세부 항목PASS: 논리적 부모-자식 개요 트리 확립
자체 검증 도식: H1 바로 뒤에 H3이 오는 단계 건너뜀은 WCAG 1.3.1 정보 관계 관점에서 잠재 문제(potential_issue)로 안내되며, H2를 거치는 논리적 계층 구조로 정리해야 합니다.

실무 검증 기록

마크업 및 접근성 트리 대조

본 기록은 공개 fixture와 재현 조건을 기준으로 정리한 기술 설명입니다. 실제 브라우저·스크린리더 조합의 동작은 별도 수동 검토가 필요합니다.

접근성 기술 검증 상세 내역
검증 상태공개 fixture 및 공식 규격 대조 완료
검증 기준공개 fixture 및 재현 조건
검증 범위H1~H6 DOM 계층 구조 및 순차 건너뜀 검증 및 명시된 입력값에 한정
수동 확인실제 브라우저·키보드·스크린리더 환경에서 별도 확인 필요
fixture에서 확인한 기대 결과[실패 상태] H2 누락으로 구조가 잠재적으로 혼란스러움 ➔ [수정 목표] 의미에 맞는 H2 삽입 및 헤딩 목록 재검토

검증에 사용된 실제 픽스처 / 재현 조건

<h1> 다음 <h3> 최소 DOM
검증 범위 및 한계
  • 시각적으로만 크게 스타일링된 <p class="title"> 요소는 시맨틱 H 태그가 아니면 감지 불가
  • SPA 비동기 컴포넌트 마운트 전 초기 HTML 내 제목만 정적 검사

주장과 직결된 W3C 공식 규격

스크린리더(Screen Reader) 사용자는 페이지 구조를 빠르게 파악하기 위해 H 단축키(Heading Quick Navigation)를 사용하여 제목 요소 간을 이동합니다. 이때 DOM 계층구조상 h1 단일 배치 누락, h1에서 h3로의 계층 건너뛰기(Heading Level Skipping), 또는 div 태그에 시각적 큰 글씨만 적용한 구문은 접근성 탐색을 방해합니다. WCAG 2.2 성공 기준 1.3.1 (Info and Relationships)에 따른 논리적 DOM 헤딩 트리 구성법을 설명합니다.

DOM Accessibility Tree와 스크린리더 헤딩 탐색 메커니즘

보조공학기기는 HTML의 <h1>~<h6> 태그를 분석하여 문서의 개요(Outline) 구조를 생성합니다. NVDA, JAWS, VoiceOver 등의 스크린리더는 H 단축키로 헤딩 목록을 팝업 형태로 출력하거나 다음/이전 제목으로 직행합니다.

만약 <h1> 바로 다음에 <h3>가 배치되면 스크린리더 사용자는 <h2>에 해당하는 상위 섹션 정보가 누락되었다고 인지하게 되며 문서의 정보 위계 파악에 혼란을 겪게 됩니다.

시각적 글자 크기(CSS)와 의미적 HTML 헤딩의 분리

디자인상 소단원 제목이 시각적으로 크게 보이고 대단원 제목이 작게 표시되어야 하는 경우가 있습니다. 이때 시각적 스타일에 맞추어 <h3>에 font-size: 2rem을 주고 <h1>에 font-size: 1rem을 부여하는 것은 완전히 정당합니다.

중요한 것은 CSS font-size가 아니라 HTML 태그의 논리적 계층입니다. h1 -> h2 -> h3 순서의 계층구조를 유지하면서 CSS 클래스를 통해 시각적 디자인 스타일을 제어해야 합니다.

올바른 헤딩 계층 구성을 위한 검사 및 가이드

웹 페이지의 헤딩 아웃라인을 점검할 때 다음 검증 절차를 거칩니다.

  • 단일 H1 확인: 메인 콘텐츠 영역을 대표하는 <h1> 태그가 1개 존재하는지 확인합니다.
  • 순차적 계층 준수: <h1> 하위에 <h2>, <h2> 하위에 <h3> 구조로 단계를 건너뛰지 않고 순차 배치합니다.
  • Semantic Tag 활용: 단순 <div class='title'> 대신 헤딩 태그(<h1>~<h6>)를 사용하고 필요한 시각적 스타일은 CSS 클래스로 적용합니다.

흔한 마크업 안티패턴과 올바른 예방책

잘못된 마크업 패턴올바른 접근성 구현
<h1> 태그 다음 서브 섹션 제목으로 <h2>를 생략하고 <h3> 태그를 바로 사용하는 것DOM 계층 구조는 h1 -> h2 -> h3 순서로 논리적 단계를 지켜 구성합니다.
시각적으로 글씨가 크다는 이유만으로 <div> 요소에 font-size: 32px만 주고 제목 역할을 기대하는 것시각적 크기와 무관하게 정당한 <h2>~<h6> 헤딩 태그를 사용하고 CSS로 스타일을 부여합니다.

보조공학 낭독 및 브라우저 파싱 한계

  • HTML5 섹셔닝(article, section) 내부의 H1 다중 사용은 W3C 문서 아웃라인 알고리즘 미구현으로 스크린리더에서 혼선을 줄 수 있습니다.
  • 제목의 텍스트가 본문 콘텐츠의 맥락을 적절히 요약하고 있는지의 '의미적 타당성'은 인간 검토자의 판단이 필요합니다.

주요 공식 상세 규격

규격 검토 기준일 2026-08-11

작성 및 검토 책임 정보

  • 작성자: 서호영
  • 실제 수행 역할: 기획·개발·콘텐츠 검토
  • 최초 작성일:
  • 최종 수정일:
  • 검증 기준: 공개 fixture 및 재현 조건

네이티브 HTML, ARIA 명세, 브라우저 및 스크린리더 조합에 따라 실제 보조공학 동작은 차이가 발생할 수 있습니다. 오류를 발견하셨거나 검증 데이터에 보완이 필요한 경우 오류 제보 및 문의 또는 liebe2460@naver.com로 알려주시면 사실 확인 후 정정합니다.