브라우저 안에서만 계산
제목 구조 시각화·검토 도우미
붙여 넣은 HTML에서 제목 순서, 빈 제목, role=heading의 aria-level 문제를 실행 없이 추출합니다.
무엇을 결정할 수 있나요?
HTML 조각을 브라우저의 분리된 문서로 파싱하고 H1~H6 및 role=heading 후보를 DOM 순서대로 보여줍니다.
제목 단계 건너뜀과 H1 개수는 검토 신호로 사용합니다. 구조가 실제 내용을 설명하는지는 사람이 판단해야 합니다.
이 페이지의 고유 질문: 제목 단계 건너뜀과 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>주문 안내</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 크기와 의미 구조가 충돌하지 않는가?
- 클라이언트 렌더링 뒤 구조도 같은가?
공식 상세 근거
- WCAG 2.2 Success Criterion 1.3.1 — Info and Relationships
- WCAG 2.2 Success Criterion 2.4.6 — Headings and Labels
이번 공개 검수 범위
정적 HTML 제목 추출·비실행 격리와 WCAG 의미 판단 경계 대조
- 테스트 증거: HTML 안전 파서·제목 순서·잘못된 aria-level 단위 테스트 및 Playwright 흐름
- 콘텐츠 검토: H1 개수 통념과 제목 단계 판단 절차를 도구 본문에 통합
- 미검사·한계: 동적 DOM·Shadow DOM 미검사
- 미검사·한계: 제목 문구의 의미 적절성은 수동 확인
자주 묻는 질문
H1은 반드시 하나여야 하나요?
H1 개수만으로 WCAG 적합·부적합을 확정하지 않습니다. 문서의 주요 제목과 정보 관계가 명확한지 검토합니다.
단계 건너뜀은 무조건 실패인가요?
자동 실패가 아닌 잠재 문제(potential_issue)로 안내합니다. 실제 정보 계층 구조와 스크린리더 탐색 흐름을 직접 검토하세요.