卡片式组件常用于文章列表等场景。虽然它们看起来很简单，但在考虑可访问性时，却存在着令人惊讶的深层次设计问题。
一张典型的卡片（从上方拍摄）
- 图像
- 文章标题
- 文章摘要
- 更多详情链接
让我们来考虑一种垂直布局的实现模式。
设计时需要考虑的主要要点
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 模式示例。