应使用 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 键不会触发。
正确做法是：
立即学习“前端免费学习笔记（深入）”；
- 给卡片根元素添加
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临时禁用卡片——这会让键盘用户卡在不可见/不可操作元素上
