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