添加tabindex=0后仍无法通过键盘触发图片关闭按钮问题

问题出在<img>本身不属于原生交互式控件，即便添加tabindex="0"让它能获取键盘焦点，但默认不会响应空格键和回车键的触发行为。以下是两种可行的解决方法：

方法1：用原生<button>包裹图片（推荐） #

直接使用按钮元素包裹图片，原生按钮默认支持键盘交互（空格/回车均可触发点击），同时自带完善的无障碍属性支持，无需额外编写JS逻辑：

<button type="button" aria-label="关闭">
  <img src="close img link" alt="" title="关闭" />
</button>

• type="button"避免按钮默认的表单提交行为
• aria-label="关闭"为读屏器明确按钮功能，图片的alt设为空是因为按钮已有清晰标签，避免重复播报

方法2：给<img>添加键盘事件监听（仅当无法替换为button时使用） #

如果必须保留<img>标签，需要手动监听键盘事件，处理空格和回车的触发逻辑：

<img 
  src="close img link" 
  tabindex="0" 
  alt="关闭" 
  title="关闭" 
  id="closeBtnImg"
/>

<script>
const closeImg = document.getElementById('closeBtnImg');

closeImg.addEventListener('keydown', function(e) {
  // 判断是否为回车键或空格键
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault(); // 阻止空格默认的页面滚动行为
    // 执行你的关闭操作
    handleClose();
  }
});

// 示例关闭函数，替换为实际业务逻辑
function handleClose() {
  console.log('关闭操作已触发');
  // 比如：document.getElementById('modal').style.display = 'none';
}
</script>

注意事项 #

• 优先选择方法1，原生按钮的无障碍支持更规范，减少自定义代码的维护成本
• 确保鼠标点击和键盘触发的关闭逻辑完全一致

内容的提问来源于stack exchange，提问作者Ankitha Sharanappa