Navigation 랜드마크
Navigation 랜드마크는 웹 사이트나 페이지 콘텐트를 탐색하는데 사용 되도록 의도 된 링크의 그룹(예를 들어 목록)을 식별하는 방법을 제공합니다.
ARIA 1.2 명세: navigation 랜드마크
디자인 패턴
- 페이지가 둘 이상의
navigation랜드마크를 포함하는 경우, 각각은 고유의 레이블을 가져야 합니다. navigation랜드마크가 페이지의 다른navigation랜드마크와 동일한 링크 세트를 가지는 경우, 각navigation랜드마크에 대해 동일한 레이블을 사용하세요.
navigation 랜드마크를 지정하도록 HTML nav 엘리먼트를 사용하세요.
HTML 예: 한 개 Navigation 랜드마크
페이지에 하나의 navigation 랜드마크만 있다면, 레이블은 선택적입니다.
<nav>
<h2>navigation 영역에 대한 제목<h2>
<ul>
<li><a href="page1.html">Link 1</a></li>
<li><a href="page2.html">Link 2</a></li>
<li><a href="page3.html">Link 3</a></li>
<li><a href="page4.html">Link 4</a></li>
.....
</ul>
</nav>
<h2>navigation 영역에 대한 제목<h2>
<ul>
<li><a href="page1.html">Link 1</a></li>
<li><a href="page2.html">Link 2</a></li>
<li><a href="page3.html">Link 3</a></li>
<li><a href="page4.html">Link 4</a></li>
.....
</ul>
</nav>
HTML 예: 둘 이상의 Navigation 랜드마크 예
페이지에 둘 이상의 navigation 랜드마크가 있다면, 각각은 고유한 레이블을 가져야 합니다.
<nav aria-labelledby="nav1">
<h2 id="nav1">navigation 1에 대한 제목<h2>
<ul>
<li><a href="page11.html">Link 1</a></li>
<li><a href="page12.html">Link 2</a></li>
<li><a href="page13.html">Link 3</a></li>
<li><a href="page14.html">Link 4</a></li>
.....
</ul>
</nav>
....
<nav aria-labelledby="nav2">
<h2 id="nav2">navigation 2에 대한 제목<h2>
<ul>
<li><a href="page21.html">Link 5</a></li>
<li><a href="page22.html">Link 6</a></li>
<li><a href="page23.html">Link 7</a></li>
<li><a href="page24.html">Link 8</a></li>
.....
</ul>
</nav>
<h2 id="nav1">navigation 1에 대한 제목<h2>
<ul>
<li><a href="page11.html">Link 1</a></li>
<li><a href="page12.html">Link 2</a></li>
<li><a href="page13.html">Link 3</a></li>
<li><a href="page14.html">Link 4</a></li>
.....
</ul>
</nav>
....
<nav aria-labelledby="nav2">
<h2 id="nav2">navigation 2에 대한 제목<h2>
<ul>
<li><a href="page21.html">Link 5</a></li>
<li><a href="page22.html">Link 6</a></li>
<li><a href="page23.html">Link 7</a></li>
<li><a href="page24.html">Link 8</a></li>
.....
</ul>
</nav>
navigation 랜드마크를 지정하도록 role="navigation" 어트리뷰트가 사용됩니다.
ARIA 예: 한 개 Navigation 랜드마크
페이지에 하나의 navigation 랜드마크만 있다면, 레이블은 선택적입니다.
<div role="navigation">
<h2>navigation 영역에 대한 제목<h2>
<ul>
<li><a href="page1.html">Link 1</a></li>
<li><a href="page2.html">Link 2</a></li>
<li><a href="page3.html">Link 3</a></li>
<li><a href="page4.html">Link 4</a></li>
.....
</ul>
</div>
<h2>navigation 영역에 대한 제목<h2>
<ul>
<li><a href="page1.html">Link 1</a></li>
<li><a href="page2.html">Link 2</a></li>
<li><a href="page3.html">Link 3</a></li>
<li><a href="page4.html">Link 4</a></li>
.....
</ul>
</div>
ARIA 예: 둘 이상의 Navigation 랜드마크
페이지에 둘 이상의 navigation 랜드마크가 있다면, 각각은 고유한 레이블을 가져야 합니다.
<div role="navigation" aria-labelledby="nav1">
<h2 id="nav1">navigation 영역 1에 대한 제목<h2>
<ul>
<li><a href="page11.html">Link 1</a></li>
<li><a href="page12.html">Link 2</a></li>
<li><a href="page13.html">Link 3</a></li>
<li><a href="page14.html">Link 4</a></li>
.....
</ul>
</div>
....
<div role="navigation" aria-labelledby="nav2">
<h2 id="nav2">navigation 영역 2에 대한 제목<h2>
<ul>
<li><a href="page21.html">Link 5</a></li>
<li><a href="page22.html">Link 6</a></li>
<li><a href="page23.html">Link 7</a></li>
<li><a href="page24.html">Link 8</a></li>
.....
</ul>
</div>
<h2 id="nav1">navigation 영역 1에 대한 제목<h2>
<ul>
<li><a href="page11.html">Link 1</a></li>
<li><a href="page12.html">Link 2</a></li>
<li><a href="page13.html">Link 3</a></li>
<li><a href="page14.html">Link 4</a></li>
.....
</ul>
</div>
....
<div role="navigation" aria-labelledby="nav2">
<h2 id="nav2">navigation 영역 2에 대한 제목<h2>
<ul>
<li><a href="page21.html">Link 5</a></li>
<li><a href="page22.html">Link 6</a></li>
<li><a href="page23.html">Link 7</a></li>
<li><a href="page24.html">Link 8</a></li>
.....
</ul>
</div>