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

main, nav, aside와 같은 HTML5 요소는 랜드마크 또는 스크린 리더와 기타 보조 기술이 점프할 수 있는 페이지의 특수 영역으로 작동합니다. 랜드마크 요소를 사용하면 보조 기술 사용자를 위해 사이트의 탐색 환경을 크게 개선할 수 있습니다. Deque University의 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의 콘텐츠 섹션 요소 요약을 참고하세요.
  • 랜드마크는 신중하게 사용합니다. 랜드마크가 너무 많으면 보조 기술 사용자가 원하는 콘텐츠로 쉽게 건너뛰지 못하게 되어 탐색이 더욱 어려워질 수 있습니다.

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

리소스