卡片式元件的無障礙實作模式

卡片式元件常用於文章列表等場景。外觀看似簡單，但若納入無障礙考量，其實蘊含不少意想不到的設計課題。

典型的卡片由上而下包含

• 圖片
• 文章標題
• 文章摘要
• 詳細連結

，並以垂直排列的版面為例，一起來思考實作模式。

設計時的主要考量重點

1. 視覺順序與 HTML 結構

螢幕閱讀器基本上會依照 HTML 的撰寫順序朗讀內容。在 WCAG 2.0 的成功準則 1.3.2（有意義的順序，等級 A）中，基本原則是讓視覺順序與 HTML 順序保持一致。

不過，使用 CSS 變更順序本身並不會違反 WCAG。即使視覺順序與 HTML 順序不同，只要內容仍能被理解，就沒有問題。重要的是依情況靈活判斷。

2. 圖片的處理方式

文章卡片中的圖片，大多屬於裝飾性圖片。只要有文章標題，內容就已充分傳達，因此朗讀圖片說明的必要性較低。

若將圖片視為裝飾性圖片，只需設定alt=""即可。

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

3. 詳細連結的標籤

「查看詳情」這類通用文字，基於以下原因應避免使用。

視覺上的問題

若缺乏周邊脈絡，就無法判斷這是什麼連結。

螢幕閱讀器的問題

使用連結清單功能列出時，所有連結都顯示為「查看詳情」，無法加以區分。

語音辨識的問題

若有多個相同文字，就必須以編號選取，操作變得繁瑣。

理想上應使用如「查看○○詳情」之類的文字，讓連結本身即可傳達其用途；但本文在此說明的是，若要忠實重現「查看詳情」的設計，應如何實作。

4. 卡片的可點擊區域

為了提升 UX，常有希望整張卡片都可以點擊的情況。實作方式有多種，而各種方式對無障礙功能的影響也各不相同。

5. 卡片應使用 article 還是 div

應選用哪一種，取決於內容的性質。

<article>適合的情況：

• 卡片內容可作為獨立內容成立

<div>可接受的情況：

• 僅作為連結群組發揮功能
• 卡片本身不具備語意上的獨立性

在一般部落格文章列表或商品列表的卡片中，<article>通常是適當的做法。不過，若使用多個<article>標題，應考慮螢幕閱讀器的地標（landmark）導覽需求，建議使用aria-labelledby或aria-label來識別各篇文章（WCAG 2.4.6，等級 AA）。

使用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 的撰寫順序與視覺順序完全一致，因此結構簡單且直覺。

※ <article>的第一個元素通常建議使用標題，但這並非絕對要求。 若優先考量與視覺順序一致，此模式亦可接受。

補充：

語音辨識軟體（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;
}

由於<article>的第一個元素為標題，因此在語意上是更理想的結構。

對於裝飾性圖片（alt=""），由於螢幕閱讀器會略過圖片，因此不會影響朗讀順序。

注意：

• 若圖片具有意義且已設定 alt 屬性，則視覺順序與朗讀順序會產生差異，因此不適合採用此結構。
• 鍵盤的 Tab 順序依照 HTML 的排列順序進行。若卡片內有多個可聚焦元素，請確認焦點順序不會破壞邏輯流程。

若希望整個卡片皆可點擊

模式 3：使用偽元素讓整張卡片可點擊

此方法是以標題連結的偽元素覆蓋整張卡片，「查看詳情」則僅作為視覺裝飾，<span>不設為連結。

即使「查看詳情」保持<a>為連結，並加上tabindex="-1"或aria-hidden="true"，在螢幕閱讀器的連結清單或元素導覽模式中仍會造成干擾，因此我認為<span>將其改為非連結較為合適。

<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：以整張卡片<a>包覆

在此做法中，由於整張卡片是單一連結，「查看詳情」會自然地成為<span>

<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で，會唸成「文章標題 文章摘要... 查看詳情，連結」）
• 無法在卡片內配置多個連結

各模式範例

總結

實作可存取性（accessibility）的卡片式元件時，存在多種做法。重要的是，並不存在「這是唯一正解」的實作模式，最佳解法會依情況而改變。

實作時，建議注意以下事項。

1. 選擇讓實際使用者不會感到困擾的實作方式
2. 考量圖片的意義、卡片的用途，以及整個網站的結構
3. 優先採用實用且易於維護的實作方式