APG Patterns
English GitHub
English GitHub

Breadcrumb

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

🤖 AI Implementation Guide
Astro

デモ

基本的な 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.astro 
---
/**
 * 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 Props {
  items: BreadcrumbItem[];
  ariaLabel?: string;
  class?: string;
}

const { items, ariaLabel = 'Breadcrumb', class: className } = Astro.props;
---

{
  items.length > 0 && (
    <nav aria-label={ariaLabel} class:list={['apg-breadcrumb', className]}>
      <ol class="apg-breadcrumb-list">
        {items.map((item, index) => {
          const isLast = index === items.length - 1;
          return (
            <li class="apg-breadcrumb-item">
              {item.href && !isLast ? (
                <a href={item.href} class="apg-breadcrumb-link">
                  {item.label}
                </a>
              ) : (
                <span aria-current={isLast ? 'page' : undefined} class="apg-breadcrumb-current">
                  {item.label}
                </span>
              )}
            </li>
          );
        })}
      </ol>
    </nav>
  )
}

使い方

使用例 
---
import Breadcrumb from './Breadcrumb.astro';

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

<Breadcrumb items={items} />

API

プロパティ

プロパティ 型 デフォルト 説明
items BreadcrumbItem[] 必須 パンくずリストアイテムの配列
ariaLabel string "Breadcrumb" ナビゲーションのアクセシブルラベル
class string - 追加の CSS クラス

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) を参照してください。

リソース