
仅需使用语义化 html,移除冗余 tabindex 和 role 属性,让原生 `
该结构存在三个关键缺陷:
- tabindex=”0″ 同时加在 和 上 → 导致每个 logo 产生 两个独立焦点停靠点,屏幕阅读器会重复播报“链接”,用户易迷失;
- 是对原生 的冗余覆盖,违反 ARIA 第一条使用规则:“若原生元素能实现目标,勿用 ARIA”;
- 本身已是可聚焦、可按 Enter 激活的交互元素,无需额外 tabindex;而 Space 键本就不适用于链接(它是按钮/复选框等控件的激活键),强行支持反而破坏一致性。
✅ 正确做法:剥离所有非必要属性,回归语义本质
关键说明:
- 天然支持 Tab 进入、Enter 激活,且被屏幕阅读器正确识别为“链接”;
- aria-label 仅在 img 的 alt 不足以传达导航意图时补充(例如 alt=”Logo” 过于模糊),否则直接依赖 alt 即可;
- 容器(
或 )不参与交互逻辑,因此绝不添加 tabindex 或 role;
- 若需视觉上禁用下划线或调整样式,用 css 控制:
.grid_item a { text-decoration: none; display: block; /* 确保点击区域完整覆盖图片 */ }⚠️ 注意事项:
- 避免将 替换为
- 若网格需支持键盘方向键导航(如横向 Tab 切换+方向键微调),应采用 roving tabindex 模式,但此属进阶需求,基础场景中原生 已完全满足;
- 所有图片必须含有意义的 alt 文本(非空字符串),这是可访问性的底线要求。
总结:可访问性不是“加功能”,而是“做减法”——删掉干扰语义的 ARIA、移除制造混乱的 tabindex、信任浏览器对原生元素的无障碍支持。你的 logo 网格只需一个干净的 ,就能让键盘用户和屏幕阅读器用户获得与鼠标用户完全一致的体验。
发表于:数据库2026-02-04复制链接 - 若需视觉上禁用下划线或调整样式,用 css 控制: