Main 랜드마크
main 랜드마크는 페이지의 주요(primary) 콘텐트를 식별합니다.
ARIA 1.2 명세: main 랜드마크
디자인 패턴
- 각 페이지는 하나의
main랜드마크를 가져야 합니다. main랜드마크는 최상위 랜드마크여야 합니다.- 페이지가 중첩된
document와/또는application역할(roles)을 포함하는 경우 (예를 들어 일반적으로iframe과frame엘리먼트의 사용을 통해), 각document나application역할(role)은 하나의main랜드마크를 가질 수 있습니다. - 페이지가 둘 이상의
main랜드마크를 포함하는 경우, 각각은 고유한 레이블을 가져야 합니다.
main 랜드마크를 지정하도록 HTML main 엘리먼트를 사용하세요.
HTML 예: 한 개 Main 랜드마크
페이지에 하나의 main 랜드마크만 있다면, 레이블은 선택사항입니다.
<main>
<h1>주요 콘텐트에 대한 제목<h1>
.... 주요 콘텐트 영역 ....
</main>
<h1>주요 콘텐트에 대한 제목<h1>
.... 주요 콘텐트 영역 ....
</main>
HTML 예: 여러 Main 랜드마크
페이지에 둘 이상의 main 랜드마크가 있다면, 각각은 고유한 레이블을 가져야 합니다.
<main aria-labelledby="title1">
<h1 id="title1">주요 콘텐트 영역 1에 대한 제목<h1>
.... 주요 콘텐트 영역 1 ....
</main>
....
<main aria-labelledby="title2">
<h1 id="title2">주요 콘텐트 영역 2에 대한 제목<h1>
.... 주요 콘텐트 영역 2 ....
</main>
<h1 id="title1">주요 콘텐트 영역 1에 대한 제목<h1>
.... 주요 콘텐트 영역 1 ....
</main>
....
<main aria-labelledby="title2">
<h1 id="title2">주요 콘텐트 영역 2에 대한 제목<h1>
.... 주요 콘텐트 영역 2 ....
</main>
main 랜드마크를 지정하도록 role="main" 어트리뷰트가 사용됩니다.
ARIA 예: 한 개 Main 랜드마크
페이지에 오직 하나의 main 랜드마크만 존재한다면, 레이블은 선택사항 입니다.
<div role="main">
<h1>주요 콘텐트에 대한 제목<h1>
.... 주요 콘텐트 영역 ....
</div>
<h1>주요 콘텐트에 대한 제목<h1>
.... 주요 콘텐트 영역 ....
</div>
ARIA 예: 여러 Main 랜드마크
페이지에 둘 이상의 main 랜드마크가 있다면, 각각은 고유한 레이블을 가져야 합니다.
<div role="main" aria-labelledby="title1">
<h1 id="title1">주요 콘텐트 영역 1에 대한 제목<h1>
.... 주요 콘텐트 영역 1 ....
</div>
....
<div role="main" aria-labelledby="title2">
<h1 id="title2">주요 콘텐트 영역 2에 대한 제목<h1>
.... 주요 콘텐트 영역 2 ....
</div>
<h1 id="title1">주요 콘텐트 영역 1에 대한 제목<h1>
.... 주요 콘텐트 영역 1 ....
</div>
....
<div role="main" aria-labelledby="title2">
<h1 id="title2">주요 콘텐트 영역 2에 대한 제목<h1>
.... 주요 콘텐트 영역 2 ....
</div>