페이지 Landmark 구조 검사기

페이지 Landmark 구조 검사기 사용 가이드

화면 낭독기 사용자는 '랜드마크 목록'으로 머리말, 메뉴, 본문, 바닥글 사이를 한 번에 이동합니다. 랜드마크가 없거나 본문(main)이 여러 개면 이동 기능을 쓸 수 없습니다. 이 검사기는 HTML 요소와 role에서 랜드마크를 찾아 목록으로 보여 줍니다.

header·footer는 article·section 안에 있지 않을 때만 머리말(banner)·바닥글(contentinfo)로 보고, form·section은 이름(aria-label)이 있을 때만 랜드마크로 셉니다. main이 정확히 하나인지, banner·contentinfo가 하나인지 확인합니다.

nav·aside·section처럼 같은 종류가 여러 개면 aria-label로 '주 메뉴', '푸터 메뉴'처럼 구분해야 하는데, 이름이 겹치거나 없으면 알려 줍니다. 어느 랜드마크에도 속하지 않은 글은 랜드마크로 이동하는 사용자가 놓칠 수 있어 예시와 함께 표시합니다.

사용 방법

1. 1'검사할 HTML' 칸에 페이지 전체 HTML을 붙여 넣습니다.
2. 2'실행'을 누르면 랜드마크 종류별 개수와 목록이 나옵니다.
3. 3main이 하나가 아니면 본문을 <main> 하나로 감쌉니다.
4. 4여러 nav에 aria-label을 붙이고, 랜드마크 밖 내용을 알맞은 영역으로 옮깁니다.

<header>로고</header><nav aria-label="주 메뉴">…</nav><main><h1>도구 모음</h1></main>
<nav><a href="/terms">약관</a></nav><footer>회사 정보</footer>

랜드마크 5개 · main 1 · navigation 2 · banner 1 · contentinfo 1

△ 탐색(navigation) 랜드마크가 2개인데 이름이 겹치거나 없습니다 — aria-label("주 메뉴", "푸터 메뉴" 등)로 구분하세요

이럴 때 쓰면 좋아요

• 새 페이지 템플릿의 기본 구조를 점검할 때
• div로만 만든 오래된 레이아웃을 시맨틱 태그로 바꿀 때
• 메뉴가 여러 개인 페이지의 이름 구분을 확인할 때
• 웹 접근성 구조 항목을 자가 진단할 때

문제가 생겼을 때

활용 팁

• 랜드마크는 너무 많아도 이동이 번거로우니 꼭 필요한 영역만 표시하세요.
• 본문 바로가기 링크는 건너뛰기 링크 검사기로 함께 확인하세요.
• 제목(h1~h6) 구조는 콘텐츠 읽기 순서 분석기가 보여 줍니다.

자주 묻는 질문