卡片应使用带role="button"和tabindex="0"的div实现可访问点击，或跳转类直接用a标签；需统一处理click/keydown（enter/space），添加:focus-visible焦点样式，并避免button包裹块级元素。
卡片整体绑定点击事件，但别用 button 包裹整个 div
HTML 规范不允许 button 元素内嵌块级元素（比如含 h3、p、img 的卡片），强行这么做会导致语义错误、键盘焦点异常，甚至部分屏幕阅读器无法正确朗读。真正可访问的方案是让卡片容器本身成为可交互元素。
- 给卡片外层
div添加role="button"和tabindex="0"，使其能被键盘聚焦并触发Enter/Space - 配合 CSS 设置
cursor: pointer和user-select: none提升视觉反馈 - 监听
click和keydown事件，统一处理Enter（keyCode 13）和Space（keyCode 32）
避免 onclick 写在 HTML 里，用 JS 绑定更可控
内联 onclick 不仅污染结构，还难以复用逻辑、调试困难，尤其当卡片来自模板渲染或动态列表时。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 用
document.querySelectorAll(".card")批量绑定，比每个卡片写一遍onclick更可靠 - 事件委托更优：监听父容器，用
event.target.closest(".card")判断是否点中卡片，减少监听器数量 - 注意：如果卡片内部有
a或button等原生可点击子元素，需在事件处理器中if (e.target.matches("a, button")) return阻止冒泡干扰
视觉反馈不能只靠 :hover，必须支持键盘焦点
仅靠鼠标悬停样式对键盘用户完全不可见，会直接导致 WCAG 2.1 AA 级别失败（Focus Visible）。焦点样式缺失是实际审计中最常被扣分的点之一。
- 必须为卡片添加
:focus-visible样式（不是:focus），避免鼠标用户看到冗余边框 - 推荐组合：
outline: 2px solid #007bff; outline-offset: 2px;，确保对比度 ≥ 3:1 - 如果用了自定义焦点框（如
box-shadow），务必测试 Windows 高对比模式下是否仍可见
跳转类卡片优先用 a 标签，而非模拟按钮
如果卡片点击后是页面跳转（比如链接到详情页），语义上它就是个链接，硬套按钮逻辑反而增加无障碍负担。
- 直接用
a标签包裹整个卡片内容，设置display: block即可撑满 - 加
aria-label补充链接目的（例如aria-label="查看文章《React 性能优化》详情"），尤其当卡片内无明确文字标题时 - 避免同时给
a加onclick和href—— 若需 JS 处理，用event.preventDefault()后手动跳转，否则可能触发两次导航
:focus-visible 兼容性或事件冒泡处理上，结果上线后被无障碍测试一票否决。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
