APG Patterns
English GitHub
English GitHub

Breadcrumb

サイト階層内のユーザーの現在位置を示すナビゲーションパターン。

🤖 AI Implementation Guide
Vue

デモ

基本的な Breadcrumb

現在のページへのパスを示すシンプルなブレッドクラムトレイル。

長いパス

複数の階層レベルを持つより深いナビゲーションパス。

デモのみ表示 →

アクセシビリティ

WAI-ARIA ロール

ロール 対象要素 説明
navigation <nav> 要素 支援技術にナビゲーションランドマークを提供します（<nav>の暗黙のロール）

WAI-ARIA Breadcrumb Pattern (opens in new tab)

WAI-ARIA プロパティ

属性 対象 値 必須 説明
aria-label <nav> "Breadcrumb"（またはローカライズされた値） はい スクリーンリーダー向けにナビゲーションランドマークにラベルを付けます
aria-current 現在のページ要素 "page" はい（最後のアイテム） パンくずリスト内の現在のページを識別します

WAI-ARIA ステート

aria-current="page"

パンくずリストナビゲーション内の現在のページ位置を示します。

対象 パンくずリストの最後のアイテム（現在のページ）
値 "page"
必須 はい
参照 aria-current (opens in new tab)

キーボードサポート

キー アクション
Tab パンくずリストのリンク間でフォーカスを移動します
Enter フォーカスされたリンクをアクティブ化します

Breadcrumbはネイティブの<a>要素の動作をキーボードインタラクションに使用します。追加のキーボードハンドラーは不要です。

ソースコード

Breadcrumb.vue 
<script setup lang="ts">
/**
 * Breadcrumb component following WAI-ARIA APG pattern
 * @see https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/
 */

export interface BreadcrumbItem {
  label: string;
  href?: string;
}

export interface BreadcrumbProps {
  items: BreadcrumbItem[];
  ariaLabel?: string;
  class?: string;
}

const props = withDefaults(defineProps<BreadcrumbProps>(), {
  ariaLabel: 'Breadcrumb',
});

function getItemKey(item: BreadcrumbItem): string {
  return `${item.href ?? 'current'}-${item.label}`;
}
</script>

<template>
  <nav v-if="items.length > 0" :aria-label="ariaLabel" :class="['apg-breadcrumb', props.class]">
    <ol class="apg-breadcrumb-list">
      <li v-for="(item, index) in items" :key="getItemKey(item)" class="apg-breadcrumb-item">
        <a
          v-if="item.href && index !== items.length - 1"
          :href="item.href"
          class="apg-breadcrumb-link"
        >
          {{ item.label }}
        </a>
        <span
          v-else
          :aria-current="index === items.length - 1 ? 'page' : undefined"
          class="apg-breadcrumb-current"
        >
          {{ item.label }}
        </span>
      </li>
    </ol>
  </nav>
</template>

使い方

使用例 
<script setup>
import Breadcrumb from './Breadcrumb.vue';

const items = [
  { label: 'ホーム', href: '/' },
  { label: '製品', href: '/products' },
  { label: '現在の製品' }
];
</script>

<template>
  <Breadcrumb :items="items" />
</template>

API

プロパティ

プロパティ 型 デフォルト 説明
items BreadcrumbItem[] required Breadcrumb アイテムの配列
ariaLabel string "Breadcrumb" ナビゲーションのアクセシブルなラベル

BreadcrumbItem

プロパティ 型 必須 説明
label string はい アイテムの表示テキスト
href string いいえ リンクの URL（現在のページの場合は省略）

テスト

テストはARIA属性、セマンティック構造、アクセシビリティ要件全体にわたってAPG準拠を検証します。Breadcrumbコンポーネントは2層のテスト戦略を採用しています。

テスト戦略

ユニットテスト（Testing Library）

フレームワーク固有のテストライブラリを使用してコンポーネントのレンダリング出力を検証します。これらのテストは正しいHTML構造とARIA属性を確認します。

  • HTML構造（nav、ol、li要素）
  • ARIA属性（aria-label、aria-current）
  • リンクのレンダリングとhref値
  • jest-axeによるアクセシビリティ検証

E2Eテスト（Playwright）

すべてのフレームワークで実際のブラウザ環境でコンポーネントの動作を検証します。これらのテストはインタラクションとフレームワーク間の一貫性をカバーします。

  • キーボードナビゲーション（Tab、Enter）
  • ライブブラウザでのARIA構造
  • axe-coreによるアクセシビリティスキャン
  • フレームワーク間の一貫性チェック

テストカテゴリ

高優先度: APG ARIA属性（Unit + E2E）

テスト 説明
nav element セマンティックな<nav>要素を使用します
aria-label ナビゲーションにアクセシブルなラベルがあります（デフォルト: "Breadcrumb"）
aria-current="page" 最後のアイテムにaria-current="page"があります
ol/li structure 適切なセマンティック構造のために順序付きリストを使用します

高優先度: キーボードインタラクション（E2E）

テスト 説明
Tab navigation Tabキーでパンくずリストのリンク間をフォーカス移動します
Enter activation Enterキーでフォーカスされたリンクをアクティブ化します
Current page not focusable 最後のアイテム（span）はタブ順序に含まれません

中優先度: アクセシビリティ（Unit + E2E）

テスト 説明
axe violations WCAG 2.1 AAの違反がありません（jest-axe使用）
Custom aria-label ariaLabel propsでデフォルトラベルをオーバーライドできます
Separator hidden 視覚的な区切り文字は支援技術から隠されています

低優先度: コンポーネントの動作（Unit）

テスト 説明
Renders all items 提供されたすべてのアイテムが順番にレンダリングされます
Links have href 現在でないアイテムは正しいhrefを持つリンクとしてレンダリングされます
className merge カスタムクラスがコンポーネントクラスとマージされます

低優先度: フレームワーク間の一貫性（E2E）

テスト 説明
All frameworks have nav React、Vue、Svelte、Astroすべてがパンくずナビゲーションをレンダリング
Same item count すべてのフレームワークで同じ数のパンくずアイテムをレンダリング
Current page marked すべてのフレームワークで最後のアイテムにaria-current="page"をマーク

テストツール

完全なドキュメントについては testing-strategy.md (opens in new tab) を参照してください。

リソース