제목 제공 검사 방법

어떤 기준에 해당하나요

한국 기준 (KWCAG 2.2)

6.4.2 제목 제공

운용의 용이성

국제 기준 (WCAG 2.2)

2.4.2 페이지 제목 (A) ↗

어떻게 검사하나요

페이지 <title>이 페이지 내용을 구체적으로 설명하는지(사이트 전체가 동일 제목이면 위반), iframe에 title 속성이 있는지, 콘텐츠 블록에 적절한 제목(heading)이 있는지 확인하세요.

자동 검사로 잡히는 부분

이 항목은 8개 규칙으로 자동 판정합니다. 각 규칙에 위반 시 개선 방법이 붙어 있습니다.

• 굵은 p 요소를 제목처럼 사용하고 있습니다 p-as-heading

  볼드·큰 글씨 <p>는 시각적으로만 제목입니다. 스크린 리더 사용자가 제목 단위로 탐색할 수 있도록 <h2>~<h6> 요소를 사용하세요.

  <!-- 잘못된 예 -->
  <p style="font-weight:bold;font-size:20px">서비스 안내</p>
  <!-- 올바른 예 -->
  <h2>서비스 안내</h2>

• 문서에 title이 없습니다 document-title

  <title>은 스크린 리더가 페이지 진입 시 가장 먼저 읽는 정보이며 탭 전환·북마크에서 페이지를 식별하는 수단입니다. 페이지 내용을 구체적으로 설명하는 고유한 제목을 제공하세요.

  <title>검사 결과 보고서 - A11y Check</title>

• iframe에 title이 없습니다 frame-title

  스크린 리더는 title 없는 iframe을 "프레임"이라고만 읽어 내용물을 알 수 없습니다.

  <iframe src="map.html" title="오시는 길 지도"></iframe>

• iframe title이 중복됩니다 frame-title-unique

  한 페이지에 같은 title의 iframe이 여러 개면 구별할 수 없습니다. 각 프레임의 내용을 반영한 고유한 title을 지정하세요.

• 제목 레벨이 건너뛰어졌습니다 heading-order

  h1 다음에 h3가 오는 식으로 레벨을 건너뛰면 스크린 리더 사용자가 문서 구조를 파악하기 어렵습니다. 제목은 계층 순서대로(h1→h2→h3) 사용하고, 크기는 CSS로 조정하세요.

• 제목 요소가 비어 있습니다 empty-heading

  빈 제목은 스크린 리더의 제목 탐색을 방해합니다. 텍스트를 채우거나 요소를 제거하세요.

• 페이지에 h1 제목이 없습니다 page-has-heading-one

  h1은 페이지의 주제를 알려주는 최상위 제목입니다. 페이지마다 내용을 대표하는 h1을 하나 제공하세요.

• 여러 페이지의 제목이 모두 동일합니다 a11ychk:page-title-unique

  표본으로 검사한 여러 페이지의 <title>이 전부 같습니다. 각 페이지는 내용을 구분할 수 있는 고유한 제목을 가져야 합니다(예: "회사소개 - OO대학교", "입학안내 - OO대학교"). 스크린 리더·탭·북마크에서 페이지를 식별하는 핵심 정보입니다.