01DEFINITION
한 줄로 말하면
제목 태그는 글자 크기를 정하는 도구가 아니라 문서의 목차입니다. h2 다음에 h4 가 오는 식으로 단계를 건너뛰면 그 사이에 빠진 층이 있는 것으로 읽혀 문서 구조가 끊깁니다. 화면을 눈으로 볼 때는 아무 차이가 없어서 오래 남아 있기 쉽고, 스크린리더로 목차를 훑는 이용자와 문단을 발췌해 가는 AI 답변이 같은 자리에서 걸립니다. 크기가 문제라면 태그가 아니라 CSS 로 정합니다.
02RISK
없으면 무슨 일이 생기나
제목 태그는 글자 크기를 정하는 도구가 아니라 문서의 뼈대입니다. 기계는 h2 아래에 h3 이 온다는 것을 "이 소제목은 저 제목에 속한다"로 읽습니다. h2 다음에 h4 가 오면 사이의 h3 한 층이 비어 있는 것으로 처리되고, 그 아래 내용이 어디에 속하는지가 흐려집니다.
스크린리더 이용자는 목차 기능으로 페이지를 훑습니다. 문서 전체를 위에서 아래로 읽는 대신 제목만 넘겨 가며 원하는 곳으로 뛰는 방식입니다. 단계가 어긋나 있으면 그 목록이 실제 문서와 다른 모양이 되고, 어디를 지나쳤는지 알기 어려워집니다. 이 항목이 접근성 진단에도 같이 잡히는 이유입니다.
고치는 비용이 거의 없는데도 오래 남는 것이 이 결함의 특징입니다. 화면이 정확히 똑같이 보이기 때문에 누구도 이상하다고 말하지 않습니다. 대개 테마를 손보거나 편집기에서 제목 종류를 골라 쓰다가 생기고, 한번 생기면 그 템플릿을 쓰는 모든 페이지에 같은 모양으로 복제됩니다.
03CHECK IT YOURSELF
직접 확인하는 방법
아래는 저희를 거치지 않고 지금 해 보실 수 있는 방법입니다. 결과를 저희에게 보내실 필요도 없습니다.
-
01
문서에 쓰인 제목 태그를 순서대로 뽑아 본다
숫자만 늘어놓고 보면 건너뛴 자리가 바로 보입니다. 2 다음에 4 가 오는 지점이 있으면 그곳입니다.
$ curl -s https://example.com | grep -oE '<h[1-6][ >]' | grep -oE '[1-6]' | tr '\n' ' ' 1 2 3 3 2 4 4 ← 여섯 번째에서 2 다음에 4
-
02
h1 이 하나인지도 같이 본다
단계 건너뜀을 고치러 들어가면 대개 h1 문제도 같이 나옵니다. 문서의 제목은 하나여야 하는데, 로고와 본문 제목이 둘 다 h1 인 경우가 흔합니다.
$ curl -s https://example.com | grep -c '<h1' 2 ← 둘이면 어느 쪽이 문서 제목인지 정해야 합니다
-
03
브라우저 확장이나 검사 도구로 개요를 본다
문서 개요를 트리 모양으로 그려 주는 도구를 쓰면 빠진 층이 들여쓰기로 드러납니다. 크롬 확장 중에 접근성 검사 도구들이 대부분 이 기능을 갖고 있습니다.
04HOW TO FIX
고치는 방법
서버 환경에 따라 적을 자리가 다릅니다. 아래는 가장 흔한 구성 기준이고, 적용 전에 현재 설정을 백업하십시오.
이 항목의 조치는 사실상 이 한 줄입니다. h4 를 쓴 이유가 글자가 작아야 해서였다면 태그는 h3 으로 되돌리고 크기는 스타일에서 줄입니다. 화면은 그대로이고 문서 구조만 맞아집니다.
/* 태그는 h3 그대로 두고 크기만 조절한다 */
.sec-sub h3 { font-size: 1rem; font-weight: 600; } 문서 제목 자리입니다. 로고가 h1 을 쓰고 있다면 그것을 일반 텍스트나 이미지 대체텍스트로 바꾸고, 본문의 제목이 h1 을 갖게 하십시오. 목록 페이지에서는 목록의 이름이 그 자리입니다.
<header><a href="/"><img src="/logo.svg" alt="회사이름"></a></header> <main><h1>임플란트 진료 안내</h1> …
한 페이지만 고치면 다음 글에서 같은 모양이 다시 생깁니다. 문제가 나온 자리가 목록 템플릿인지 본문 템플릿인지 먼저 확인하고 그쪽을 고치십시오. 편집기로 쓴 본문이라면 제목 종류를 고르는 기준을 정해 두는 편이 낫습니다.
05FAQ
자주 묻는 질문
이것 때문에 검색 순위가 떨어지나요
- 떨어지지는 않습니다. 그래서 우리 진단도 심각도를 낮게 잡고 판정도 주의까지만 갑니다. 다만 발췌에서는 손해를 봅니다. 답변 상자와 AI 요약은 제목과 그 아래 단락을 한 덩어리로 떼어 가는데, 구조가 어긋나 있으면 어디까지가 한 덩어리인지 판단이 흐려집니다.
단계를 거꾸로 올라가는 것도 문제인가요
- 문제가 아닙니다. h3 다음에 h2 가 오는 것은 새 장이 시작되는 정상적인 모양입니다. 우리 판정도 내려갈 때 한 단계를 넘는 경우만 셉니다. 목차를 생각하시면 이해가 쉽습니다. 다음 장으로 넘어가는 것은 자연스럽고, 중간 절을 건너뛰고 소절로 들어가는 것이 어색한 것입니다.
편집기로 쓴 본문에서도 자주 생기나요
- 가장 흔한 발생 자리입니다. 편집기의 제목 목록에서 크기를 보고 고르기 때문입니다. 대책은 규칙을 정해 두는 것입니다. 본문 안에서는 소제목을 두 종류만 쓰기로 하고, 더 잘게 나눠야 하면 그때 세 번째 종류를 쓰는 식으로 정하면 실수가 거의 없어집니다.
제목이 아예 없는 페이지는 어떻게 판정되나요
- 판정하지 않습니다. 헤딩이 하나도 없으면 순서를 따질 대상이 없기 때문입니다. 다만 그 경우는 대개 다른 항목에서 잡힙니다. 소제목이 없는 페이지는 발췌할 조각이 없어서 질문형 헤딩 항목이 실패로 나옵니다.
RELATED
같이 보시면 좋은 항목
GET STARTED
내 사이트는
이 항목을 통과할까요
주소만 넣으시면 이 항목을 포함해 39가지를 판정해 점수와 실패 개수를 보여 드립니다. 로그인도, 소유 확인도 필요 없습니다 — 전부 밖에서 관찰만 하는 항목이기 때문입니다.