2レベルのパンくず例
シンプルなパンくず: ホーム > 機能 (現在のページ)
3レベルのパンくず例
より深いパンくず: ホーム > Citizen Intelligence Agency > 機能 (現在のページ)
4レベルのパンくず例
4階層のナビゲーション構造を持つより深いパンくずです。
アクセシビリティ機能
- セマンティックHTML:
<nav>要素にaria-label="パンくず"と<ol>リスト構造を使用 - ARIA属性: 現在のページは
aria-current="page"でマーク - キーボードナビゲーション: すべてのリンクはタブでアクセス可能で、フォーカスインジケーターが表示されます
- スクリーンリーダー対応: 適切なセマンティック構造でナビゲーションコンテキストを通知
- 色のコントラスト: WCAG 2.1 AA基準（最低4.5:1）を満たします
- レスポンシブデザイン: モバイル、タブレット、デスクトップに対応
- テーマサポート: ライトモード、ダークモード、Black Trigramテーマに対応
使用方法
<nav aria-label="パンくず">
<ol class="breadcrumb">
<li class="breadcrumb-item">
<a href="/">ホーム</a>
</li>
<li class="breadcrumb-item">
<a href="/section.html">セクション</a>
</li>
<li class="breadcrumb-item" aria-current="page">
現在のページ
</li>
</ol>
</nav>
テストチェックリスト
- ✅ キーボードナビゲーション (Tab, Shift+Tab, Enter)
- ✅ スクリーンリーダーの通知 (NVDA, JAWS, VoiceOverでテスト)
- ✅ 色のコントラストがWCAG 2.1 AA基準を満たす (通常テキストで4.5:1)
- ✅ すべてのビューポートサイズでレスポンシブデザインが機能
- ✅ フォーカスインジケーターが明確に表示される
- ✅ ホバー状態でビジュアルフィードバックを提供
- ✅ ライトモードとダークモードで動作
- ✅ Black Trigramテーマで動作