브라우저 안에서만 계산

제목 구조 시각화·검토 도우미

붙여 넣은 HTML에서 제목 순서, 빈 제목, role=heading의 aria-level 문제를 실행 없이 추출합니다.

무엇을 결정할 수 있나요?

웹페이지의 제목 구조(<h1>~<h6>)는 시각장애인이 스크린리더를 켜고 웹사이트에 접속했을 때 전체 콘텐츠의 지도이자 목차 역할을 수행하는 가장 중요한 시맨틱 뼈대입니다. 화면 전체를 한눈에 볼 수 없는 시각장애인은 웹페이지 상단부터 본문 끝까지 모든 문장을 읽지 않고, 스크린리더의 헤딩 탐색 단축키(H 키)나 숫자 키(1~6)를 연속으로 눌러 소제목들을 먼저 훑어본 뒤 원하는 섹션으로 즉시 이동합니다.

본 도구는 입력된 HTML 코드에서 헤딩 태그들의 계층 관계를 파싱하여, 최상위 <h1> 선언 여부, 빈 제목 태그 존재 여부, 그리고 헤딩 레벨 건너뜀(Skipped Heading Level, 예: h1 다음 곧바로 h3 선언) 결함을 실시간으로 분석합니다.

또한 시각적인 폰트 크기(CSS font-size)와 문서의 시맨틱 계층(HTML Semantic Level)의 불일치를 바로잡을 수 있도록, W3C 접근성 표준에 부합하는 올바른 아웃라인 재배치 가이드를 제공합니다.

이 페이지의 고유 질문: 제목 단계 건너뜀과 H1 개수를 자동 WCAG 실패로 단정하지 않고 무엇을 확인해야 하는가?

로컬 계산 도구

값을 입력해 검사하기

입력값은 브라우저 상태에서만 처리하며 서버·URL·Analytics로 보내거나 저장하지 않습니다.

자동으로 확인하는 범위

H1~H6와 role=heading 목록
빈 제목과 유효하지 않은 aria-level
단계 건너뜀 potential issue
script 실행 및 외부 리소스 요청 없이 안전한 파싱

입력값과 단위

HTML 코드: 최대 허용 길이 안의 정적 HTML 조각. URL 크롤링은 지원하지 않음
숨김 요소 포함: CSS 실제 렌더링을 알 수 없어 분석 정책만 선택

판정할 때 지키는 원칙

role=heading에 유효한 aria-level이 없으면 지원 범위의 명확한 오류로 표시합니다.
H1이 없거나 여러 개인 사실만으로 WCAG 실패를 확정하지 않습니다.
단계가 순서대로여도 제목 문구의 적절성은 manual_review입니다.

자체 검증 도식

자체 검증 도식: H1 바로 뒤에 H3이 오는 단계 건너뜀은 WCAG 1.3.1 정보 관계 관점에서 잠재 문제(potential_issue)로 안내되며, H2를 거치는 논리적 계층 구조로 정리해야 합니다.

수정 전·후 예제

제목 단계 연결

검토 신호

<h1>주문 안내</h1>
<h3>배송</h3>

관계를 반영한 예

<h1>주문 안내</h1>
<h2>배송</h2>

H1에서 H3로 건너뛴 사실은 수정 후보지만, 실제 문서 구조를 함께 확인합니다.

ARIA 제목 레벨

레벨 누락

<div role="heading">배송</div>

네이티브 제목 우선

<h2>배송</h2>

네이티브 요소를 사용할 수 없다면 role과 유효한 aria-level을 함께 제공해야 합니다.

실무 판단 가이드

H1 하나 규칙은 WCAG 규정일까?

먼저 바로잡을 통념

H1이 둘이면 무조건 WCAG 실패이고 H1이 하나면 제목 구조가 적합하다.

제목 요소는 정보 구조와 탐색을 드러내는 수단입니다. H1 개수만으로 전체 성공 기준 결과를 자동 확정하지 않습니다.

단계 건너뜀은 유지보수와 탐색의 잠재 문제로 유용하지만, 실제 내용 관계와 제목 문구의 적절성을 함께 봐야 합니다.

판단 순서

