Complementary 랜드마크
complementary 랜드마크는 문서의 지원(supporting) 섹션으로, DOM 계층상 유사한 수준에서 주 콘텐츠를 보완하도록 설계되었으며 주 콘텐츠로부터 분리되는 경우에도 여전히 유의미합니다.
ARIA 1.2 명세: complementary landmark
디자인 패턴
complementary랜드마크는 최상위 랜드마크여야 합니다. (예를 들어, 다른 랜드마크에 포함되지 않음).- complementary 콘텐츠가 주 콘텐츠와 관련이 없다면, 좀 더 일반적인 역할(role)이 할당되어야 합니다(예를 들어
region). - 페이지가 둘 이상의
complementary랜드마크를 포함한다면, 각각은 고유한 레이블을 가져야 합니다.
complementary 랜드마크를 지정하도록 HTML aside 엘리먼트를 사용하세요.
HTML 예: 페이지에 한 개 complementary 랜드마크
페이지에 오직 한 개의 complementary 랜드마크만 존재하는 경우, 레이블은 선택사항입니다.
<aside>
<h2>complementary 영역에 대한 제목<h2>
.... complementary 콘텐트 영역 ....
</aside>
<h2>complementary 영역에 대한 제목<h2>
.... complementary 콘텐트 영역 ....
</aside>
HTML 예: 여러 complementary 랜드마크
페이지에 둘 이상의 complementary 랜드마크가 있는 경우, 각각은 고유한 레이블을 가져야 합니다.
<aside aria-labelledby="comp1">
<h2 id="comp1">complementary 영역 1에 대한 제목</h2>
... complementary 콘텐트 영역 1 ...
</aside>
<aside aria-labelledby="comp2">
<h2 id="comp2">complementary 영역 2에 대한 제목</h2>
... complementary 콘텐트 영역 2 ...
</aside>
<h2 id="comp1">complementary 영역 1에 대한 제목</h2>
... complementary 콘텐트 영역 1 ...
</aside>
<aside aria-labelledby="comp2">
<h2 id="comp2">complementary 영역 2에 대한 제목</h2>
... complementary 콘텐트 영역 2 ...
</aside>
complementary 랜드마크를 지정하도록 role="complementary" 어트리뷰트가 사용됩니다.
ARIA 예: 페이지에 한 개 complementary 랜드마크
페이지에 오직 한 개의 complementary 랜드마크만 존재하는 경우, 레이블은 선택사항입니다.
<div role="complementary">
<h2>complementary 영역에 대한 제목<h2>
.... complementary 콘텐트 영역 ....
</div>
<h2>complementary 영역에 대한 제목<h2>
.... complementary 콘텐트 영역 ....
</div>
ARIA 예: 여러 complementary 랜드마크
페이지에 둘 이상의 complementary 랜드마크가 있는 경우, 각각은 고유한 레이블을 가져야 합니다.
<div role="complementary" aria-labelledby="comp1">
<h2 id="comp1">영역 1에 대한 제목</h2>
... complementary 콘텐트 영역 1 ...
</div>
<div role="complementary" aria-labelledby="comp2">
<h2 id="comp2">complementary 영역 2에 대한 제목</h2>
... complementary 콘텐트 영역 2 ...
</div>
<h2 id="comp1">영역 1에 대한 제목</h2>
... complementary 콘텐트 영역 1 ...
</div>
<div role="complementary" aria-labelledby="comp2">
<h2 id="comp2">complementary 영역 2에 대한 제목</h2>
... complementary 콘텐트 영역 2 ...
</div>