本文详解为何仅给 <img> 添加 tabindex="0" 无法实现键盘关闭功能，并提供符合无障碍标准的正确实现方案：使用语义化 <button> 替代图片标签，配合 aria-label 和 aria-hidden，确保键盘用户（含屏幕阅读器使用者）能自然聚焦、按空格或回车触发关闭行为。
本文详解为何仅给 `` 添加 `tabindex="0"` 无法实现键盘关闭功能，并提供符合无障碍标准的正确实现方案：使用语义化 `
在构建可访问的 Web 界面时，一个常见误区是试图通过为非交互元素（如 <img>）添加 tabindex="0" 来“启用键盘聚焦”，却忽略了其固有语义与交互能力的缺失。<img> 的 ARIA 角色默认为 img，属于静态内容型元素，即使获得焦点，浏览器也不会为其自动绑定空格（Space）或回车（Enter）键的点击行为——这正是你遇到“能聚焦但无法触发关闭”的根本原因。
正确的解法是：用语义化、原生可交互的 <button> 元素承载关闭功能。<button> 天然具备以下无障碍优势：
- 自动获得键盘焦点；
- 按下 Space 或 Enter 时自动触发 click 事件；
- 被屏幕阅读器识别为可操作控件（role=button）。
同时，需为按钮提供明确的无障碍名称（accessible name），推荐使用 aria-label（如 aria-label="关闭"），而非依赖 aria-labelledby（易出错且需额外 ID 关联）。若按钮内嵌图标（SVG 或 IMG），应移除其语义干扰：对 SVG 使用 aria-hidden="true"；对 <img> 则设 alt=""（空 alt 表示装饰性，不被读屏器朗读）。
以下是完整、可运行的实践示例：
<div class="form">
<p>下方关闭按钮支持键盘操作：按 Tab 键聚焦，按空格或回车关闭本区域。</p>
Close me →
<button aria-label="关闭" class="image_button">
<svg
aria-hidden="true"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="12" x2="12" y2="0" stroke="red" stroke-width="2"/>
<line x1="0" y1="0" x2="12" y2="12" stroke="red" stroke-width="2"/>
</svg>
</button>
</div>.image_button {
padding: 3px;
background: none;
border: none;
cursor: pointer; /* 显式声明交互态 */
outline: 2px solid transparent;
outline-offset: 2px;
}
.image_button:focus {
outline-color: #007aff; /* 符合 WCAG 的可见焦点指示 */
}
.image_button svg {
width: 1em;
height: 1em;
display: block;
}
.form {
border: 1px solid #333;
padding: 1em;
margin: 1em 0;
}const btn = document.querySelector('.image_button');
const frm = document.querySelector('.form');
btn.addEventListener('click', () => {
frm.remove();
});✅ 关键注意事项总结：
- ❌ 避免给 <img>、<div>、<span> 等非交互元素强行添加 tabindex="0" 并监听 keydown 模拟按钮行为——这违背语义，增加维护成本，且难以满足 WCAG 2.1 标准；
- ✅ 始终优先选用 <button>，它是最简单、最可靠、最符合无障碍规范的交互载体；
- ✅ 必须提供 aria-label（或 aria-labelledby/<span> 文本内容）作为可访问名称，不可仅依赖 title 或 alt（title 不被所有读屏器支持，alt 在 <button> 内部的 <img> 上仅用于图像描述，非按钮功能）；
- ✅ 对纯装饰性图标（无独立语义），务必添加 aria-hidden="true"（SVG）或 alt=""（IMG），防止冗余信息干扰辅助技术用户。
遵循以上原则，你的关闭按钮不仅能被键盘用户顺畅操作，更能通过自动化无障碍检测工具（如 axe、Lighthouse），真正实现「一次开发，全员可用」。
