탐색 기능을 개선하는 데 사용되는 HTML5 랜드마크 요소

main, nav, aside와 같은 HTML5 요소는 랜드마크 또는 스크린 리더 및 기타 보조 기술로 이동할 수 있는 페이지의 특정 영역의 역할을 합니다. 랜드마크 요소를 사용하면 보조 기술 사용자의 사이트 탐색 환경을 크게 개선할 수 있습니다. 데케 대학의 HTML 5 및 ARIA 랜드마크에서 자세히 알아보세요.

랜드마크를 수동으로 확인하는 방법

W3C의 랜드마크 요소 목록을 사용하여 페이지의 각 주요 섹션이 랜드마크 요소에 포함되어 있는지 확인합니다. 예를 들면 다음과 같습니다.

<header>
  <p>Put product name and logo here</p>
</header>
<nav>
  <ul>
    <li>Put navigation here</li>
  </ul>
</nav>
<main>
  <p>Put main content here</p>
</main>
<footer>
  <p>Put copyright info, supplemental links, etc. here</p>
</footer>

또한 Microsoft의 접근성 통계 확장 프로그램과 같은 도구를 사용하여 페이지 구조를 시각화하고 랜드마크에 포함되지 않은 섹션을 포착할 수 있습니다.

접근성 통계 확장 프로그램에서 랜드마크가 강조 표시된 web.dev의 스크린샷

명소를 효과적으로 사용하는 방법

  • <div> 또는 <span>와 같은 일반적인 요소에 의존하지 말고 랜드마크 요소를 사용하여 페이지의 주요 섹션을 정의하세요.
  • 랜드마크를 사용하여 페이지의 구조를 전달합니다. 예를 들어 <main> 요소는 페이지의 주요 아이디어와 직접적으로 관련된 모든 콘텐츠를 포함해야 하므로 페이지당 하나만 있어야 합니다. 각 랜드마크를 사용하는 방법을 알아보려면 MDN의 콘텐츠 섹션 요소 요약을 참고하세요.
  • 랜드마크를 현명하게 사용하세요. 랜드마크가 너무 많으면 보조 기술 사용자가 원하는 콘텐츠로 쉽게 건너뛰지 못하므로 실제로 탐색이 더 어려워질 수 있습니다.

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

자료