应使用 article 替代 div 包裹独立可分发的卡片（如新闻、商品），用 section 仅当为功能型卡片组且配 h2 或 aria-labelledby；整块点击须加 tabindex="0" 和 role="button"，并支持 enter/space 键触发。

用 article 或 section 替代 div 包裹卡片

整块可点击的卡片如果还用 div，屏幕阅读器会当成普通容器，无法传达“这是一个独立内容单元”的语义。浏览器也不会自动为其添加焦点管理或键盘交互支持。

必须改用语义化标签：

• article 适合每张卡片代表一条独立、可分发的内容（如新闻、产品、用户评价）
• section 更适合功能型卡片（如“设置面板”“统计概览”），但需配 h2 或 aria-labelledby，否则和 div 在可访问性上没区别
• 避免嵌套多个 article 而无明确上下文，比如在 main 外层再套一层 article —— 这会让可访问性树断裂

整块点击区域必须有明确的 role="button" 和键盘支持

仅给卡片加 onclick 或 addEventListener('click')，对键盘用户完全无效。Tab 键无法聚焦，Enter/Space 键不会触发。

正确做法是：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

• 给卡片根元素添加 tabindex="0" 和 role="button"
• 监听 keydown 事件，显式响应 Enter 和 Space 键（注意：Space 需要 preventDefault()，否则会触发页面滚动）
• 配合 CSS 添加 :focus-visible 样式，确保键盘焦点可见（别只靠 outline: none 抹掉它）
• 若卡片内已有可聚焦子元素（如链接、按钮），整块点击逻辑应退让——优先保证子元素行为不被覆盖

细节陷阱：details 不适合整块可点击卡片

有人想复用原生 details 实现展开+点击跳转，这是错的。details 的语义是“可选展开的附加信息”，不是“可交互内容入口”。它的默认行为与导航冲突：

• 点击 summary 只会 toggle 展开状态，无法同时跳转或触发其他逻辑
• 无法用键盘直接激活跳转动作（Enter/Space 始终只控制展开）
• 若强行在 summary 上加 onclick，会导致语义混乱：屏幕阅读器报“按钮，已折叠”，但用户点了却跳走了

真要兼顾展开和跳转，得用 article + 手动实现展开逻辑，或拆成两个独立操作区（比如标题可点击跳转，右侧图标控制展开）。

视觉反馈与焦点管理容易被忽略

整块点击卡片最常漏掉的是「按下态」和「焦点路径」设计。用户鼠标悬停、手指长按、键盘聚焦时，必须有清晰、一致的反馈。

• 不要只依赖 :hover；移动端没有 hover 状态，需用 :active + JavaScript 模拟 press 效果
• 所有可聚焦卡片必须有 outline 或等效高对比度边框（WCAG 2.4.7 要求焦点指示器尺寸 ≥ 2px）
• 若卡片列表很长，且用户用键盘 Tab 导航，建议加 scroll-margin-top，让聚焦卡片自动滚到视口顶部，避免被固定头栏遮挡
• 别用 pointer-events: none 或 visibility: hidden 临时禁用卡片——这会让键盘用户卡在不可见/不可操作元素上

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！