本文详解为何为 span 添加 tabindex 和 role=”link” 反而破坏可访问性，并提供符合 wcag 和 aria 最佳实践的原生 html 解决方案——仅用语义化 `
配套 css 示例（确保 可点击区域足够大，符合 wcag 2.5.5 目标尺寸要求）：
.grid_item { display: block; padding: 1rem; text-align: center; border-radius: 8px; transition: background-color 0.2s; } .grid_item:hover, .grid_item:focus { background-color: #f5f5f5; } .grid_item img { max-height: 60px; max-width: 100%; vertical-align: middle; }? 关键要点总结：
- 移除所有不必要的 tabindex： 默认可聚焦且可键盘激活（Enter 触发跳转），无需额外 tabindex=”0″；
- 禁用 role=”link”： 已是原生链接角色，显式声明 role=”link” 属于冗余且可能干扰辅助技术；
- 避免嵌套交互元素： 内再嵌 会导致两个独立焦点节点，违反“一个逻辑组件，一个焦点停靠点”原则；
- 空格键不是链接的激活方式：根据 W3C WAI-ARIA Authoring Practices 和浏览器标准，只有
- 视觉样式 ≠ 语义结构：用 CSS 让 看起来像卡片/网格项，远比用 模拟链接更可靠、更轻量、更易维护。
遵循“第一规则：若原生元素可胜任，请勿使用 ARIA”（First Rule of ARIA Use），不仅能提升可访问性，还能降低代码复杂度、增强 seo 友好性，并确保未来浏览器更新不会意外破坏交互逻辑。