仅给 <img> 添加 tabindex="0" 无法实现键盘关闭功能，因其语义是静态图像；应改用 <button> 元素并配合 aria-label 提供可访问名称，才能正确响应空格键和回车键，同时满足 WCAG 无障碍要求。
仅给 `` 添加 `tabindex="0"` 无法实现键盘关闭功能，因其语义是静态图像；应改用 `
在构建可访问的 Web 界面时，一个常见误区是试图通过为非交互元素（如 <img>）添加 tabindex="0" 来实现键盘焦点，却忽略了语义与行为必须一致这一核心原则。<img> 的默认 ARIA role 是 img，属于“无交互性”元素——即使它能获得焦点，浏览器也不会为其自动绑定空格（Space）或回车（Enter）键的点击事件。因此，即便你设置了 tabindex="0"、alt、aria-labelledby，用户按下空格后页面依然毫无反应。
✅ 正确做法是：使用语义化交互元素作为基础容器。<button> 天然具备以下无障碍特性：
- 自动获得键盘焦点（无需 tabindex）；
- 按下 Space 或 Enter 时自动触发 click 事件；
- 屏幕阅读器会将其识别为“按钮”，并朗读其可访问名称（accessible name）。
要确保视觉上仍显示为图标（如 × 图标），可将 SVG 或 <img> 嵌入 <button> 内，并通过 aria-hidden="true" 移除其辅助技术含义，同时用 aria-label 在按钮层级提供明确的操作意图：
<button aria-label="关闭此区域" class="close-button">
<svg aria-hidden="true" viewBox="0 0 12 12" width="16" height="16">
<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>对应的 JavaScript 事件监听也更简洁可靠（无需手动监听 keydown）：
document.querySelector('.close-button').addEventListener('click', () => {
// 执行关闭逻辑，例如：element.remove() 或 element.classList.add('hidden')
document.querySelector('.target-panel').remove();
});? 关键注意事项：
- ❌ 避免对 <img>、<div>、<span> 等非交互元素强行添加 tabindex="0" 并监听 keydown 模拟点击——这违反语义，且易遗漏 click 事件的其他触发方式（如触控、语音指令）；
- ✅ 若必须使用 <img> 标签（如外部图标资源），可设 alt=""（空 alt 表示装饰性）+ role="button" + aria-label，但不推荐——role="button" 是修补手段，不如原生 <button> 稳健；
- ✅ 所有可操作按钮都应有清晰的视觉焦点样式（如 outline: 2px solid #007bff），避免移除默认 outline 后导致键盘用户迷失；
- ✅ 对于模态框等关键组件，关闭按钮还应支持 Esc 键关闭，可通过监听 document.addEventListener('keydown', e => e.key === 'Escape' && close()) 补充实现。
总结：可访问性不是“加几个属性”的技巧，而是从语义出发的设计决策。用 <button> 承载关闭操作，既是代码最简路径，也是对所有用户（尤其是键盘与屏幕阅读器使用者）最负责任的实践。
