Region 랜드마크
region 랜드마크는 저자 지정 목적과 사용자가 쉽게 섹션을 탐색하고 페이지 요약에 나열되기를 원할 수 있을 만큼 충분한 것과 관련된 콘텐트를 포함하는 인식 가능한 섹션입니다.
ARIA 1.2 명세: region 랜드마크
디자인 패턴
region랜드마크는 레이블을 가져야(must) 합니다.- 페이지가 둘 이상의
region랜드마크를 포함한다면, 각각은 고유한 레이블을 가져야 합니다. region랜드마크는 기명 랜드마크로는 적절하게 설명할 수 없는 콘텐트를 식별하는데 사용될 수 있습니다.
region 랜드마크를 지정하도록 HTML section 엘리먼트를 사용하세요.
HTML 예: section[aria-labelledby] 어트리뷰트 사용
페이지에 존재하는 콘텐트를 사용하여 각 영역에 대해 레이블을 지정하세요.
<main>
<h1>메인 콘텐트 영역에 대한 제목<h1>
<section aria-labelledby="region1">
<h2 id="region1">영역 1에 대한 제목</h2>
... 영역 1에 대한 콘텐트 ...
</section>
<section aria-labelledby="region2">
<h2 id="region2">영역 2에 대한 제목</h2>
... 영역 2에 대한 콘텐트 ...
</section>
</main>
<h1>메인 콘텐트 영역에 대한 제목<h1>
<section aria-labelledby="region1">
<h2 id="region1">영역 1에 대한 제목</h2>
... 영역 1에 대한 콘텐트 ...
</section>
<section aria-labelledby="region2">
<h2 id="region2">영역 2에 대한 제목</h2>
... 영역 2에 대한 콘텐트 ...
</section>
</main>
HTML 예: section[aria-label] 어트리뷰트 사용
보조 기술에만 보이는 어트리뷰트 값을 사용하여 각 영역에 대한 레이블을 지정하세요.
<main>
<h1>주요 콘텐츠에 대한 제목<h1>
<section aria-label="영역 1에 대한 제목">
<h2>영역 1에 대한 제목</h2>
... 영역 1에 대한 콘텐트 ...
</section>
<section aria-label="영역 2에 대한 제목">
<h2>영역 2에 대한 제목</h2>
... 영역 2에 대한 콘텐트 ...
</section>
</main>
<h1>주요 콘텐츠에 대한 제목<h1>
<section aria-label="영역 1에 대한 제목">
<h2>영역 1에 대한 제목</h2>
... 영역 1에 대한 콘텐트 ...
</section>
<section aria-label="영역 2에 대한 제목">
<h2>영역 2에 대한 제목</h2>
... 영역 2에 대한 콘텐트 ...
</section>
</main>
HTML 예: section[title] 어트리뷰트 사용
일부 브라우저에서 툴팁으로 사용할 수 있는 어트리뷰트 값을 사용하여 각 영역에 대한 레이블을 지정하세요.
<main>
<h1>주요 콘텐트에 대한 제목<h1>
<section title="영역 1에 대한 제목">
<h2>영역 1에 대한 제목</h2>
...영역 1에 대한 콘텐트...
</section>
<section title="영역 2에 대한 제목">
<h2>영역 2에 대한 제목</h2>
...영역 2에 대한 콘텐트...
</section>
</main>
<h1>주요 콘텐트에 대한 제목<h1>
<section title="영역 1에 대한 제목">
<h2>영역 1에 대한 제목</h2>
...영역 1에 대한 콘텐트...
</section>
<section title="영역 2에 대한 제목">
<h2>영역 2에 대한 제목</h2>
...영역 2에 대한 콘텐트...
</section>
</main>
role="region" 어트리뷰트가 region 랜드마크를 지정하는데 사용됩니다.
ARIA 예: role="region" 어트리뷰트 사용
<div role="main">
<h1>주요 콘텐트 영역에 대한 제목<h1>
<div role="region" aria-labelledby="region1">
<h2 id="region1">영역 1에 대한 제목</h2>
... 영역 1에 대한 콘텐트 ...
</div>
<div role="region" aria-labelledby="region2">
<h2 id="region2">영역 2에 대한 제목</h2>
... 영역 2에 대한 콘텐트 ...
</div>
</div>
<h1>주요 콘텐트 영역에 대한 제목<h1>
<div role="region" aria-labelledby="region1">
<h2 id="region1">영역 1에 대한 제목</h2>
... 영역 1에 대한 콘텐트 ...
</div>
<div role="region" aria-labelledby="region2">
<h2 id="region2">영역 2에 대한 제목</h2>
... 영역 2에 대한 콘텐트 ...
</div>
</div>