如何将按键事件集成到jQuery函数以提升网站可访问性？

核心优化思路 #

• 将交互逻辑抽离为独立函数，避免重复代码
• 同时绑定鼠标事件（mouseover/mouseout）和聚焦事件（focus/blur），覆盖键盘用户的聚焦场景
• 绑定keydown事件处理标准触发按键（回车键/空格键），不限制其他按键的默认行为

完整代码实现 #

首先抽离显示/隐藏的逻辑函数：

// 显示hover框架的逻辑
function showHoverFrame(element) {
  $(element).parent().next().children('.hover-frame').css({"opacity": '1', "scale": "1"});
}

// 隐藏hover框架的逻辑（根据实际初始样式调整参数）
function hideHoverFrame(element) {
  $(element).parent().next().children('.hover-frame').css({"opacity": '0', "scale": "0.8"});
}

然后绑定所有事件：

$('.insight-featured')
  // 鼠标悬浮或元素聚焦时触发显示
  .on('mouseover focus', function() {
    showHoverFrame(this);
  })
  // 鼠标离开或元素失焦时触发隐藏
  .on('mouseout blur', function() {
    hideHoverFrame(this);
  })
  // 处理键盘按键交互
  .on('keydown', function(e) {
    // 仅响应回车键(13)和空格键(32)，这是键盘交互的标准触发按键
    if (e.keyCode === 13 || e.keyCode === 32) {
      e.preventDefault(); // 阻止默认行为（比如空格键会导致页面滚动）
      showHoverFrame(this);
      // 如果需要实现点击/按键切换显示状态，可添加状态判断：
      // const hoverFrame = $(this).parent().next().children('.hover-frame');
      // hoverFrame.css("opacity") === '1' ? hideHoverFrame(this) : showHoverFrame(this);
    }
  });

额外注意事项 #

• 确保.insight-featured元素是可聚焦的：如果它不是默认可聚焦元素（如<div>），需要添加tabindex="0"属性，让键盘用户能通过Tab键聚焦到它：

<div class="insight-featured" tabindex="0">...</div>

• 不要阻止非目标按键的默认行为，比如Tab键需要正常工作以切换焦点，这保证了键盘用户的导航流畅性

内容的提问来源于stack exchange，提问作者Sam St Aubyn