用 HTML 和 CSS 写出语义化、可访问的交互式卡片
来源：dev.to — 2026-09-28
📋 概述
作者长期为自用和客户项目标准化「交互式卡片」的写法，花了大量时间研究、构建、测试和迭代，才找到真正可访问的实现方式。文章从定义讲起：卡片是把信息分组呈现的 UI 模式，内容可以是图片、链接、段落、按钮或标题；交互式卡片则是进入更多信息的入口，比如跳转到商品详情页或收藏商品。动手之前要先弄清两件事——链接和按钮的区别，以及如何在不破坏 HTML 逻辑语义的前提下让卡片可交互。静态卡片应当使用 article 元素承载，因为它是自足、可独立分发的内容单元。
🔑 核心要点
- 卡片在语义上是一段自足内容，因此静态卡片应该用 <article> 而不是随手套一个 div。
- 可访问性的关键细节之一是 aria-labelledby 指向卡片内部主标题的 id，让读屏软件能正确朗读这块内容。
- 动手前必须先分清链接与按钮的语义差别——前者导航，后者触发动作。
- 作者把交互式卡片分成简单与复杂两类，分类决定用哪种交互与语义组合。
- 他提醒现实：大概只有一成开发者真的知道怎么写一张可访问的卡片，所以文章把结构逐项拆开讲。
💡 金句
article 元素代表的是一段完整、自足的内容组合，原则上可以独立分发或复用——它可以是一篇帖子、一篇报道、一条评论，也可以是任何独立的内容单元。
👍 0
👎 0
← 返回 dev.to 首页