WCAG 제목 검사기

WCAG 2.2 1.3.1 기준에 따라 제목 계층 구조를 검증하기 위해 HTML을 붙여넣으세요. 건너뛴 수준, 누락된 h1, 중복된 h1 및 빈 제목을 식별합니다.

결과

HTML을 붙여넣고 « 제목 확인 »을 클릭하세요.

📚 과학적 기반 및 출처

이 도구가 설계된 대상

올바른 제목 구조는 스크린 리더 사용자와 탐색 및 이해를 위해 문서 구조에 의존하는 인지 장애가 있는 사람들에게 필수적입니다. WebAIM Screen Reader User Surveys는 제목 탐색이 스크린 리더 사용자가 사용하는 가장 일반적이고 가치 있는 전략 중 하나임을 일관되게 발견합니다. 인지 및 학습 장애가 있는 사람들도 명확한 계층 구조의 이점을 누리며, 제목은 인지 부하를 줄이는 콘텐츠 개요를 제공합니다(W3C Cognitive Accessibility Guidance). WHO의 장애인을 위한 건강 형평성 글로벌 보고서(2023)는 13억 명의 사람들 — 세계 인구의 약 16% — 이 상당한 장애를 가지고 살고 있다고 추정하며, 이 중 많은 사람들이 의미적 제목 구조에 의존하는 보조 기술을 사용합니다.

WCAG 2.2 요구사항

  • SC 1.3.1 (정보 및 관계, 수준 A): 시각적으로 전달되는 정보, 구조 및 관계는 프로그래밍 방식으로 결정될 수 있어야 합니다.
  • SC 2.4.1 (블록 우회, 수준 A): 제목을 사용하면 사용자가 섹션 사이를 탐색할 수 있어 우회 메커니즘 역할을 합니다.
  • SC 2.4.6 (제목 및 라벨, 수준 AA): 제목은 도입하는 콘텐츠의 주제 또는 목적을 설명합니다.
  • SC 2.4.10 (섹션 헤더, 수준 AAA): 섹션 헤더는 콘텐츠를 구성하는 데 사용됩니다.

과학적 참고 문헌

  • WebAIM (2024). « Screen Reader User Survey #10 Results. » webaim.org · 제목 탐색이 스크린 리더 사용자가 페이지 구조를 이해하고 콘텐츠를 찾기 위해 사용하는 주요 전략 중 하나라는 것을 일관되게 발견합니다.
  • Power, C., Freire, A., Petrie, H. & Swallow, D. (2012). « Guidelines are only half of the story. » CHI ’12, ACM. · 제목 구조 문제가 시각 장애 사용자가 가장 자주 만나는 장벽 중 하나라는 것을 발견했습니다.
  • W3C Web Accessibility Initiative (2023). « Page Structure: Headings Tutorial. » w3.org/WAI · 페이지당 단일 h1 및 순차적 중첩을 포함한 제목 계층 구조 모범 사례를 정의합니다.
  • WebAIM. « Semantic Structure: Using Headings. » webaim.org · 제목 구조가 스크린 리더 탐색과 시각적 스캔을 모두 지원하는 방법에 대한 조언.
  • Deque Systems. « heading-order (axe-core 규칙). » · 자동 검사: 제목 수준은 유효한 문서 개요를 보장하기 위해 한 번에 하나씩만 증가해야 합니다.
  • 세계보건기구(2023). Global Report on Health Equity for Persons with Disabilities. · 13억 명(세계 인구의 16%)이 상당한 장애를 가지고 살고 있다고 추정합니다.

면책 조항

이 도구는 제목의 계층 구조만 확인합니다. 색상 대비, 키보드 접근성 또는 ARIA 사용과 같은 WCAG 2.2 준수의 다른 측면은 평가하지 않습니다. 유효한 제목 계층 구조는 접근성에 필요하지만 충분하지 않은 조건입니다. 완전한 WCAG 2.2 준수를 위해 보조 기술과의 수동 테스트와 함께 완전한 감사 도구(axe, WAVE, Lighthouse)를 사용하세요.

참고: 이 도구는 제목의 계층 구조만 확인합니다. 완전한 WCAG 2.2 준수를 위해서는 수동 테스트와 함께 완전한 감사 도구를 사용하세요.

관련 도구

접근성 리소스 화면 리더 미리보기 색상 대비 검사기 접근 가능한 색상 팔레트 생성기