`で問題ない場合:
- 単なるリンクのグループとして機能する
- カード自体に意味的な独立性がない
一般的なブログ記事一覧や商品一覧のカードでは、`` が適切です。 ただし、複数の``を使用する場合は、スクリーンリーダーのランドマーク移動を考慮し、`aria-labelledby`または`aria-label`で各記事を識別できるようにすることが推奨されます（WCAG 2.4.6、レベルAA）。
`aria-labelledby` を使用する場合は、IDはユニークな値になるように注意してください。
## 視覚順序とHTML構造について
### **パターン1: 視覚的順序とHTML順序を一致させる**
```
`
`
```
HTMLの記述順序が視覚順序と完全に一致するため、シンプルで直感的です。
※ ``の最初の要素は見出しが望ましいとされますが、絶対的な要件ではありません。 視覚順序との一致を優先する場合、このパターンで問題ありません。
補足:
音声認識ソフト（Dragon、Voice Controlなど）は画面に表示されているテキストを基準に動作します。 `visually-hidden (sr-only)`を使用することで視覚テキストが保持され、音声認識での操作が可能になります。 ほか、リンクラベルの対応でOKなパターンとNGなパターンの実装例です。
```
`
詳細を見る
詳細を見る
詳細を見る
詳細を見る
`
```
### **パターン2: CSS orderで視覚順序を調整**
```
`
`
```
```
`.article-card {
display: flex;
flex-direction: column;
}
.article-card img {
order: -1;
}
`
```
``の最初の要素が見出しになるため、セマンティック的により望ましい構造です。
装飾的画像（`alt=""`）の場合、読み上げ順序への影響はありません（画像はスキップされるため）。
注意:
- 画像が意味を持ち、alt属性を指定している場合、視覚順序と読み上げ順序が変わるためこの構造は適さない
- キーボードのTab順序はHTMLの順序に従うため、カード内に複数のフォーカス可能な要素がある場合は、フォーカス順が論理的な流れを壊していないことを確認してください。
## カードのクリッカブル領域を全体にしたい場合
### **パターン3: 擬似要素でカード全体をクリッカブルに**
この方法では、タイトルのリンクの擬似要素でカード全体をカバーし、「詳細を見る」は視覚的な装飾として``にします。
「詳細を見る」を``のまま`tabindex="-1"`や`aria-hidden="true"` にしても、スクリーンリーダーのリンクリストや、要素移動モードでノイズになるので、``にするのがいいと考えます。
```
`
`
```
```
`.article-card {
position: relative;
}
.card-link::after {
content: '';
position: absolute;
inset: 0;
z-index: 1;
}
.card-link:focus-visible {
outline: none;
}
.card-link:focus-visible::after {
outline: 2px solid currentColor;
outline-offset: 2px;
}
/* カード内に複数のリンクがある場合の例 */
.article-card a:not(.card-link) {
position: relative;
z-index: 2;
}
`
```
**メリット:**
- セマンティックな構造を保てる
- スクリーンリーダーで自然に読み上げられる
- カード内に複数のリンクを配置できる（カテゴリ、タグ、著者リンクなど）
**デメリット:**
- `z-index`の管理が必要（ただし、一度設定すれば問題ない）
### **パターン4: カード全体を**``で囲む
この方法では、カード全体が一つのリンクになるため、「詳細を見る」は自然に``になります。
```
`
`
```
**メリット:**
- 実装がシンプル
- CSSの調整が容易
**デメリット:**
- スクリーンリーダーによっては全テキストが連結して読み上げられる場合がある （特にVoiceOverでは「記事タイトル記事の概要...詳細を見る、リンク」となる）
- カード内に複数のリンクを配置できない
### **各パターンのサンプル**
## まとめ
アクセシブルなカード型コンポーネントの実装には、複数のアプローチが存在します。重要なのは、「これが唯一の正解」という実装パターンは存在せず、**状況によって最適な解が変わる**ということです。
実装にあたっては以下を意識しておくことが重要です。
1. 実際に使う人が困らない実装を選ぶ
2. 画像の意味、カードの用途、サイト全体の構成を考慮する
3. 実用的で保守しやすい実装を優先する
記事タイトル
記事の概要...
記事タイトル:詳細を見る記事タイトル
記事の概要...
記事タイトル:詳細を見る
記事タイトル
記事の概要...
詳細を見る
記事タイトル
記事の概要...
詳細を見る