콘텐츠 읽기 순서 분석기

콘텐츠 읽기 순서 분석기 사용 가이드

화면 낭독기는 화면에 보이는 배치가 아니라 HTML 소스 순서대로 내용을 읽습니다. CSS로 순서를 바꾼 레이아웃은 보이는 순서와 들리는 순서가 달라 이해하기 어렵습니다. 이 분석기는 붙여 넣은 HTML의 제목 구조와 주요 요소의 소스 순서를 그대로 보여 줍니다.

제목 구조는 h1~h6과 role="heading"(aria-level 포함)을 들여쓴 개요로 보여 주고, h1이 없거나 여러 개인 경우, h1 다음에 h3이 오는 것처럼 단계를 건너뛴 경우, 내용이 빈 제목을 표시합니다. 화면 낭독기 사용자는 제목 목록으로 페이지를 훑기 때문에 제목 구조가 목차 역할을 합니다.

소스 순서 표에는 영역, 제목, 문단, 링크, 입력칸, 이미지, 표를 앞에서부터 최대 80개까지 나열합니다. 양수 tabindex와 order·row-reverse·absolute·grid 위치처럼 보이는 순서를 바꾸는 인라인 스타일은 소스와 화면 순서가 달라질 수 있는 지점으로 알려 줍니다.

사용 방법

1. 1'검사할 HTML' 칸에 페이지 HTML을 붙여 넣습니다.
2. 2'실행'을 누르면 제목 구조(개요)와 소스 읽기 순서가 나옵니다.
3. 3건너뛴 제목 단계와 빈 제목을 고쳐 개요가 목차처럼 읽히게 합니다.
4. 4화면 순서를 바꾼 스타일이 있으면 HTML 순서를 보이는 순서에 맞춥니다.

<main><h1>글 제목</h1><div style="display:grid"><aside style="order:2">관련 링크</aside>
<article><h3>본문</h3><p>첫 문단입니다.</p></article></div></main>

제목 2개(h1 1) · 읽기 순서 항목 5개

△ 제목 단계 건너뜀: "글 제목"(h1) 다음에 "본문"(h3)
△ 화면 배치를 바꾸는 인라인 스타일 1곳(order·reverse·absolute·grid 위치) — 보이는 순서와 소스 순서가 달라질 수 있습니다

이럴 때 쓰면 좋아요

• 블로그 글의 제목 단계(h2·h3)가 바른지 확인할 때
• CSS 그리드로 순서를 바꾼 레이아웃을 점검할 때
• 페이지에 h1이 여러 개인지 확인할 때
• 웹 접근성 제목·순서 항목을 자가 진단할 때

문제가 생겼을 때

활용 팁

• 페이지마다 주제를 나타내는 h1 하나, 그 아래 h2부터 차례로 쓰는 것이 기본입니다.
• 랜드마크 구조는 페이지 Landmark 구조 검사기로 함께 확인하세요.
• Word 문서의 제목 구조는 DOCX 문서 구조 분석기가 같은 방식으로 보여 줍니다.

자주 묻는 질문