제목 요소가 내림차순으로 정렬되어 있지 않음

Screen readers have commands to quickly jump between headings or to specific landmark regions. In fact, a survey of screen reader users found that they most often navigate an unfamiliar page by exploring the headings.

By using correct heading and landmark elements, you can dramatically improve the navigation experience on your site for users of assistive technologies.

Lighthouse 제목 레벨 감사가 실패하는 방법 #

Lighthouse는 제목이 하나 이상의 레벨을 건너뛰는 페이지에 플래그를 지정합니다.

예를 들어 페이지 제목으로 <h1> 요소를 사용한 다음 페이지의 주요 섹션에 대해 <h3> 요소를 사용하면 <h2> 레벨을 건너뛰기 때문에 감사에 실패합니다.

<h1>Page title</h1>
  <h3>Section heading 1</h3>
  …
  <h3>Section heading 2</h3>
  …

잘못 구성된 제목을 수정하는 방법 #

• 모든 제목 요소가 콘텐츠의 구조를 반영하는 논리적인 숫자 순서를 따르도록 합니다.
• 제목 텍스트가 관련 섹션의 내용을 명확하게 전달하는지 확인하세요.

예시:

<h1>Page title</h1>
<section>
  <h2>Section Heading</h2>
  …
    <h3>Sub-section Heading</h3>
</section>

제목 구조를 확인하는 한 가지 방법은 "누군가 제목만 사용하여 내 페이지의 개요를 만들었다면 말이 될까요?"라고 묻는 것입니다.

또한 Microsoft의 Accessibility Insights 확장과 같은 도구를 사용하여 페이지 구조를 시각화하고 잘못된 제목 요소를 잡을 수 있습니다.

자세한 내용은 제목 및 랜드마크 게시물을 참조하세요.

자원 #

• 제목 건너뛰기 레벨 감사를 위한 소스 코드
• 제목 레벨은 1만 증가해야 합니다(Deque University).