DOM 순서의 제목 목록을 만든다.
빈 제목과 잘못된 role/aria-level을 먼저 수정한다.
단계 건너뜀을 정보 관계와 대조한다.
각 제목이 이어지는 내용을 설명하는지 읽는다.
동적 상태 이후 구조를 다시 확인한다.

실패했을 때 복구

CSS 클래스는 유지하고 의미 요소만 바꿀 수 있는지 확인합니다.
재사용 컴포넌트가 레벨을 고정한다면 headingLevel prop처럼 문맥을 전달합니다.
화면낭독기 제목 탐색 표본으로 순서를 재검사합니다.

회귀 테스트와 검수 증거

아래 fixture는 실제 고객 사례가 아니라 판정 로직이 같은 입력에 같은 결과를 내는지 확인하는 공개 회귀 자료입니다. 현장 사용 경험으로 과장하지 않습니다.

제목 구조 시각화·검토 도우미 회귀 입력과 기대 결과
Fixture ID	입력	기대 결과
`heading-ordered`	<h1>주문 안내</h1><h2>배송</h2><h3>제주 추가 배송비</h3>	구조 경고 없음
`heading-skip`	<h1>주문 안내</h1><h3>배송</h3>	potential_issue
`heading-role-missing-level`	<div role="heading">배송</div>	aria-level 누락 fail

자동 판정의 한계

CSS로만 크게 보이는 텍스트의 제목 역할
동적 상태 이후 DOM, Shadow DOM, iframe
숨김 방식의 보조기술 처리
제목 문구와 실제 내용의 의미 관계

반드시 남는 수동 확인

각 제목이 이어지는 내용을 설명하는가?
페이지의 주요 제목을 쉽게 찾을 수 있는가?
CSS 크기와 의미 구조가 충돌하지 않는가?
클라이언트 렌더링 뒤 구조도 같은가?

공식 상세 근거

로직 버전 html-analysis-1.0.0 · 공개 검수일 2026-08-04 · 검수 책임 서호영 (운영·콘텐츠 검토 책임)

이번 공개 검수 범위

정적 HTML 제목 추출·비실행 격리와 WCAG 의미 판단 경계 대조

테스트 증거: HTML 안전 파서·제목 순서·잘못된 aria-level 단위 테스트 및 Playwright 흐름
콘텐츠 검토: H1 개수 통념과 제목 단계 판단 절차를 도구 본문에 통합
미검사·한계: 동적 DOM·Shadow DOM 미검사
미검사·한계: 제목 문구의 의미 적절성은 수동 확인

자주 묻는 질문

H1 태그는 한 페이지에 반드시 하나만 있어야 하나요?

HTML5 표준과 W3C 접근성 지침에 따르면 한 페이지에 H1이 2개 이상 존재하더라도 문서의 논리적 섹션 구조가 명확하다면 웹 표준 위반이 아닙니다. 그러나 스크린리더 사용자에게 페이지의 핵심 주제를 가장 직관적으로 전달하기 위해 페이지당 1개의 메인 H1을 최상단에 배치하는 것이 강력한 실무 권장사항입니다.

H1 다음 바로 H3 태그를 쓰면 왜 접근성에 문제가 되나요?

스크린리더가 1레벨 제목 직후 3레벨 제목을 낭독하면, 시각장애인 사용자는 자신이 중간의 2레벨 상위 주제 섹션을 실수로 놓쳤거나 페이지 정보가 누락되었다고 인지하여 큰 혼란에 빠집니다. 헤딩 레벨은 계층적으로 순차 하강해야 합니다.

글자 크기가 크면 <div> 태그를 제목으로 써도 되나요?

절대 안 됩니다. 시각적인 CSS 폰트 크기는 스크린리더에게 아무런 의미 정보를 전달하지 못합니다. 스크린리더가 제목으로 인식할 수 있도록 반드시 네이티브 <h> 태그를 사용하거나 role='heading'과 aria-level 속성을 부여해야 합니다.

제목 태그 안에 아이콘 SVG나 링크가 들어가도 되나요?

네, 가능합니다. <h2><a href='...'>기사 제목</a></h2> 형태로 링크를 헤딩 내부에 감싸는 것은 널리 쓰이는 표준 패턴입니다. 단, 헤딩 태그 내부에 의미 없는 빈 텍스트나 장식용 아이콘만 들어가 스크린리더가 '빈 제목'으로 낭독하지 않도록 주의해야 합니다.