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의 접근성 통계 확장 프로그램과 같은 도구를 사용하여 페이지 구조를 시각화하고 랜드마크에 포함되지 않은 섹션을 포착할 수 있습니다.
명소를 효과적으로 사용하는 방법
<div>
또는<span>
와 같은 일반적인 요소에 의존하지 말고 랜드마크 요소를 사용하여 페이지의 주요 섹션을 정의하세요.- 랜드마크를 사용하여 페이지의 구조를 전달합니다.
예를 들어
<main>
요소는 페이지의 주요 아이디어와 직접적으로 관련된 모든 콘텐츠를 포함해야 하므로 페이지당 하나만 있어야 합니다. 각 랜드마크를 사용하는 방법을 알아보려면 MDN의 콘텐츠 섹션 요소 요약을 참고하세요. - 랜드마크를 현명하게 사용하세요. 랜드마크가 너무 많으면 보조 기술 사용자가 원하는 콘텐츠로 쉽게 건너뛰지 못하므로 실제로 탐색이 더 어려워질 수 있습니다.
자세한 내용은 제목 및 랜드마크 게시물을 참고하세요.