卡片内多个链接指向同一目标时，tab会重复聚焦，应合并语义：主链接包裹整个卡片，次要元素改用role="link"并手动处理键盘事件与无障碍属性。
卡片里多个链接共用同一目标时，tab会重复聚焦
用户用键盘导航时，一张卡片内如果同时有标题链接、图片链接、操作按钮链接，且都指向同一页面（比如 /post/123），浏览器默认会给每个 @#@#@#@#@#@#@#@#@#@0，屏幕阅读器可能连续读两遍相似描述。
- 图片链接应设
alt=""（空值），因为它的语义已被标题覆盖；若需保留图片信息，改用aria-describedby="desc-id"指向一段补充说明 - 避免给标题链接再加
aria-label——它会覆盖链接文本，反而丢失可读性 - 检查 Chrome DevTools 的 Accessibility 面板，看“Name”字段是否重复或冗余
卡片组件中容易被忽略的焦点管理细节
可访问性问题往往藏在边界场景里：
- 卡片带“收藏”“分享”等操作按钮时，这些按钮必须和主链接分离，不能塞进同一个
<a></a>；否则用户无法单独触发操作 - 使用
prefers-reduced-motion媒体查询控制 hover/focus 动画，否则动画可能引发眩晕，且某些系统会禁用焦点样式 - 卡片列表用
<section></section>或<article></article>包裹，比纯<div> 更利于屏幕阅读器识别结构 <p>最麻烦的不是写对第一个卡片，而是确保第 27 个卡片在动态渲染、懒加载、服务端渲染后，焦点顺序和语义依然一致——这需要把焦点逻辑封装进组件生命周期，而不是靠手动加 <code>tabindex。
