卡片式元件常用於文章清單等場景。雖然它們看起來很簡單，但在考慮可訪問性時，卻存在著令人驚訝的深層設計問題。
一張典型的卡片（從上方拍攝）
- 影像
- 文章標題
- 文章摘要
- 更多詳情連結
讓我們來考慮一種垂直佈局的實作模式。
設計時需要考慮的主要要點
1. 視覺順序與 HTML 結構
螢幕閱讀器通常會按照 HTML 程式碼的編寫順序讀取它。成功標準 1.3.2（有意義的序列，A 級）所以，基本原則是使視覺順序與HTML順序一致。這就是我們想表達的意思。
然而，更改 CSS 中的順序本身並不違反 WCAG 標準。只要內容清晰易懂，視覺順序和 HTML 順序不同也無妨。重要的是要靈活變通，並根據實際情況做出決策。
2. 如何處理影像
文章卡上的圖片通常是裝飾性的文章標題足以傳達內容，因此無需閱讀圖片描述。
當作為裝飾圖像處理時alt=""這就足夠了。
<img src="thumbnail.jpg" alt="">
3. 詳細資訊連結標籤
基於以下原因，應避免使用「了解更多」之類的通用文字：
視覺問題
脫離上下文很難判斷連結的意思。
螢幕閱讀器問題
當使用連結清單功能在清單中顯示時，所有連結都標記為“查看詳情”，並且無法區分（WCAG 2.4.4 連結用途，A 級）。
語音辨識問題
如果存在多個相同的文本，則需要按編號選擇，這使得過程變得複雜。
理想情況下，連結應該包含能夠僅從連結本身就清楚地表明其用途的文本，例如“查看 XX 的詳細資訊”，但在這裡我們將介紹如果您想完全複製“查看詳細資訊”設計，該如何實現它。
4. 卡片的可點擊區域
出於用戶體驗的考慮，通常需要使整個卡片可點擊。實現這一點的方法有很多種，每種方法對可訪問性的影響也各不相同。
5. 卡片應該使用文章元素還是div元素？
選擇取決於內容的性質。
<article>適用情況：
- 卡片內容是一個獨立的內容部分。
<div>如果可以的話：
- 它僅僅充當一組連結。
- 卡片本身沒有語義獨立性。
用於一般部落格文章清單或產品清單卡片，<article>然而，多種<article>使用時，請考慮螢幕閱讀器的地標移動。aria-labelledby或者aria-label建議使用 CSS3 標籤來識別每篇文章（WCAG 2.4.6，AA 級）。
aria-labelledby如果使用此功能，請確保 ID 是唯一值。
視覺順序與HTML結構
模式 1：視覺順序與 HTML 順序保持一致
文章標題
文章摘要...
文章標題：看詳情
它簡單直觀，因為 HTML 順序與視覺順序完美匹配。
※ <article>標題中的第一個元素是首選，但並非絕對必要。如果您優先考慮視覺順序的一致性，這種模式也可以接受。
補充：
語音辨識軟體（如 Dragon、語音控制等）的工作原理是基於螢幕上顯示的文字。visually-hidden (sr-only)透過這種方式，既能保留視覺文本，又能實現語音辨識操作。此外，這裡還提供了一些連結標籤支援的 OK 和 NG 模式範例。