卡片型元件的無障礙實裝模式

在文章列表等處經常使用的卡片型元件。外觀雖然簡潔，但在考慮無障礙設計時，其實隱藏著相當深入的設計課題。

以典型的卡片為例，從上而下

• 影像
• 文章標題
• 文章摘要
• 詳細連結

等縱向排列的版面配置實作模式。

設計時的主要考量重點

1. 視覺順序與 HTML 結構

螢幕閱讀器基本上會按照 HTML 的撰寫順序進行讀取。WCAG 2.0 的成功準則 1.3.2（有意義的順序，等級 A）規定，視覺順序與 HTML 順序必須相符是基本原則。

不過，使用 CSS 改變順序本身並不會直接違反 WCAG。即使視覺順序與 HTML 順序不同，只要內容仍然可以理解，就沒有問題。根據具體情況靈活判斷是很重要的。

2. 圖像的處理方式

文章卡片的圖像在大多數情況下是裝飾性的。既然有文章標題，內容就已經能充分傳達，因此沒有必要讀出圖像的說明。

當作為裝飾性圖像處理時，只需使用alt=""即可。

<img src="thumbnail.jpg" alt="">

3. 詳細連結的標籤

「查看更多」這類通用文字應當避免，理由如下：

視覺上的問題

沒有周圍的脈絡，無法判斷連結的內容

螢幕閱讀器的問題

使用連結清單功能顯示時，全部都是「查看詳細」，無法區分

語音辨識問題

存在多個相同文字時，需要用數字選擇，操作變得繁瑣

理想上應該像「查看○○的詳細」這樣，讓連結本身能傳達目的，但本文將說明在重現「查看詳細」這種設計時的實作方法。

4. 卡片的可點擊區域

為了提升 UX，經常需要讓卡片整體都可點擊。實作方法有多種，但對 accessibility 的影響各不相同。

5. 卡片應該用 article 還是 div

使用哪個取決於內容的性質。

適用的情況：

• 卡片內容能作為獨立內容存在

在以下情況下沒有問題:

• 作為單純的連結群組運作
• 卡片本身沒有語義獨立性

在一般的部落格文章列表或商品列表卡片中，較為適切。不過，當使用多個時，建議考量螢幕閱讀器的地標導航功能，並透過aria-labelledby或aria-label讓每篇文章都能被識別（WCAG 2.4.6，A級）。

使用aria-labelledby時，請確保ID為唯一值。

關於視覺順序與HTML結構

模式1：視覺順序與HTML順序一致

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
</article>

由於HTML撰寫順序與視覺順序完全一致，因此簡潔直觀。

※ 雖然的首個元素最好是標題，但這並非絕對要求。如果優先考慮與視覺順序的一致性，此模式不會有問題。

補充:

語音辨識軟體（Dragon、Voice Control 等）根據螢幕上顯示的文字進行操作。使用 visually-hidden (sr-only) 可以保留視覺文字，使語音辨識操作成為可能。以下是連結標籤對應中正確和不正確實作範例。

<!-- 以下は可視テキストがアクセシブルな名前に含まれているのでOK -->
<a href="#" id="link-text" class="card-detail-link" aria-labelledby="link-text article-title">
  詳細を見る
</a>
<a href="#" aria-label="詳細を見る：記事タイトル">
  詳細を見る
</a>
<!-- 以下は可視テキストがアクセシブルな名前に含まれていないのでNG -->
<a href="#" class="card-detail-link" aria-labelledby="article-title">
  詳細を見る
</a>
<a href="#" class="card-detail-link" aria-label="記事タイトル">
  詳細を見る
</a>

模式 2: 使用 CSS order 調整視覺順序

<article class="article-card" aria-labelledby="article-title">
  <h3 id="article-title"><a href="#">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <a href="#" class="card-detail-link">
	  <span class="visually-hidden">記事タイトル:</span>詳細を見る
  </a>
  <img src="thumbnail.jpg" alt="">
</article>

.article-card {
  display: flex;
  flex-direction: column;
}

.article-card img {
  order: -1;
}

由於 的第一個元素是標題，這種結構在語義上更具優越性。

對於裝飾性圖像（alt=""），對讀取順序沒有影響（因為圖像會被跳過）。

注意：

• 當圖像有意義且指定了 alt 屬性時，視覺順序和讀取順序會改變，因此不適合採用此結構
• 鍵盤的 Tab 順序遵循 HTML 順序，因此如果卡片內有多個可聚焦的元素，請確認焦點順序不會破壞邏輯流程。

當您想要整個卡片都可點擊時

模式 3: 使用擬似元素讓整張卡片可點擊

在此方法中，標題連結的擬似元素覆蓋整張卡片，而「查看詳情」作為視覺裝飾，使用 。

即使將「查看詳細」保留為 並設置 tabindex="-1" 或 aria-hidden="true"，也會在螢幕閱讀器的連結清單和元素移動模式中產生雜訊，因此改為 會更好。

<article class="article-card" aria-labelledby="article-title">
  <img src="thumbnail.jpg" alt="">
  <h3 id="article-title"><a href="#" class="card-link">記事タイトル</a></h3>
  <p>記事の概要...</p>
  <span class="card-detail-link">詳細を見る</span>
</article>

.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：用 包裹整個卡片

用這個方法時，整張卡片會成為一個連結，「查看詳細」自然會變成 。

<article class="article-card" aria-labelledby="article-title">
  <a href="#" class="card-link">
    <img src="thumbnail.jpg" alt="">
    <h3 id="article-title">記事タイトル</h3>
    <p>記事の概要...</p>
    <span class="card-detail-link">詳細を見る</span>
  </a>
</article>

優點：

• 實裝簡單
• CSS 調整容易

缺點：

• 某些螢幕閱讀器可能會將所有文字連接在一起念誦（特別是在 VoiceOver 中會讀成「文章標題文章概要…檢視詳細、連結」）
• 卡片內無法放置多個連結

各模式範例

總結

實現無障礙的卡片型元件有多種方法。重要的是，並不存在「唯一正確的」實作模式，最佳的解決方案會根據情況而變化。

在實作時，須留意以下幾點。

1. 選擇實際使用者不會遇到困難的實作方式
2. 考量圖片含義、卡片用途、整個網站架構
3. 優先採用實用且易於維護的實作方式