使用 <img> 标签配合 tabindex="0" 无法通过空格键或回车键触发关闭操作，根本原因在于图片元素默认不具备交互语义；应改用 <button> 元素并合理设置 ARIA 属性，才能真正实现符合无障碍标准的键盘可操作关闭按钮。
使用 `` 标签配合 `tabindex="0"` 无法通过空格键或回车键触发关闭操作，根本原因在于图片元素默认不具备交互语义；应改用 `
在构建 Web 应用时，确保所有交互控件对键盘用户和辅助技术（如屏幕阅读器）友好，是 WCAG 2.1 和 WAI-ARIA 实践的基本要求。许多开发者尝试通过为 <img> 添加 tabindex="0" 让其获得焦点，但该方式存在本质缺陷：<img> 的隐式 ARIA role 是 img，属于静态非交互元素，浏览器不会为其绑定空格（Space）或回车（Enter）按键的点击行为——即使能聚焦，也无法触发事件。
✅ 正确做法是：使用语义化 <button> 元素封装图标内容。<button> 天然具备 button 角色，自动支持键盘聚焦、空格/回车触发 click 事件，并兼容各类辅助技术。
✅ 推荐实现结构（含 SVG 图标）
<button aria-label="关闭当前区域" class="close-button">
<svg aria-hidden="true" viewBox="0 0 12 12" focusable="false">
<line x1="0" y1="12" x2="12" y2="0" stroke="currentColor" stroke-width="2"/>
<line x1="0" y1="0" x2="12" y2="12" stroke="currentColor" stroke-width="2"/>
</svg>
</button>- aria-label 提供清晰、有意义的可访问名称（避免仅用 "close"，推荐上下文化描述如 "关闭搜索面板"）；
- aria-hidden="true" 告知辅助技术忽略 SVG 内容（因其仅为装饰，语义已由 button 承载）；
- focusable="false"（可选）进一步防止 SVG 子元素意外获取焦点；
- 使用 currentColor 保证图标颜色随文本色自动适配，提升主题兼容性。
✅ 对应 JavaScript 逻辑（简洁可靠）
document.querySelector('.close-button').addEventListener('click', () => {
// 示例：移除父容器
document.querySelector('.form').remove();
});⚠️ 注意事项：
- ❌ 避免给 <img> 添加 tabindex="0" + onclick 的“伪按钮”方案——它无法响应空格/回车，且 screen reader 会读作“图像”，造成认知混淆；
- ❌ 不要省略 aria-label：无文本内容的按钮必须通过 aria-label 或 aria-labelledby 提供可访问名称，否则屏幕阅读器将朗读为空白或“按钮”；
- ✅ 若必须使用 <img>（如外部资源），可设 alt=""（空 alt 表示装饰性）+ role="button" + tabindex="0" + 手动监听 keydown，但强烈不推荐——需额外处理 Enter/Space 事件，易出错且不符合语义优先原则；
- ✅ 建议为按钮添加视觉焦点样式（如 outline 或自定义 :focus-visible 样式），确保键盘用户清晰识别当前焦点位置。
通过语义化 <button> 替代 <img>，不仅解决了键盘操作问题，更从根本上提升了组件的可访问性、可维护性与跨浏览器一致性——这是现代前端开发中「以语义驱动交互」的最佳实践。
