SSB-C - パンくずリストの統一規格

147

25/12/30

4 分。

定義

SSB-C標準は、パンくずリストのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています。

構造とセマンティクス

パンくずリストには、セマンティックに正しいHTMLタグを使用する必要があります：パンくずリストでは、ナビゲーションブロックを示すには <nav>、順序付きリストには <ol>、各パンくずリスト要素には <li> を使用する必要があります:

<nav class="breadcrumbs">
  <ol class="breadcrumbs__list">
    <li class="breadcrumbs__item">
      <a href="/" class="breadcrumbs__link">ホーム</a>
    </li>
    <li class="breadcrumbs__item">
      <a href="/category" class="breadcrumbs__link">カテゴリ</a>
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--current">
      現在のページ名
    </li>
  </ol>
</nav>

アクセシビリティ

リストの最後の要素は現在のページを表しており、リンクにしてはなりません。また、アクセシビリティを向上させるために aria-current="page" を追加する必要があります:

<li class="breadcrumbs__item breadcrumbs__item--current" aria-current="page">
  現在のページ名
</li>

インタラクティブ性と視覚的な反応

<li>要素には基本的なスタイルが設定されており、これらは<a>リンクに継承されます。また、テキストの改行を防ぐためにwhite-space: nowrap;が使用されます:

.breadcrumbs__item {
  font-size: 14px;
  color: #6c757d;
  white-space: nowrap;
}

.breadcrumbs__link {
  color: #007bff;
  text-decoration: none;
}

.breadcrumbs__item--current {
  font-weight: bold;
  color: #343a40;
}

モバイル端末での利便性を高めるため、水平スクロールバーを追加することをお勧めします：

.breadcrumbs {
  overflow-inline: auto;
  overflow-block: hidden;
}

.breadcrumbs__list {
  display: flex;
}

Schema.orgのマイクロマークアップは、検索エンジンがページ上のコンテンツを正しく識別するのに役立ちます：

<nav class="breadcrumbs">
  <ol class="breadcrumbs__list" itemscope itemtype="https://schema.org/BreadcrumbList">
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/">
        <span itemprop="name">ホーム</span>
      </a>
      <meta itemprop="position" content="1" />
    </li>
    <li class="breadcrumbs__item" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
      <a itemprop="item" href="/category">
        <span itemprop="name">カテゴリ</span>
      </a>
      <meta itemprop="position" content="2" />
    </li>
    <li class="breadcrumbs__item breadcrumbs__item--current" itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem" aria-current="page">
      <span itemprop="name">現在のページ名</span>
      <meta itemprop="position" content="3" />
    </li>
  </ol>
</nav>

類似カテゴリ:

アドバイス
Reactコンポーネントの構造
各Reactコンポーネントがどのような外観であるべきか、私の考え
428
26/04/19
13 分。
基準
SST - タブに関する統一規格
SST規格は、タブのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
69
26/02/17
11 分。
基準
SSF-U - フルスクリーン表示の統一規格
SSF-U規格は、フルスクリーン表示のセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
249
26/02/03
3 分。
基準
SSA - アコーディオンの統一標準
SSA規格は、アコーディオンのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を定めています
260
26/01/19
4 分。
アドバイス
ウェブサイトにおける悪い慣行
ウェブデザインにおける致命的なミスの分析。スライダー、自動再生、重いページがコンバージョン率やGoogleでの検索順位を低下させる理由
236
25/12/30
2 分。
基準
SSP - ページネーションの統一規格
SSP規格は、ページネーションのセマンティクス、アクセシビリティ、および動作ロジックに関する要件を規定しています
243
25/12/30
3 分。
すべての記事