Source

خرده نان

مکان صفحه فعلی را در یک سلسله مراتب ناوبری که به طور خودکار جداکننده ها را از طریق CSS اضافه می کند، نشان دهید.

بررسی اجمالی

جداکننده ها به طور خودکار در CSS از طریق ::beforeو اضافه می 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 برای الگوی پودر سوخاری مراجعه کنید.