Source

빵 부스러기

CSS를 통해 구분 기호를 자동으로 추가하는 탐색 계층 구조 내에서 현재 페이지의 위치를 ​​나타냅니다.

개요

::before구분 기호는 및 를 통해 CSS에 자동으로 추가됩니다 content.

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item active" aria-current="page">Home</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item active" aria-current="page">Library</li>
  </ol>
</nav>

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

접근성

이동 경로는 탐색을 제공하므로 요소 aria-label="breadcrumb"에서 제공되는 탐색 유형을 설명하는 것과 같은 의미 있는 레이블을 추가 하고 현재 페이지를 나타내는 집합의 마지막 항목에 적용하는 것이 좋습니다.<nav>aria-current="page"

자세한 내용 은 이동 경로 패턴에 대한 WAI-ARIA 작성 방법을 참조하십시오 .